jQuery选择器

1. jQuery 基础选择器

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

$(“选择器”)   //  里面选择器直接写 CSS 选择器即可，但是要加引号   

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所以元素
类选择器	$(".class")	获取同一类class的元素
并集选择器	$("div,p,li")	选取多个元素
标签选择器	$("div")	获取同一类标签的所有元素
交集选择器	$("li.current")	交集元素

2. jQuery层级选择器

名称	用法	描述
子代选择器	$("ul>li")	使用>号,获取亲儿子层级的元素;注意,并不是获取孙子层级的元素
后代选择器	$("ul li")	使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

知识铺垫

jQuery设置样式

$("div").css("属性","值")

3. 隐式迭代(重要)

遍历内部的DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

4. jQuery筛选选择器

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

5. jQuery筛选方法（重点）

语法	用法	说明
parent()	$("li").parent()	查找父级
children(selector)	$("ul").children("li")	相当于$("ul>li")，最近一级（亲儿子）
find(selector)	$("ul").find("li")	相当于$("ul li")，后代选择器
siblings(selector)	$(".first"),sibings("li")	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first"),nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$("li").eq(2)	相当于$("li:eq(2)"),index 从0开始

6. jQuery里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css("color","red");
$(this).siblings().css("color","");

7. 链式编程

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

$(this).css("color","red").siblings().css("color","");

使用链式编程一定注意是哪个对象执行样式。