jQuery知识点整理2

### jQuery选择器

1. 基础选择器

 ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素 类选择器：$(".myClass") 匹配具有此类样式值的所有元素标签选择器：$("div") 匹配指定标签名称的所有元素 通配符选择器：$("*") 匹配所有元素 并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器 交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用

2.层级选择器

 后代选择器：$("form input") 后代选择器，选择ancestor的所有子孙节点 子代选择器：$("#main > span")main下一级的的所有span子节点 兄弟选择器：$("label + input") 兄弟相邻选择器，选择所有label相邻的第一个input节点 兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点

3.过滤选择器

过滤选择器前面一般加一个冒号

名称	用法	描述
：odd	$(‘li:odd’).css(‘color’, ‘red’);	找到索引号为奇数行的元素
:even	$(‘li:even’).css(‘color’, ‘red’);	找到索引号为偶数行的元素
:eq（index）	$(‘li:eq(2)’).css(‘color’, ‘red’);	入的索引号对应的元素

4.筛选选择器

名称	用法	描述
children(选择器)	$(“父元素”).children(“子元素选择器”)	子类选择器 $(“父元素>子元素”)
find(选择器)	$(“父元素”).find(“子元素选择器”)	后代选择器 $(“父元素 子元素”)
siblings(选择器)	$(“兄弟元素”).siblings(“兄弟元素”)	兄弟选择器 （找的是兄弟节点 不包括自己）
parent()	$(’#first’).parent();	父元素选择器
next（）	$(‘li’).next()	下一个兄弟元素
prev()	$(‘li’).prev()	上一个兄弟元素
eq(index)	$(‘li’).eq(2);	相当于$(‘li:eq(2)’),index从0开始

jQuery动画

1.显示和隐藏

​ (1)显示 show() 两个参数

​ 参数1：表示动画执行的时长 可以填毫米数 也可以填代表动画时长的字符串 “slow” “normal” “fast”

​ 参数2 ： 回调函数 就是在动画执行完毕之后 会执行的

$("#show").click(function () {$(".one").show("normal");})

​

​ (2)隐藏 hide()

​ 参数1：表示动画执行的时长 可以填毫米数 也可以填代表动画时长的字符串 “slow” “normal” “fast”

​ 参数2 ： 回调函数 就是在动画执行完毕之后 会执行的

$("#hide").click(function () {$(".one").hide(1000, function () {alert("我的动画走完了")});
})

​ (3)切换 toggle()

$("#toggle").click(function () {$(".one").toggle(1000);
})

2.滑入和滑出

• 滑入 slideDown()

• 滑出 sildeUp()

• 切换 slideToggle()

参数1：表示动画执行的时长 可以填毫米数 也可以填代表动画时长的字符串 “slow” “normal” “fast”

参数2： 动画执行完毕之后 他的回调函数

$(function () {// 滑入$("#slideDown").click(function () {// 如果slideDown 不写参数  那么就是相当于给了一个默认的时长 "normal"$(".one").slideDown()$(".one").slideDown("normal")})// 滑出$("#slideUp").click(function () {$(".one").slideUp(1000, function () {alert("我走完了")});})// 切换$("#slideToggle").click(function () {$(".one").slideToggle(1000, function () {alert("我走完了")});})})

3.淡入和淡出

• 淡入 fadeIn()
• 淡出 fadeOut()
• 切换 fadeToggle()

参数1：表示动画执行的时长 可以填毫米数 也可以填代表动画时长的字符串 “slow” “normal” “fast”

参数2： 动画执行完毕之后 他的回调函数

• 淡到哪里 fadeTo()

参数2 ：表示淡入的目标透明度

$(function () {// 淡入$("#fadeIn").click(function () {$(".one").fadeIn(1000, function(){alert("我走完了")})})// 淡出$("#fadeOut").click(function () {$(".one").fadeOut(1000, function(){alert("我走完了")})})// 切换$("#fadeToggle").click(function () {$(".one").fadeToggle(1000, function(){alert("我走完了")})})// 淡入到哪里  第二个参数表示淡入的目标透明度$("#fadeTo").click(function () {$(".one").fadeTo(1000, 0.3)})})

4.自定义动画 animate方法

• 参数1 ：是必填项 为一个对象 里面填的是需要做动画的属性
• 参数2 ：可选填 动画时长 默认有一个动画时长400毫秒
• 参数3 ：可选项 运动曲线 匀速 linear 缓动 swing(默认值)
• 参数4 ：可选项 动画执行完毕的回调函数

$(function () {$("#move800").click(function () {// 自定义动画$("#box").animate({left: 800,width: 300,height: 300,opacity: 0.5}, 3000, "swing", function () {// 第一个动画执行完毕之后$("#box").animate({left: 200,width: 50,height: 50,top: 200,opacity: 1}, 2000, function () {$("#box").animate({left: 200,width: 50,height: 50,top: 200,opacity: 1},200)})})})
})

5.动画队列

动画队列 ： 在同一个元素上执行多个动画 那么对于这个动画来说 只会执行当前的东辉，后面都会被放进动画队列,等到页面的动画执行完毕之后 才会执行后面的

stop():停止动画

• 参数1：是否清除队列

• 参数2 ：是否跳转到动画的最终结果

  如果两个参数都不写 那么默认两个参数就是false

  参数1	参数2	描述
  true	true	立即完成当前的动画,后面的任务不再执行
  true	false	所有动画任务立刻停止
  false	false	停止当前的动画,后面的任务继续执行 默认的情况
  false	true	立即完成当前的动画,后面的任务继续执行

jQuery节点操作

1.添加节点

append()		把内容或标签插入到标签里面内容的后面appendTo()		把所有的标签和内容插入到标签内容的后面   子元素.appendTo(父元素)prepend()		把所有的内容和标签插入到标签插入到标签里面内容的前面after			在被选元素之前插入内容before			在被选元素之后插入内容

2.移除节点

1. 直接给内容给个空字符串

$("#div").html("")

2. 清空元素 empty()

$("#div").empty();

3. 删除指定的元素

$("#div").remove();	//自杀

4. 清除

$("子元素").parent().remove();

克隆节点

• 作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();