jQuery常用API之jQuery选择器

3.jQuery常用API

3.1 jQuery选择器

3.1.1 jQuery基础选择器

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

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

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

3.1.2 jQuery层级选择器

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

3.1.3 jQuery之隐式迭代（重要）

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

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

//隐式迭代就是把匹配到的所有元素内部进行遍历，给每一个元素添加css这个方法

$(“div”).css(“background”,”pink”);// 同时给四个div设置背景颜色为粉色

3.1.4 jQuery筛选选择器

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

3.1.5 jQuery筛选方法（重点）

名称	用法	描述
parent()	$(“li”).parent();	查找li的父级元素
children(selector)	$(“ul”).children(“li”);	相当于$(“ul>li”)最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”) ul下的所有li元素
siblings(selector)	$(“.first”).siblings(“li”);	选择兄弟结点，不包括自身
nextAll([expr])	$(“.first”).nextAll();	查找当前元素之后的所有同级元素
prevtAll([expr])	$(“.first”).prevtAll();	查找当前元素之前的所有同级元素
hasClass(class)	$(“div”).hasClass(“protected”);	检查当前的元素是否某个特定的类有则返回true 没有则返回false
eq(index)	$(“li”).eq(2);	获取元素中 选择索引号为2的元素

重点记住：parent()、children()、find()、siblings()、eq()

3.1.6 jQuery里面的排他思想

排他思想：多选一的效果，即当前元素设置样式，其他的同级元素清除样式

$(function(){

//1.隐式迭代 给所有的按钮都绑定了点击事件

$(“button”).click(function(){

//2.给当前的元素改变背景颜色

$(this).css(“background”,”pink”);

//3.其他兄弟元素不变

　　　　$(this).siblings(“button”).css(“background”,””);

　　});

});

3.1.7 jQuery里面的链式编程

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

以下使用链式编程优化上面的排他思想的例子：

$(function(){

//1.隐式迭代 给所有的按钮都绑定了点击事件

$(“button”).click(function(){

//2.使用链式编程给当前的元素改变背景颜色，其他兄弟元素不变

$(this).css(“background”,”pink”). siblings(“button”).css(“background”,””);

　　});

});

注意：使用链式编程时，一定要注意是哪个对象需要执行样式