2021.12.7--jQuery--5.DOM进阶

5.1 属性操作

（1）获取属性

$().attr("属性名")

（2）设置属性

//设置一个属性
$().attr("属性", "取值")
//设置多个属性
$().attr({"属性1": "取值1", "属性2":"取值2", …, "属性n":"取值n"})

（3）删除属性

$().removeAttr("属性名")

（4）prop()方法
jQuery 官方建议：有true 和false 这两种取值的属性，如checked、selected 或disabled 等建议使用prop() 来操作，而其他的属性都建议使用attr() 来操作。
因为：获取，对于表单方法元素的checked、selected、disabled这些属性，我们attr()是无法获取的，而必须使用prop()方法来获取

5.2 样式操作

（1）CSS属性操作
一种是“获取属性”；

$().css("属性名")

另一种是“设置属性”

//设置一个属性
$().css("属性", "取值")
//设置多个属性
$().css({"属性1":"取值1", "属性2":"取值2", ..., "属性n":"取值n"})

（2）CSS类名操作

$().addClass("类名")
$().removeClass("类名")
$().toggleClass("类名")
toggleClass() 方法用于检查元素是否有某个类。如果类不存在，则为元素添加该类；如果类已经存在，则为元素删除该类。

（3）服装造型操作
在 jQuery 中，通常都有自己的款式的操作，以下 3 种。
（1）元素的宽高

$().width()     //获取元素宽度
$().width(n)    //设置元素宽度，n是一个整数，表示n像素
$().height()     //获取元素高度
$().height(n)    //设置元素高度，n是一个整数，表示n像素

（2）元素的位置

获取元素的位置，jQuery 为我们提供了两种方法：
一种是offset()；
$().offset().top
$().offset().left
offset()方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字。
顶部属性，表示获取元素相当于**当前文档**“顶部”的距离。
左属性，表示获取元素相当于**当前文档**“左部”的距离。
另一种是position()
$().position().top
$().position().left
position()方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字。
顶部，表示获取元素最近被**定位祖先元素**“顶部”的距离。
左，表示获取元素最近被**定位祖先元素**“左部”的距离。

（3）滚动条的距离
scrollTop()方法来获取或设置元素相对于滚动条“顶边”的距离，也可以使用scrollLeft()方法来获取或设置元素相对于滚动条“饮食”的距离

5.3 内容操作

对于内容操作，我们有以下3种方法。
（1）html()
所谓的html内容，指的是所有的内部元素以及文本。

$().html()              //获取html内容
$().html("html内容")    //设置html内容

（2）文本（）
text()方法来获取和设置一个元素的**“文本内容”**

$().text()              //获取文本内容
$().text("文本内容")    //设置文本内容

（3）val()
使用val()来获取和设置表单元素的值