目录
一、jQuery选择器
原生JS获取元素的方式有很多，很杂，而且兼容性情况不一，因此jQuery给我们做了封装，使获取元素统一标准。
1.1 jQuery的基础选择器
语法格式
s$("选择器") //里面直接写上CSS选择器即可，但是要加引号
分类jQuery中的选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定的ID元素 |
| 全选选择器 | $("*") | 匹配所有的元素 |
| 类选择器 | $(".class") | 获取同一类class元素 |
| 标签选择器 | $("div") | 获取同一类标签所有元素 |
| 并集选择器 | $("div,p,li") | 选取多个元素 |
| 交集选择器 | $('li.current') | 交集元素 |
-
举例类选择器
<div class="nav">我是类名nav div</div>
<script>
//写个入口函数
$(function () {
//举例获取类选择器
console.log($(".nav"));
})
</script>1.2 jQuery的层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $("ul>li") | 使用>号，获取亲儿子层级的元素，注意：并不会获取孙子层级的元素 |
| 后代选择器 | $("ul li") | 使用空格，代表后代选择器，获取到ul中的全部li元素，包括孙子等 |
-
举例后代选择器
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
$(function () {
console.log($("ul li")) //获取到ul中全部的li
})
</script>二、jQuery隐式迭代
2.1需求： 通过jQuery给div一次性添加颜色
需求：给每个div都添加上背景颜色
在原生中，获取到全部的DOM，然后去做数组的循环，再依次添加 背景颜色
但是在jq中，有一个 隐式迭代
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<script>
//1.获取四个div元素
$("div")
//2.给四个div设置背景颜色为粉色
$("div").css('background', 'pink')
</script>在这行代码中，通过$("div")获取到了全部的div，然后通过.css（）去修改属性，效果是让四个div的背景色都是粉色
那么，为什么在jQuery中只需要一行代码就可以做到，在原生中就需要使用到for循环
那么，这个就是 隐式迭代（重点）
2.2 jQuery的隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做 隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，同时执行相应的方法，而不用我们再去做循环，简化我们的操作，方便我们的调用
换个例子：比如 ul 中有多个 li，我们用 后代选择器 $(ul li) 然后添加样式
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
//隐式迭代就是把匹配到的所有元素内部进行循环遍历，给每一个元素添加css这个方法
//当然，只有在把全部的元素改同一个样式的时候才会如此操作
//把ul中的li全改为红色
$("ul li").css('color', 'red')
</script>效果是：没有循环，就把ul中所有后代li都设为了红色字体
因为隐式迭代会偷偷的做一个内部的循环，去帮做我们遍历添加样式
三、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元素中索引号为偶数的元素 |
举例使用：
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
//入口函数
$(function () {
//1.把ul的第一个li改为红色，使用 :firsts
$("ul li:first").css('color', 'red')
//2.把ul的最后一个li改为粉色，使用 :last
$("ul li:last").css('color', 'pink')
//3.选中ul中的第三个小li(index从0开始)
$("ul li:eq(2)").css('color', 'blue')
//4.把ol中所有的奇数li改为粉色
$("ol li:odd").css('color', 'pink')
//5.把ol中所有的偶数li改为红色
$("ol li:even").css('color', 'red')
})
</script>四、jQuery筛选方法（重点）
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(".son").parent() | 查找当前元素的父级（上级）如果是 $('div').parent().parent() 就是找到它的爷爷 |
| children("查找的子元素") | $(".nav").children("p") | 只查找元素中的亲儿子（这里查找的是.nav中的亲儿子p） |
| find("查找的后代元素") | $(".nav").find("p") | 类似于后代选择器，把当前元素所有同标签/同类名的后代元素全部选中 |
举例：从子级去查询到父级、爷爷级
<div class="yeye">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
$(function () {
// 1.父级 parent()
console.log($(".son").parent()) //这是获取到son的父级father
//如果连续套用parent()方法，能不能找到爷爷元素
console.log($(".son").parent().parent()) //可以得到爷爷元素
)}三个div嵌套嘛，最里面那个是孙子，第二个是孙子son它爹father，第三个是son的爷爷
获取到父级，直接： .parent(),如果再上一级，就再来一个parent()
举例：从父级去查询子级
<div class="nav">
<p>我是大屁</p>
<div>
<p>我是小屁</p>
</div>
</div>
<script>
$(function () {
// 1、通过父级去查找到子级
//把我是大屁给选出来（nav p)
//(1) 亲儿子 children()
$(".nav").children("p").css('color', 'red')
//(2) 可以选中父级中的所有孩子 包括儿子和孙子
//找出nav盒子中所有的p标签
$(".nav").find("p").css('color', 'pink')
// 3.兄弟
})
</script>五、jQuery的其他筛选方法
5.1 eq(index) 方法推荐
eq是一个方法，不是一个选择器
$("ul li").eq(2) //选中ul中的第三个li（index从0开始）就是说，用上 eq(index)，可以在使用后代选择器的时候，去指定获取到哪个子级元素
这里获取到的就是ul中的第三个li，index从0开始
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function () {
//获取到第三个li
$('ul li').eq(2)
//添加样式
$('ul li').eq(2).css('color', 'pink')
})
</script>因为我们独立的获取到了指定的li，所以给当前li添加样式，并不会出现隐式迭代的效果，只有当前选中的第三个li被添加了css样式
5.2 siblings(selector) 推荐
作用：获取到兄弟节点，不包括自己本身
用处：可以配合排他思想使用
举例：给当前li以外的全部li修改字体颜色
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function () {
//获取到第三个li,使用siblings，修改第三个li其他兄弟的样式
$('ul li').eq(2).siblings().css('color', 'red')
})
</script>
六、jQuery排他思想
想要做出 多选一 的效果，可以使用 排他思想
排他思想：当前元素设置样式，其余的兄弟元素清除样式
如果使用排他思想，可以用到 siblings(查找的元素) 选中除了 自己以外的全部兄弟
举个栗子：有多个按钮，点击哪个按钮，哪个按钮就高亮，其他按钮就不亮
这个用到排他思想，也就是：点击到了这个按钮，其他按钮（当前按钮的兄弟siblings() ）就清空样式），这个按钮就添加样式，
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function () {
//1.获取到所有的button按钮，然后绑定一个click的点击事件
$("button").click(function () {
//jQuery中有一个隐式迭代，这句代码已经给所有按钮绑定了点击事件
//2.给当前的元素变换背景颜色（添加样式）
$(this).css("background", "pink")
//3.其余的兄弟去掉背景颜色
// 让当前元素的兄弟元素的背景色设置为空
$(this).siblings("button").css("background", "")
})
})
</script>七、jQuery的链式编程
基于前面排他思想的举例，$(this)这句话就出现了两次
$("button").click(function () {
//让当前元素变色
$(this).css("color", "red")
//让其余的同级元素不变色(把其余同级元素的字体色清空)
$(this).siblings().css("color", "")
})在这里，this出现了两次，代码出现了重复，所以，我们优化引出了 链式编程
7.1 链式编程
链式编程是jQuery中一个强大的功能，是为了可以节省代码量，看起来更优雅
比如上述的JS中，当前元素的js变色和兄弟元素清空，就出现了两次，我们可以进行优化为一句
//链式编程，节省了代码量
$(this).css("color", "red").siblings().css("color", "")这句代码和上面的代码效果是相同的
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
