JQuery选择器及其样式操作、筛选方法以及链式编程
我们今天了解一下jQuery的选择器，使我们快速入手jQuery，进行操作
我们的jQuery选择器、样式操作、筛选方法与CSS选择器及其的类似，操作非常的方便
链式编程也是非常的简便高效
目录
一.jQuery选择器
二.jQuery筛选方法
三.jQuery的样式操作
四.设置类样式方法
五.链式编程
一.jQuery选择器
：first =>$("ul li:first") 获取ul里面的第一个li元素
：last =>$("ul li:last") 获取ul里面的最后一个li元素
：eq(index) =>$("ul li:eq(2)") 获取ul里面的所有li元素中索引号为2的元素
：odd =>$("ul li:odd") 获取ul里面的所有li元素中索引号为奇数的元素
：even =>$("ul li:even") 获取ul里面的所有li元素中索引号为偶数的元素
我们这里使用索引号选择器eq来做一个案例演示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jQuery-min.js"></script>
</head>
<style>*{margin: 0;padding: 0;}
</style>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
</body>
<script>$(function(){$("ul li:eq(2)").css('color','red');})
</script>
</html> 
二.jQuery筛选方法
parent() => $("li").parent() 查找亲爸爸
children() => $("ul").children("li") 查找亲儿子
【相当于CSS子代选择器，选择出离父级最近的一级子元素】
find() => $("ul").find("li") 查找儿子
【相当于后代选择器，选择所有的儿子】
siblings() => $(".first").siblings() 查找所有的兄弟元素（同一级元素）
【不包括自己】
nextAll() => $(".first").nextAll() 查找出当前元素之后的所有同辈元素
prevAll() => $(".last").prevAll() 查找当前元素之前的元素
hasClass() => $("div").hasClass("protected") 查找当前元素是否有某个特定的类
【如果有，返回true】
eq(index) => $("li").eq(2); 【相当于$（"li:eq(2)"）】
三.jQuery的样式操作
操作CSS方法：
1,参数只写属性名，则返回属性值
$("div").css("backgroundColor");
//返回值为backgroundColor对应的颜色2.参数是属性名与属性值，逗号分隔，设置一组样式属性名必须加上引号，如果值为数字，可以不加引号和单位
$("div").css("backgroundColor","red");3.参数可以是对象的形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
$("div").css({backgroundColor:#5e5e5e,width:10rem
})还是老话，这里要注意复合属性一定要使用驼峰命名法
四.设置类样式方法
设置类样式方法呢，作用是等同于原生JS中的classList，可以操作类样式
注意：操作类里面的参数不要加点
1.添加类 $("div").addClass("current");
2.移除类 $("div").removeClass("current");
3.切换类 $("div").toggleClass("current");
这里是操作类，那我们也要用我们学到的来做一个小例子，点击按钮，让盒子改变当前颜色：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jQuery-min.js"></script>
</head>
<style>*{margin: 0;padding: 0;}div{width: 200px;height: 200px;background-color: #000;}.current{/*自定义一个类*/background-color: #7fffd4;}
</style>
<body><button>点我试试，我给你点颜色看看</button><div></div>
</body>
<script>$(function(){$("button").click(function(){//点击按钮触发事件$("div").toggleClass("current");//触发class类事件，将上面的css类名给到div，达到改变颜色的目的})})
</script>
</html>这样当我点击按钮时，盒子变为绿颜色：
当我们再点击一次的时候，盒子再次变为黑子：
这是我们切换类的用处，是不是非常的便捷呀
接下来我们来学习一个jQuery中非常重要的，非常便捷的一个功能：
五.链式编程
我们直接来看一段代码，我进行相应的解读，我们也就能明白链式编程是什么了：
$("div").eq(2).show.siblings().hide();
//怎么理解呢？
//就是先获取div元素,让索引号为2的那个div显示出来，当前的这个盒子的所有兄弟元素都隐藏
怎么样，可以理解吗？就是相当于将俩句话合并在一起
举个例子：甲说：一起出去玩吗？
乙在回答：我打算明天中午再去玩
乙回答：今天不去玩了
合并回答：乙：我打算明天中午去玩
就是这么一个意思，将前面的调用节省掉了，这样说话是不是超酷呀
小tips:原生JS中className会覆盖掉元素原先里面的类名，jQuery里面的类操作只是对指定的类名进行操作，不影响原来的类名
学习前端，关注小窝