jQuery学习笔记（二）之选择器、样式操作和动画效果

1、jQuery选择器

1.1 基础选择器

原生JS获取元素方式很多很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取DOM元素统一标准。

$("选择器") //和CSS选择器格式相同，但是要加引号

名称	用法	描述
ID选择器	$("#id");	获取指定 ID 的元素
类选择器	$(".class");	获取同一类名为class的元素
标签选择器	$("div");	获取同一类标签div的所有元素
并集选择器	$("div,li,p");	使用逗号分隔，获取多个标签下的元素
交集选择器	$("div.show");	获取class为show的div元素

1.2 层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>，只能获取亲儿子层级的元素
后代选择器	$("ul li");	使用空格，获取ul下的所有li元素，获取所有后代，包括孙子

1.3 隐式迭代（重要！！！）

遍历jQuery对象（伪数组形式存储）内部的DOM元素的过程叫做隐式迭代。

$("div").css("background", "pink");   //给所有div设置背景颜色为粉色
$("ul li").css("color", "red");      //给ul下的所有li元素字体设置为粉色

上述就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

注意： 隐式迭代适用于对同一类元素做了相同的操作，如果想要给同一类元素做不同操作，就需要用到遍历。（后面会讲到）

1.4 筛选选择器

语法	用法	描述
:first	$("li:first");	获取第一个li元素
:last	$("li:last");	获取最后一个li元素
:eq(index)	$("li:eq(2)");	获取到所有li元素中，选择索引号为2的元素，索引号从0开始
:odd	$("li:odd");	获取到所有li元素中，选择索引号为奇数的元素
:even	$("li:even");	获取到所有li元素中，选择索引号为偶数的元素

1.5 筛选方法（重点！！！）

• parent() 返回最近一级的父元素，亲爸爸

<div class="yeye">
    <div class="father">
        <div class="son">儿子</div>
    </div>
</div>

console.log($(".son").parent());  // div.father

• parents("选择器") 返回指定的祖先级元素，包括爸爸，爷爷（如括号里不带选择器，则返回所有的祖先级元素）

<div class="one">
    <div class="two">
        <div class="three">
            <div class="four">我不容易</div>
        </div>
    </div>
</div>

console.log($(".four").parent().parent().parent());  //div.one
console.log($(".four").parents());  //所有的祖先，one,two,three,html,body
console.log($(".four").parents(".one"));  //div.one

• children("选择器") 相当于$("ul>li")，子类选择器
• find("选择器") 相当于$("ul li")，后代选择器

<div class="nav">
    <p>我是屁</p>
    <div>
        <p>我是p</p>
    </div>
</div>

$(".nav").children("p").css("color", "red");  //亲儿子,"我是屁"字体变为红色
$(".nav").find("p").css("color", "red");  //可以选里面所有的孩子,包括儿子和孙子 ，"我是屁"和"我是p"字体都变为红色 

• siblings("选择器") 返回除了自身元素之外的所有亲兄弟

<ol>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li class="item">我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
    <li>我是ol 的li</li>
</ol>

$("ol .item").siblings("li").css("color", "red");  //除了item，其他的li的字体颜色都变为红色

• eq(index) 返回索引号为index的元素，索引号从0开始,相当于筛选选择器:eq(index)

<ul>
    <li>我是ul 的li</li>
    <li>我是ul 的li</li>
    <li>我是ul 的li</li>
    <li>我是ul 的li</li>
    <li>我是ul 的li</li>
</ul>

//下面代码都实现了第3个li的字体颜色设置为蓝色
var index = 2;
// (1) 利用选择器的方式选择
$("ul li:eq(2)").css("color", "blue");
$("ul li:eq("+index+")").css("color", "blue");
// (2) 利用选择方法的方式选择 更推荐这种写法
$("ul li").eq(2).css("color", "blue");
$("ul li").eq(index).css("color", "blue");

以上方法需重点掌握，此外，还有一些其他的方法如下：

语法	用法	描述
next()	$(".first").next();	查找当前元素之后的下一个兄弟
nextAll()	$(".first").nextAll();	查找当前元素之后的所有同辈元素
prev()	$(".last").prev();	查找当前元素之前的上一个兄弟
prevAll()	$("last").prevAll();	查找当前元素之前的所有同辈元素
hasClass(class)	$("div").hasClass("show");	检查当前的元素是否含有某个特定的类，如果有，则返回 true

1.5 排他思想

实现多选一的效果，当前元素设置变化，其余兄弟清除变化

$("button").click(function() {  // 1. 隐式迭代 给所有的按钮都绑定了点击事件
    $(this).css("background", "pink");  // 2. 当前的元素变化背景颜色
    $(this).siblings("button").css("background", ""); // 3. 其余的兄弟去掉背景颜色 隐式迭代
});

1.6 链式编程

链式编程是为了节省代码量，看起来更优雅。

$("button").click(function(){ 
    $(this).css("color", "red").siblings("button").css("color", ""); // 对自己设置颜色为红色,给其他兄弟去掉变化,颜色为空
})

2、jQuery样式操作

2.1 操作CSS方法

1. 参数只写属性名，则是返回属性值

   $(this).css("color"); //返回当前元素的颜色

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

   设置颜色：$(this).css("color", "red");
   设置宽度：$("div").css("width", 300);

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

 $("div").css({
    width: 400,  //如果值不是数字，则需要加引号
    height: 400,  
    backgroundColor: "red"   //如果是复合属性则必须采取驼峰命名法
    })

2.2 设置类样式方法

1. 添加类 addClass()

   $("div").click(function() {
       $(this).addClass("current");   //类名不要加点
   });
   

2. 删除类 removeClass()

   $(this).removeClass("current");

3. 切换类 toggleClass()

   $(this).toggleClass("current"); //当前有current类则移除，当前没有则添加

2.3 类操作与原生js区别

//原生js通过className操作类
var one = document.querySelector(".one");
one.className = "two";   //two覆盖了之前的类名one,此时只有一个one
//jQuery
$(".one").addClass("two");   //这个addClass相当于追加类名,不影响以前的类名,类名为 one,two
$(".one").removeClass("two");  //类名为one

3、jQuery效果

3.1 显示与隐藏

• 显示方法：show()
• 隐藏方法：hide()
• 切换方法：toggle()

三个参数：show([speed,[easing],[fn]])

1. 参数都可以省略， 无动画直接显示
2. speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3. easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
4. fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

$("button").eq(0).click(function() {  //第1个按钮执行操作
    $("div").show(1000, function() {
        alert(1);
    });
})

一般情况下，我们都不加参数直接显示隐藏就可以了

3.3.2 滑动效果

• 下滑动 slideDown()
• 上滑动 slideUp()
• 滑动切换 slideToggle()

也可带三个参数，同显示与隐藏参数相同

3.3.3 事件切换

• hover([over,]out) 就是鼠标经过和离开的复合写法

  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于 mouseenter）
  • 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

$(function() {
    // 鼠标经过方法
    $(".nav>li").mouseover(function() {
        $(this).children("ul").slideDown(200);
    });
    // 鼠标离开方法
    $(".nav>li").mouseout(function() {
       $(this).children("ul").slideUp(200);
    });
    // 事件切换hover就是上述两个方法鼠标经过和离开的复合写法
   $(".nav>li").hover(function() {  //此时hover()里有两个函数，一个鼠标经过，一个鼠标离开
      $(this).children("ul").slideDown(200);
   }, function() {
      $(this).children("ul").slideUp(200);
   });
    // 事件切换hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
    $(".nav>li").hover(function() {  //一般都使用此种写法
        $(this).children("ul").slideToggle();
    });
})

3.3.4 动画队列及其停止排队方法

• 动画或效果队列

  动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

• 停止排队 stop()

  stop() 方法用于停止动画或效果

  注意：stop() 方法写到动画或者效果的前面，相当于停止上一次的动画

3.3.5 淡入淡出效果

• 淡入效果 fadeIn()
• 淡出效果 fadeOut()
• 淡入淡出效果 fadeToggle()
• 修改透明度 fadeTo()

也可带三个参数，同显示与隐藏参数相同，都可省略

注：fadeTo()方法速度和透明度不可省略，例如：fadeTo(1000，0.5)经过1秒，修改透明度为0.5

3.3.6 自定义动画animate

语法：animate(params,[speed],[easing],[fn])

params: 想要更改的样式属性，以对象形式传递，不可省略。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 backgroundColor。其余三个参数同上，都可以省略。

$("button").click(function() {
    $("div").animate({
        width: 500
        left: 500,
        top: 300,
        opacity: .4,  //透明度
        backgroundColor: "pink"
    }, 500);
})