使用jQuery操作DOM

DOM操作分类

DOM操作分为三类：

*DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

*HTML-DOM：用于处理HTML文档，如document.forms

*CSS-DOM：用于操作CSS，如element.style.color="green"

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

jQuery中的DOM操作

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

*jQuery中的DOM操作

样式操作

内容及Value值操作

节点操作

节点属性操作

节点遍历

CSS-DOM操作

提示："元素"和"节点"含义大同小异，本章并不严格区分

1.样式操作

css( )设置和获取样式值

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

语法：css(name,value) ; (设置单个属性)

或

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

css(name); (获取属性值)

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

或

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

addClass( )追加样式

语法：$(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");

});

removeClass( )移除样式

语法： $(selector).removeClass("class") ;

或

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

示例：

$("h2").mouseout(function() {

$("p").removeClass("text content");

});

toggleClass( )切换样式

toggleClass()：模拟了addClass()与remov