jQuery 库可以让我们可以对 HTML 的页面元素轻松的进行操作。
1. 操作
1.1 选择网页元素
$(document) // 选择整个文档对象
$('#id') // 选择含有此 id 的网页元素
$('.className') // 选择含有此 类名 的网页元素
$('div').has('p') // 选择含有 p 元素的 div 元素
$('div').first() // 选择 div 的第一个元素
$('div').next('p') // 选择 div 元素后面的第一个 p 元素
$('div').children() // 选择 div 元素的所有子元素
...
1.2 链式操作
$(div).children().addClass('myclass').removeClass('yourClass')
该操作可以分解为：
const x= $(div).children // 找到 div 元素的所有子元素
x.addClass('myclass') // 给 div 元素的所有子元素增加 myClass 类
x.removeClass('yourClass') //给 div 元素的所有子元素移出 yourClass 类
1.3 取值和赋值
$('div').html() // 此处为查看 div 元素下的值
$('div').html('Hello') // 此处为给 div 元素赋值'Hello'
1.4 移动元素
$('div').insertAfter($('p')) // 将 div 元素移动到 P 元素后面
$('p').after($('div')) // 将 p 元素移动到 div 元素的前面
1.5 元素的创建，复制，删除
$('<span>Hello</span>') // 创建 span 元素
$('<div class="myClass"></div>') // 创建 div 元素
const x = $('div').clone() // 复制
$('div').remove() // 删除元素并且不保留
$('div').detach() // 删除元素但保留，可以再次引用
$('div').empty() // 清空元素内容，但是本身会保留
2. 常用 API
.addClass() // 添加 类
.html() // 改变 html 内容
.removeClass() // 移除 类
.css() // 改变样式
.toggleClass() // 添加或者删除 类，存在就删除，不存在就添加
.scrollTop() // 获取元素的当前垂直滚动条位置
.removeDate() // 移除元素的数据
.on() // 绑定事件
.off() // 解绑事件
.mousemove() // 鼠标移动事件
.mousedown() // 鼠标按下事件
.mouseup() // 鼠标弹起事件
...
更多的 API 可以查看 jQuery API 中文文档。
3. 参考
本博客参考jQuery设计思想 和 jQuery API 中文文档。
