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”,””);
});
});
注意：使用链式编程时，一定要注意是哪个对象需要执行样式
