jQuery操作标签
标签操作
样式操作
class属性操作
| jQuery语法 | 相当于DOM | 描述 |
|---|---|---|
| addClass() | classList.add() | 添加class属性值 |
| removeClass() | classList.remove() | 移除class属性值 |
| hasClass() | classList.contains() | 查询是否有class属性值 |
| toggleClass() | classList.toggle() | 如果已有属性值，那么删除；如果没有这个属性值，那么添加； |
css操作
jQuery里操作css样式的语法更为简单
标签对象.css(属性,值) // 等价于DOM中：标签对象.style.属性 = 值
如：设置第一个p标签颜色为红色
$('p:first').css('color', 'red')
// 等价于DOM中：document.getElementsByTagName('p')[0].style.color = 'red'
位置操作
| 方法 | 描述 |
|---|---|
| scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
| scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
| position() | 获取匹配元素相对父元素的偏移 |
| offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
常用操作
$(window).scrollTop() // 获取滚动条距离顶端的偏移量
实时监测距离顶部的距离：
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
文本值操作
| jQuery语法 | 描述 | 相当于DOM |
|---|---|---|
| text() | 只获取文本 | innerText |
| html() | 获取文本和标签 | innerHTML |
| val() | 获取标签的value值 | value |
如果括号内不写值，那么就是获取；如果括号内写了值，那么就是设置。
属性操作
| 方法 | 描述 |
|---|---|
| attr(属性名) | 返回第一个匹配元素的属性值 |
| attr(属性名, 属性值) | 为所有匹配元素设置一个属性值 |
| attr({属性1: 值1, 属性2:值2}) | 为所有匹配元素设置多个属性值 |
| removeAttr(属性名) | 从每一个匹配的元素中删除一个属性 |
| prop(属性名) | 动态返回第一个匹配元素的布尔值 |
| prop(属性名,属性值) | 动态为所有匹配元素设置一个属性值 |
attr在对一些动态属性时，不建议使用，比如单选框、复选框，网页选择更改时，attr获取的属性值并不会更改。
所以再对一些动态属性时，可以使用prop动态获取和设置。
文档处理
| 方法 | 描述 |
|---|---|
| $(A).append(B) | 把B追加到A内容的末尾 |
| $(A).prepend(B) | 把B放在A内容的最前面 |
| $(A).after(B) | 让B跟在A后 |
| $(A).before(B) | 把B放到A的前面 |
| $(A).empty() | 清空A的内容 |
| $(A).clone() | 克隆A，参数为true会同时克隆事件 |
