共计 4750 个字符，预计需要花费 12 分钟才能阅读完成。
目录
前言
开篇语
准备工作
$ 对象
概念
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——
111111222222333333444444
如果需要遍历所有的 div，并且将 div 的底色设置为绿色，可以怎么做？
如果使用原生 JS 的方法，我们需要在获取一组 div 之后，利用索引遍历，然后分别设置背景色属性。
var divs = document.querySelectorAll(“div”)
for (var i = 0; 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 值 |
$ 链式编程
概念
$ 的方法可以连续调用，所以当我们对 同一个 $ 对象 操作时，可以使用链式编程操作，把所有的 连续操作 拼接到一行代码中。
案例
排他操作
我们可以使用链式编程，来很方便地完成 排他操作。
比如，对于下面的一组按钮——
想要实现点击的按钮变红，而其他的按钮不变红的操作，需要完成排他操作：
- 先为自己加样式
- 清除兄弟元素样式
使用 $ 的链式编程将会非常简洁——
$(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 代码如下——
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价（50000）
- 手机社区
商品介绍模块内容
规格与包装模块内容
售后保障模块内容
商品评价（50000）模块内容
手机社区模块内容
参考 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】
原文地址: 【H2O2| 全栈】JS 进阶知识（一）jQuery（1）
