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会同时克隆事件