HTML-使用jQuery操作 DOM

DOM操作分为三类：

1. DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
2. HTML-DOM：用于处理HTML文档，如document.forms
3. CSS-DOM：用于操作CSS，如element.style.color="green"

注：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

 

jQuery对JavaScript中的DOM操作进行了封装：

jQuery中的DOM操作：

1. 样式操作

①使用css()为指定的元素设置样式值或获取样式值

语法：

css(name,value) ;    【设置单个属性】

或

css({name:value, name:value,name:value…}) ;    【同时设置多个属性】

示例：

$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});  【opacity：设置透明度】

②追加样式

语法：

$(selector).addClass(class);

或

$(selector).addClass(class1 class2 … classN);

示例：

.text{ padding:10px;}

.content {background-color:#FFFF00; }

.border {border:1px dashed #333; }

$("h2").mouseover(function() {   $("p").addClass("content border");    });

【使用addClass为P添加content和border】

③移除样式

语法：

$(selector).removeClass("class") ;

或

$(selector).removeClass("class1 class2 … classN ") ;

示例：

$("h2").mouseout(function() {    $("p").removeClass("text content");   });

【使用removeClass为P移除content和text】

④切换样式

toggleClass()：模拟了addClass()与removeClass()实现样式切换的过程

语法：

$(selector).toggleClass(class) ;

示例：

$("h2").click(function() {   $("p").toggleClass("content  border");   });

⑤判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式