目录
前言
开篇语
准备工作
$ 属性操作
常见方法
案例
$ 尺寸
$ 距离
$ 事件
原生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代码为——
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" /><label for="j_cbAll">一键入库</label>
</th>
<th>游戏名称</th>
<th>所属平台</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<label for="cb1">
<div class="td-ipt">
<input type="checkbox" id="cb1" />
入 库
</div>
</label>
</td>
<td>CS2</td>
<td>Steam</td>
</tr>
<tr>
<td>
<label for="cb2">
<div class="td-ipt">
<input type="checkbox" id="cb2" />
入 库
</div>
</label>
</td>
<td>Apex</td>
<td>Steam</td>
</tr>
<tr>
<td>
<label for="cb3">
<div class="td-ipt">
<input type="checkbox" id="cb3" />
入 库
</div>
</label>
</td>
<td>地平线五</td>
<td>Steam</td>
</tr>
<tr>
<td>
<label for="cb4">
<div class="td-ipt">
<input type="checkbox" id="cb4" />
入 库
</div>
</label>
</td>
<td>PUBG</td>
<td>Steam</td>
</tr>
</tbody>
</table>
</div>参考的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('<li>内容</li>')
案例
我们可以利用html()的特点，动态创建节点。
示例的表格生成前后的效果如下——
按照惯例，首先给出参考的HTML代码和CSS样式。
参考HTML代码如下——
<input type="button" value="获取数据" id="j_btnGetData" />
<table>
<thead>
<tr>
<th>游戏名称</th>
<th>游戏类型</th>
<th>登录平台</th>
</tr>
</thead>
<tbody id="j_tbData"></tbody>
</table>参考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代码实现，一般来说有字符串拼接型传参和数组传参，它们的区别是后者的拼接效率更高。
为按钮绑定点击事件，然后来到事件处理程序，我们需要拼接的目标字符串为如下的格式——
<tr>
<td>表格项1</td>
<td>表格项2</td>
<td>表格项3</td>
<tr/>
所以，我们可以直接使用模版字符串按上述格式拼接，中间的td项使用循环遍历数据数组中的对象。
或者，我们可以使用一个数组，上面格式中的数据，每一行的代码存为一个数组项，最后再将数组转为字符串。
由于push()只是在原数组操作，而字符串拼接总是在创建新字符串，所以数组的效率会更高。
字符串方式添加数据代码——
var str = ""
for (var item of data) {
str += `<tr>`
for (var key in item) {
str += `<td>${item[key]}</td>`
}
str += `</tr>`
}
console.log(str);
$("#j_tbData").html(str)数组方式添加数据代码——
var newArr = []
for (var item of data) {
newArr.push("<tr>")
for (var key in item) {
newArr.push(`<td>${item[key]}</td>`)
}
newArr.push("</tr>")
}
$("#j_tbData").html(newArr.join(""))清空节点
如果我们需要清空某个节点中的数据，$为我们提供了三种方式——
| 方法 | 特点 |
|---|---|
| html('') | 清空但保留节点 |
| empty() | 清空但保留节点 |
| remove() | 连带当前节点一起删除 |
注意，remove()会把本级节点一并删除，所以如果只是要清空节点内的数据，不要使用该方式。
但是，我们可以使用添加删除按钮，利用子节点调用父节点（parent()）的方式，向上删除到目标层级，这样是比较安全的。
添加节点
在创建完节点之后，我们除了直接为父节点用html()添加内容，也可以按照插入位置的不同使用下面几种方式添加节点——
| 方法 | 作用 |
|---|---|
| append() | 向自身子级的末尾添加 |
| prepend() | 向自身子级的开头添加 |
| after() | 往自身的后面添加 |
| before() | 往自身的前面添加 |
| appendTo() | 添加到父级的末尾 |
其中，参数可以是DOM元素，也可以是$对象，DOM元素会隐式转换为$对象。
但是，调用者必须使用$对象，比如appendTo()，如果直接用创建的字符串调用，则它是没有这个方法的，因此用$包装更好。
结束语
本期内容到此结束。关于本系列的其他博客，可以查看我的JS进阶专栏。
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——临期的【H2O2】
