目录
前言
开篇语
准备工作
$ 对象
概念
DOM和$转化
加载方法
$ 选择器
基本选择器
$ 隐式迭代
$ 筛选操作
筛选选择器
筛选方法
辅助筛选
$ 链式编程
概念
案例
排他操作
$ 样式操作
css()
单个样式
多个样式
类操作
常见方法
案例
$ 切换样式动画效果
显示、隐藏
滑动
淡入、淡出
内置动画库
停止动画
结束语
前言
开篇语
本系列博客主要分享JavaScript的进阶语法知识，本期为第一期，主要分享的内容为：jQuery对象、选择器、隐式迭代、筛选操作、链式编程、样式操作以及动画效果等相关重点内容。
从进阶部分开始，我们将脱离原生的JS，使用一些包装的第三方库来完成我们的需求。这些JS库需要在文档的开头引入，暂时的引入格式为script标签加src地址。
与基础部分的语法相比，进阶部分的语法会有较大的差别，注意最好不要混用原生方法与第三方库内容，以免出现不必要的麻烦。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap
提示：在不熟练的阶段建议关闭AI助手
第三方JS库：jquery.min.js
提示：请站内搜索下载、引入方式
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
$ 对象
概念
jQuery在JS语法中使用 $ 表示，同时 $ 也是jQuery的顶级对象。
我们知道，DOM获取对象的方式类似下面这样——
document.querySelector("div")
document.querySelectorAll("li")
对应的，jQuery也有自己的获取对象的方式——
$("div")
$("li")
用原生js获取过来的对象就是DOM对象， 用jquery方式获取过来的对象就是jQuery对象。
本质上，jQuery通过$把DOM元素进行了包装。
DOM和$转化
直接用$包装DOM变量或者直接包裹元素，就可以实现向$的转化——
var a = document.querySelector("a")
// 包装变量
$(a)
// 或者包装元素
$('a')
在实现将$对象向DOM的转化之前，我们不妨输出一下上面的$('a')，看一下控制台输出的东西——
可以看到，$对象类似一个伪数组，因此，我们可以使用类似数组索引的方式来获取$中的DOM元素——
$('a')[0]
此外，$还提供了get()方法，参数为“索引值 ”——
$('a').get(0)
加载方法
与DOM操作中的window.onload()类似，如果想要加载$的函数（方法），可以直接用$()包装匿名函数——
$(function () {
\\ 你的函数
})
$ 选择器
基本选择器
与querySelector类似，$也可以使用选择器来调用元素。
常见的$调用的选择器（示例）如下——
| 选择器 | 名称 |
|---|---|
| $('#xxx') | id选择器 |
| $('.xxx') | class类选择器 |
| $('标签名/元素名') | 标签选择器 |
| $('*') | 通配符选择器 |
| $('ol,ul') | 并集选择器 |
| $('li .p') | 交集选择器 |
$ 隐式迭代
对于下面的四个div——
<div>111111</div>
<div>222222</div>
<div>333333</div>
<div>444444</div>
如果需要遍历所有的div，并且将div的底色设置为绿色，可以怎么做？
如果使用原生JS的方法，我们需要在获取一组div之后，利用索引遍历，然后分别设置背景色属性。
var divs = document.querySelectorAll("div")
for (var i = 0; i < divs.length; i++) {
divs[i].style.background = "#0f0"
}
注意，$无法使用style属性， 需要使用其内置的方法css，这个我们后面会讲。
所谓隐式迭代，就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法——
$("div").css("background", "green")
$ 筛选操作
筛选选择器
筛选选择器用于筛选符合某一条件或者具有某种属性的基本选择器。
常见的筛选选择器如下——
| 选择器 | 作用 |
|---|---|
| :first | 选取第一个元素 |
| :last | 选取最后一个元素 |
| :eq(index) | 选取第index个元素，从0开始 |
| :odd | 奇数选择器 |
| :even | 偶数选择器 |
使用方法举例——
$('ul li:first')
同样的，我们也可以使用这种方式选择具有某一属性的选择器。
比如选择设置了checked属性的input元素——
$('ul li:checked')
筛选方法
$常见的筛选元素的方法如下——
| 方法 | 作用 |
|---|---|
| parent() | 选择最近父级 |
| children() | 选择所有直接子代，类似子代选择器 |
| find('xxx') | 选择指定的子代，类似后代选择器 |
| siblings() | 选择所有同级 |
| nextAll() | 选择所有本元素之后的同级 |
| prevAll() | 选择所有本元素之前的同级 |
| eq(index) | 选择指定index处的同级 |
辅助筛选
此外，我们还有两个方法用于辅助我们筛选元素——
| 方法 | 作用 |
|---|---|
| index() | 获取指定元素的index |
| hasClass('xxx') | 筛选判断是否具有xxx类名的同级，返回boolean值 |
$ 链式编程
概念
$ 的方法可以连续调用，所以当我们对同一个$对象操作时，可以使用链式编程操作，把所有的连续操作拼接到一行代码中。
案例
排他操作
我们可以使用链式编程，来很方便地完成排他操作。
比如，对于下面的一组按钮——
<button>点我变红</button>
<button>点我变红</button>
<button>点我变红</button>
<button>点我变红</button>
<button>点我变红</button>
<button>点我变红</button>想要实现点击的按钮变红，而其他的按钮不变红的操作，需要完成排他操作：
- 先为自己加样式
- 清除兄弟元素样式
使用$的链式编程将会非常简洁——
$(function () {
$("button").click(function () {
$(this).css("background", "#f00").siblings().css("background", "")
})
})$ 样式操作
css()
单个样式
$ 的.css()方法可以用于设置元素的样式。
该方法只有一个参数的时候是获取属性值。比如获取div元素的背景色属性——
$('div').css("background")
写两个的时候是设置属性值，第一个参数为属性名，第二个参数为属性值。
比如将div元素的背景色设置为红色——
$('div').css("background", "red")
多个样式
.css()也支持同时设置多个CSS样式，需要使用 { } ，使用添加一个对象的方法设置属性。
比如将div元素的宽和高同时设置——
$('div').css({
width: '100px',
height: '100px'
})
注意，值需要写为字符串类型。
类操作
常见方法
如果样式比较多，这个时候最好让样式和行为分离，即CSS处理样式，JS负责行为。
虽然使用css()可以设置大量的属性，但是使用类操作来直接更改类名会更加符合上述的要求。
常见的类操作方法如下——
| 方法 | 作用 |
|---|---|
| addClass('abc') | 在原类名后添加类名 |
| removeClass('abc') | 从原来的一组类名中移除指定类名 |
| toggleClass('abc') | 在添加该类名和移除该类名之间切换 |
原生JS的设置className的方式是直接覆盖所有原来的类名，而$的操作是不会影响其他类名的。
案例
Q：实现tab栏切换至标签对应的分区。
示例效果如下——
A：分析案例——
首先，按照惯例给出无关紧要的HTML代码和CSS样式。
参考HTML代码如下——
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>参考CSS样式如下——
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}其中current为标签tab栏激活样式。
来到关键的JS部分，我们需要对tab栏的标签绑定点击事件，并进行两次链式操作——
- 为当前标签设置current类名，然后移除其他标签的current类名
- 显示当前激活标签对应的内容区域（利用索引），隐藏其他内容区域
实现的jQuery代码如下——
$("ul li").click(function () {
$(this).addClass("current").siblings().removeClass("current")
$(".tab_con>div").eq($(this).index()).css("display", "block").siblings().css("display", "none")
})$ 切换样式动画效果
显示、隐藏
除了使用修改css样式来决定元素是否隐藏，$还提供了下面三种相关的方法——
| 方法 | 作用 |
|---|---|
| show() | 显示元素 |
| hide() | 隐藏元素 |
| toggle() | 切换元素的显示与隐藏状态 |
这三种方法的参数都是一样的，具有一定的动画效果。
不填参数时，上述过程立刻执行完成。
填写数字，效果为在一定时间内执行上述操作，单位为毫秒。
填写数字和动画形式，效果为在一定时间内按照某种动画效果执行上述操作。
比如，常见的动画形式有swing（变速）和linear（线性匀速）。
滑动
此前，我们实现了下拉菜单栏的效果，$内置了下拉滑动和向上回弹的方法。
相关的方法如下——
| 方法 | 作用 |
|---|---|
| slideDown() | 向下滑入 |
| slideUp() | 向上滑出 |
| slideToggle() | 切换滑入滑出状态 |
参数同显示隐藏。
淡入、淡出
所谓淡入淡出效果，就是缓慢显色和缓慢褪色的效果。
相关的方法如下——
| 方法 | 作用 |
|---|---|
| fadeIn() | 淡入 |
| fadeOut() | 淡出 |
| fadeToggle() | 切换淡入淡出效果 |
参数同显示隐藏。
内置动画库
使用的第三方动画库为move.js，感兴趣的可以自行搜索。
使用内置动画的方法为animate()，调用格式为——
animate({修改的样式}, 时间, 动画效果, 回调函数)
内置动画库涉及其他的第三方库，这里就不作为重点扩展了。
停止动画
停止动画的两种方法为——
| 方法 | 作用 |
|---|---|
| stop() | 依据条件，停止动画 |
| finish() | 立刻完成所有动画 |
stop()方法可以按照链式编程操作添加到当前动画方法之前。
无参数时，停止当前动画，如果有其它动画开始执行。
有一个参数true，停止所有动画。
有两个参数均为true，立即执行完当前动画 停止其它所有动画。
结束语
本期内容到此结束。关于本系列的其他博客，可以查看我的JS进阶专栏。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——临期的【H2O2】
