使用jquery操作DOM

1.DOM操作

在JQuery中，DOM操作是一个非常重要的组成部分。

JQuery中提供的操作DOM的方法，不仅简化了传统的繁冗代码，更加解决了跨平台的浏览器兼容性,

还让页面元素真正动起来,动态地增减删改数据,令用户与计算机交互更加便捷,交互形象更加多样.

2.DOM分类

JavaScript操作DOM时分为三类:

DOM Core    HTML-DOM    CSS-DOM

3.jQuery中的DOM操作

在jQuery中的DOM操作主要分为样式操作、文本和value属性值操作、节点操作、

节点操作中又包含了属性操作、节点遍历、CSS-DOM操作

 
4.样式操作

在JQuery中，对元素的样式操作主要有直接设置样式值、获取样式值、追加样式、移除样式和切换样式。

 

4.1 设置和获取样式

在JQuery中，使用 CSS() 方法为指定的元素设置样式值

>>$("h1").css("background","red");  //设置单个属性

>>$("h1").css({"background":"red","height":"250px","width":"250px"});  //设置多个属性

>>$("h1").css("background");  //获取属性

4.2 追加和移除样式

使用addClass（）方法仅是追加样式。

>>$("selector").addClass("类名");

也追加多个样式，中间用空格隔开

>>$("selector").addClass(" 类名2 类名3");

4.3 切换样式

之前学习的 toggle() 方法可以切换元素的可见状态，

使用 toggleClass() 方法 可以切换不同元素的类样式。

>>$("selector").toggleClass("class");

ToggleClass() 方法模拟了addClass() 方法和 removeClass() 方法实现样式切换的过程。
 

4.4 判断是否包含指定的样式

在实际的应用中，会经常用到追加和移除样式，如果需要增加的样式已经应用指定样式，还需要追加吗?

如果 需要移除的样式根本就没有应用到指定的元素,还需要移除吗?

可以使用HasClass() 方法进行判断

>>$("selector").hasClass("class");