共计 5401 个字符，预计需要花费 14 分钟才能阅读完成。
目录
前言
开篇语
准备工作
$ 属性操作
常见方法
案例
$ 尺寸
$ 距离
$ 事件
原生 JS 注册事件
$ 注册事件
简单注册事件
多事件注册
$ 事件解绑
$ 节点
创建节点
方法
案例
清空节点
添加节点
结束语
前言
开篇语
本系列博客主要分享 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 版本
$ 属性操作
常见方法
有时，我们需要对 DOM 元素的属性进行获取、修改或移除，$ 为我们提供了下面的一系列方法来对元素 的属性进行相关的操作——
| 方法 | 作用 |
|---|---|
| attr(‘xxx’) | 获取 DOM 元素的指定属性（不包含值为 boolean 值的属性） |
| prop(‘yyy’) | 获取 DOM 元素的值为 boolean 值的属性 |
| attr(‘xxx’, ‘value’) | 为 DOM 元素的指定属性设置属性值（不包含值为 boolean 值的属性） |
| prop(‘yyy’, ‘value’) | 为 DOM 元素的值为 boolean 值的属性设置值 |
| removeAttr(‘xxx’) | 为 DOM 元素移除指定属性（所有属性） |
案例
现在，我们有这样一个表格，需求是实现选择框的 全选与反选 功能——
参考的 HTML 代码为——
游戏名称
所属平台
CS2
Steam
Apex
Steam
地平线五
Steam
PUBG
Steam
参考的 CSS 样式如下——
* {
padding: 0;
margin: 0;
text-align: center;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {font: 14px "微软雅黑";}
.td-ipt {
display: flex;
justify-content: space-between;
}
label {cursor: pointer;}
tbody tr {background-color: #f0f0f0;}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
input {cursor: pointer;}来到最关键的 JS 代码，使用 jQuery 实现，实现的流程如下：
- 获取全选按钮的 checked 值，并赋值给各个“入库”按钮
- 获取所有 checked 为 true 的“入库”按钮，只有其数量等于所有“入库”按钮的总数量，全选按钮才被选中，否则就是不选中状态
对于第一步，实现代码比较简单，只需要用到 prop 即可——
$('#j_cbAll').on({'click': function () {$('#j_tb input').prop('checked', $(this).prop('checked'))
}
})对于第二步，我们可以使用:checked 筛选所有设置了 checked 状态的按钮，得到的是一个数组，那么，我们就可以使用 length 属性获取按钮的数量。
同理，我们也可以获取所有“入库”按钮的数量。
最后，我们可以判断上面的这两个数量是否相同，如果不同将得到 false 值，相同则得到 true 值，只需要让全选按钮的状态等于该值即可。
实现的代码如下——
$('#j_tb input').on({'click': function () {var checkedLen = $('#j_tb input').length
var len = $('#j_tb input').length
$('#j_cbAll').prop('checked', checkedLen == len)
}
})$ 尺寸
获取 $ 对象元素的尺寸的方法有下面这些——
| 方法 | 尺寸范围 |
|---|---|
| width() | 只包含 CSS 中的 width |
| height() | 只包含 CSS 中的 height |
|
outerWidth() |
内容+内边距+边框，不含外边距 |
| outerHeight() | 内容+内边距+边框，不含外边距 |
|
outerWidth(true) |
内容+内边距+边框+外边距 |
|
outerHeight(true) |
内容+内边距+边框+外边距 |
注意，border-box 和 content-box 的 width()和 outerWidth()存在不同。高同理。
$ 距离
获取 $ 对象的距离有关的常见方法有下面两种——
| 方法 | 作用 | 值 |
|---|---|---|
| offset() | 返回到 document 的距离，即窗口边缘的距离 | (top,left) |
| position() |
返回到有定位的、最近的父元素的距离 |
(top,left) |
此外，还有一组和滚动条移动效果有关的方法——
| 方法 | 作用 |
|---|---|
|
scrollTop() |
不设置参数，获取垂直方向滚动的距离； 设置数值参数，设置垂直方向滚动的距离 |
| scrollLeft() |
不设置参数，获取水平方向滚动的距离； 设置数值参数，设置水平方向滚动的距离 |
$ 事件
原生 JS 注册事件
我们知道，事件的三要素是事件源、事件类型和事件执行程序。
对于原生 JS 而言，一个常规的鼠标单击事件可以是下面这样的——
var btn = document.querySelector(‘button’)
btn.onclick = function () {
console.log(1)
}
或者，我们也可以使用添加事件侦听器来完成事件绑定——
var btn = document.querySelector(‘button’)
btn.addEventListener(‘click’, function () {
console.log(1)
})
其中，第一种方式为 简单注册事件 ，它只能单独创建事件，比较单一、独立。它的缺点也是很明显的—— 不能同时注册事件。
第二种方式相对来说就灵活多了，可以 绑定多个事件 ，支持 同时动态绑定事件 ，也可以很方便地进行 事件解绑操作 。此外，该方式还可以获取我们的 事件对象。
$ 注册事件
jQuery 也有自己对应的简单注册事件和多事件注册方式。它们的特点以及优缺点和原生 JS 是相对应的，不再重复叙述。
简单注册事件
jQuery 提供的简单事件注册的方式如下：
$(‘ 元素 ’). 事件类型(function () {// 事件处理程序})
比如，注册上面的鼠标单击事件，就可以这么做——
$(‘button’).click(function () {
console.log(1)
})
多事件注册
多事件注册有下面两种方法——
| 方法 | 示例格式 |
|---|---|
| bind() |
1. 事件类型 - 执行程序 $().bind(“click mouseover”,function(){}) 2. 对象 $().bind({click:function(){},mouseover:function(){}}) |
| on() |
1. 事件类型 - 执行子代 - 执行程序 $().on(‘click’, ‘div,span’, function () {}) 2. 对象 - 执行子代 $().on({click: function () {},mouseover: function () {}}, ‘div,span’) |
在 on()方法中，也可以使用事件对象，比如当前节点，也可以使用 e.target 等事件对象的属性。
$ 事件解绑
对于简单注册事件，我们可以利用 return false 的方式解绑。
对于 on 注册事件，我们可以利用 off(‘事件类型‘) 的方式解绑。
$ 节点
创建节点
方法
创建节点通常直接使用下面两种方式解析字符串——
| 方法 | 特点 |
|---|---|
| html() |
参数为字符串，可以解析参数的 html 标签，转化为节点 不填参数为获取 |
| text() |
参数为字符串，无法解析 html 标签 不填参数为获取 |
特别的，对于获取节点的值，当节点为 input 时，可以使用 val() 获取 value 值。
比如，我们需要在 ul 中创建一个 li 元素，可以这么做——
$(ul).html(‘
内容 ‘)
案例
我们可以利用 html()的特点，动态创建节点。
示例的表格生成前后的效果如下——
按照惯例，首先给出参考的 HTML 代码和 CSS 样式。
参考 HTML 代码如下——
游戏名称
游戏类型
登录平台
参考 CSS 样式如下——
* {
padding: 0;
margin: 0;
}
table {
width: 300px;
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {font: 14px "微软雅黑";}
tbody tr {background-color: #f0f0f0;}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
input {cursor: pointer;}提供的 JS 数据列表如下——
var data = [
{
name: 'CS2',
type: 'FPS',
plat: 'Steam'
}, {
name: 'CF',
type: 'FPS',
plat: 'WeGame'
},
{
name: 'DOTA2',
type: 'MOBA',
plat: 'Perfect World'
}
]来到最关键的 JS 代码实现，一般来说有字符串拼接型传参和数组传参，它们的区别是后者的拼接效率更高。
为按钮绑定点击事件，然后来到事件处理程序，我们需要拼接的目标字符串为如下的格式——
表格项 1
表格项 2
表格项 3
所以，我们可以直接使用模版字符串按上述格式拼接，中间的 td 项使用循环遍历数据数组中的对象。
或者，我们可以使用一个数组，上面格式中的数据，每一行的代码存为一个数组项，最后再将数组转为字符串。
由于 push()只是在原数组操作，而字符串拼接总是在创建新字符串，所以数组的效率会更高。
字符串方式添加数据代码——
var str = ""
for (var item of data) {str += ``
for (var key in item) {str += `${item[key]} `
}
str += ` `
}
console.log(str);
$("#j_tbData").html(str)数组方式添加数据代码——
var newArr = []
for (var item of data) {newArr.push("")
for (var key in item) {newArr.push(`${item[key]} `)
}
newArr.push(" ")
}
$("#j_tbData").html(newArr.join(""))清空节点
如果我们需要清空某个节点中的数据，$ 为我们提供了三种方式——
| 方法 | 特点 |
|---|---|
| html(”) | 清空但保留节点 |
| empty() | 清空但保留节点 |
| remove() | 连带当前节点一起删除 |
注意，remove()会把本级节点一并删除，所以如果只是要清空节点内的数据，不要使用该方式。
但是，我们可以使用添加删除按钮，利用子节点调用父节点（parent()）的方式，向上删除到目标层级，这样是比较安全的。
添加节点
在创建完节点之后，我们除了直接为父节点用 html()添加内容，也可以按照插入位置的不同使用下面几种方式添加节点——
| 方法 | 作用 |
|---|---|
| append() | 向自身子级的末尾添加 |
| prepend() | 向自身子级的开头添加 |
| after() | 往自身的后面添加 |
| before() | 往自身的前面添加 |
| appendTo() | 添加到父级的末尾 |
其中，参数可以是 DOM 元素，也可以是 $ 对象，DOM 元素会隐式转换为 $ 对象。
但是，调用者必须使用 $ 对象，比如 appendTo()，如果直接用创建的字符串调用，则它是没有这个方法的，因此用 $ 包装更好。
结束语
本期内容到此结束。关于本系列的其他博客，可以查看我的 JS 进阶专栏。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
== 期待与你在下一期博客中再次相遇 ==
——临期的【H2O2】
原文地址: 【H2O2| 全栈】JS 进阶知识（二）jQuery（2）
