jQuery - DOM 操作

jQuery 的相关知识，内容包括简介、jQuery 的特点、获取网页元素、取值和赋值、创建插入和移动元素、复制和删除元素、常用事件。

一、简介

jQuery 是对 DOM 操作的封装。由于 DOM 提供的原生 API 太难用啦，于是许多程序员经过多年摸索，创造了一套操作 DOM 更加便捷的代码，这套代码特别经典，后来命名为 jQuery，流传到现在。

二、jQuery 的特点

jQuery 是一个函数，jQuery() 能够接收不同的参数返回不同的结果，专业的说法这个就叫“重载”。

事实上它返回了一个 jQuery 对象（它是 jQuery 函数创造出来的，暂且这么称呼），对象下有很多方法可以使用，使用方法后还是返回一个对象，依旧有很多方法可是使用，专业的说法这个叫“链式操作”。

此处摘选一下阮一峰老师写的文章《jQuery设计思想》（有删减）

1. 选择网页元素：选择某个网页元素，然后对其进行某种操作
2. 改变结果集：提供各种强大的过滤器，对结果集进行筛选，缩小结果集
3. 链式操作：最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起
4. 元素的取值和赋值：使用同一个函数来完成取值和赋值，即“取值器”与“赋值器”合一
5. 元素的移动：提供两组方法来操作元素在网页中的位置移动
6. 工具方法：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法
7. 事件操作：把事件直接绑定在网页元素上

三、获取网页元素

将一个选择表达式放进构造函数 jQuery()（简写为 $），得到被选中的元素

let $ = jQuery

获取获取元素的常用方法

$(document)  // 获取整个文档
$('#myId')  // 获取 id 为 myId 的元素
$('div.myClass')  // 获取 class 为 myClass 的 div 元素
$('input[name=first]')  // 获取 name 属性为 first 的 input 元素
$('div').first()  // 获取第 1 div 元素
$('div').eq(5)  // 获取第 6 个 div 元素
$('div').index()  // 查询 自己是第几个 div 元素

获取父元素、子元素、同级元素

$('div').parent()  // 获取父元素
$('div').children()  // 获取子元素
$('div').next()  // 获取下一个元素
$('div').siblings()  // 获取同级节点

四、取值和赋值

$('div').attr(<'class','testing'>)  // 取出或设置属性
$('div').text(<'测试'>)  // 取出或设置文本

五、创建、插入和移动元素

$('<p>Hello</p>')  // 创建元素
.insertAfter() 和 .after()  // 插入到同级元素后面
.insertBefore() 和 .before()  // 插入到同级元素前面
.appendTo() 和 .append()  // 插入到子元素后面
.prependTo() 和 .prepend()  // 插入到子元素前面

六、复制和删除元素

.clone()  // 复制元素
.remove()  // 删除元素

七、常用事件

.click()  // 点击事件
.hover()  // 鼠标悬停事件

「@浪里淘沙的小法师」