DOM进阶

1.属性操作

属性操作，指的是HTML属性，而不是CSS属性。

1.1获取属性

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

///

1.2设置属性

//设置一个属性
$().attr("属性", "取值")

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

1.3删除属性

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

///

prop()

实际上，对于表单元素的checked、selected、disabled这些属性，我们使用attr()方法是没法获取的，而必须使用prop()方法来获取。我们把attr()替换成prop()就有效果了。

2.样式操作

使用jQuery来操作一个元素的CSS属性

2.1获取属性

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

2.2设置属性

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

2.3设置类名

$().addClass("类名")
配合css样式使用

.select{color:red;background-color:#F1F1F1; }
 $("li:nth-child(odd)").addClass("select");

2.4删除类名

$().removeClass("类名")

2.5“”切换“”类名

$().toggleClass("类名")

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

总结一下：使用jQuery操作元素的样式时，如果样式比较少时，建议使用“属性操作”，也就是css()方法；当样式比较多时，建议使用“类名操作”，也就是addClass()、removeClass()、toggleClass()等方法。
jQuery很多方法都有这样一个特点：没有参数的方法表示“获取”，带有参数的方法表示“设置”

2.6元素的位置

$().offset().top
$().offset().left

offset()方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个⚠️不带单位的数字。
top属性，表示获取元素相当于当前文档（也就是浏览器窗口）“顶部”的距离。
left属性，表示获取元素相当于当前文档（也就是浏览器窗口）“左部”的距离
///

position()
position()方法来获取或设置当前元素相对于“最近被定位的祖先元素”的偏移位置。

2.7滚动条位置

$().scrollTop()        //获取滚动距离
$().scrollTop(n)       //设置滚动距离，n是一个整数，表示n像素

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

3.内容操作

操作一个元素的文本内容、值内容等

3.1html()

获取和设置一个元素中的“html内容”。所谓的html内容，指的是所有的内部元素以及文本。

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

  var result = $("div").html();
   alert(result);
  <div>绿叶学习网<strong>jQuery教程</strong></div>

结果输出：“绿叶学习网<strong>jQuery教程</strong>”

3.2text()

获取和设置一个元素的“文本内容”。
$().text() //获取文本内容
$().text(“文本内容”) //设置文本内容
text()方法跟innerText是一样的，只不过text()是jQuery的实现方式，而innerText是JavaScript的实现方式。
var result = $(“div”).text();
alert(result);

绿叶学习网 jQuery教程

结果输出：“绿叶学习网jQuery教程”

3.3val()

表单元素的值都是通过value属性来定义的。我们不能使用html()和text()这两个方法来获取表单元素的值。
用val()来获取和设置表单元素的值。

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

学习网站：绿叶学习网