概述
轻量级的JavaScript库
功能
- html元素元素选取/操作
- css操作
- html事件函数
- JavaScript特效动画
- DOM遍历与修改
- ajax网络请求
- utilities 工具集
引入
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
建议使用国内的 百度 新浪等CDN地址
或者下载在网页同一目录
<script src='jquery-1.10.2.min.js'>
</script>
ps:小程序不支持jquery：没有DOM api
React一般不用jquery：jquery的几个功能，修改DOM，监听事件，网络请求，工具函数；react 网络请求axios 工具集lodash等 有自己的生态圈
选择器
$(selector).action()
$(this).hide()隐藏当前元素
$("p") p标签
$("p.test") p标签 class=‘test’
$("#test") id='test'
$("*") 全部元素
$("p:first") 第一个p元素
$("ul li:first")第一个ul的第一个li元素
$("ul li:first-child") 选取每个ul的第一个li元素
$("['href']")属性有href元素
$("a[target='_blank']")
$(":button") 所有type等于button的元素
$("tr:even")tr偶数
$("tr:odd")tr奇数
jquery选择器是xpath和css的结合
效果
淡入淡出&滑动
toggle（）切换隐藏显示
fadeIn() 慢慢显示 fadeIn("slow/fast") fadeIn(3000)
fadeOut() 与fadeIn相反
fadeToggle() 切换
fadeTo("slow",0.5) 渐变到指定透明度
slideUp(speed,callback)
slideUp() 向上滑动
slideDown() 向下滑动
slideToggle 切换
动画
animate
$(selector).animate({params},speed,callback)
params是css属性
$('div').animate({left:'25px'})
扩展：
相对值写法 width:'+=250px'
使用预定义值 height:'toggle'
使用队列 编写多个animate
jquery链写法(相同元素) $("#nice").css("color","red").slideUp(2000)
stop(stopEnd,goToStop)停止动画
stopEnd:停止该元素所有动画 包括队列还未执行的
goToStop 立即完成动画
ps:默认情况，所有元素都有静态位置，不能移动，要移动需要设置relative absoule fixed
属性写法使用驼峰，eg：paddingLeft
HTML
捕获
html() 标签内容 包含标签
text() 标签内容 不包含标签
val() input的value值
attr('href') 获取属性值
attr('href','http://www.baidu.com') 设置属性值
attr('href',function(i,originValue){})回调函数
添加元素
append 结尾添加
preappend 开头添加
after 之后添加
before 之前添加
删除元素
remove 删除元素
empty 情况元素
remove('.nice') 过滤元素
操作css
addClass("blue important") 增加元素
removeClass("blue") 移除元素
toggleClass() 添加和删除切换
css() 设置/返回
$("p").css('background-color') 返回
css('background','yellow') 一个
css('background':'yellow','font-size':'200%')多个
尺寸
width 元素宽度(包括padding)
innerWidth 元素实际宽度
outterWidth 元素宽度(包括margin)
DOM遍历
父级
parent 父元素
parents 所有祖先
parentsUntil 两个给定元素的所有父元素
$('p').parentsUntil('div')
子级
children('p.a')返回class=a 直接子元素p
find('span') 寻找所有标签为span的后代元素
同胞
sliblings 所有同胞元素
过滤
firt 第一个
last 最后一个
eq(0) 第一个
filter 过滤条件
not 与filter想法
next nextAll nextUntil pre preAll preUntil
AJAX
load(url,data,callback)
从服务器加载数据，并把返回数据插入被选元素
post
get
