使用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()与removeClass()实现样式切换的过程


语法：$(selector).toggleClass(class) ;

示例：$("h2").click(function() {

$("p").toggleClass("content border");

});

判断是否含指定的样式

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


语法：$(selector). hasClass(class);

示例：$("h2").mouseover(function() {

if(!$("p").hasClass("content ")){

$("p").addClass("content ");

}

});


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

if($("p").hasClass("content ")) {

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

}

});

2.内容操作

HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

语法：$("div.left").html(); -->(获取元素中的html代码)

                        或

$("div.left").html("<div class='content'>…</div>"); -->(设置元素中的html代码)

text( )标签内容操作

语法：$("div.left").text(); -->(获取元素中的文本内容)

                        或

$("div.left").text("<div class='content'>…</div>"); -->(设置元素中的文本内容)

html和text的区别

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

val( )属性值操作

val()可以获取或设置元素的value属性值

语法：$(this).val(); -->(获取元素的value属性值)

                或

$(this).val(value); -->(设置元素的value属性值)

3.节点操作

创建节点元素

工厂函数$()用于获取或创建节点

*$(selector)：通过选择器获取节点

*$(element)：把DOM节点转化成jQuery节点

*$(html)：使用HTML字符串创建jQuery节点

元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");

元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");

删除节点

jQuery提供了三种删除节点的方法：

*remove()：删除整个节点 $(selector).remove([expr]);

*empty()：清空节点内容 $(selector).empty();

*detach()：删除整个节点，保留元素的绑定事件、附加的数据

替换节点

replaceWith()和replaceAll()用于替换某个节点

示例：var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

|（两者的关系类似于append()和appendTo( )）

$($newNode1).replaceAll(".gameList li:eq(2)");

复制节点

clone()用于复制某个节点

语法：$(selector).clone([includeEvents]) ; -->(参数ture或flase, true复制事件处理，flase时反之)

示例： $(".gameList li:eq(1)").click(function(){

$(this).clone(true).appendTo(".gameList");

})

$(".gameList li:eq(2)").click(function(){

$(this).clone(false).appendTo(".gameList");

})

4.属性操作

获取与设置元素属性

attr()用来获取与设置元素属性

语法：$(selector).attr([name]) ; -->(获取属性值)

                    或

$(selector).attr({[name1:value1]…[nameN:valueN]}) ; -->(设置多个属性的值)



示例：$(".contain img").attr({width:"200",height:"80"});

删除元素属性

removeAttr()用来删除元素的属性

语法：$(selector).removeAttr(name) ;

示例：$(".contain img").removeAttr("alt"); -->(删除元素的alt属性)

5.节点遍历

遍历子元素

children()方法可以用来获取元素的所有子元素

语法：$(selector).children([expr]);


示例：var $section =$("section").children(); -->(获取<section>的子元素，但不包含子元素的子元素)

alert($section.length);

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange");
prev([expr])	用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange");
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素 $("li:eq(1)").siblings().addClass("orange");

遍历前辈元素

jQuery中可以遍历前辈元素

*parent()：获取元素的父级元素

*parents()：获取元素的祖先元素

示例：$("li:eq(1)").parent().addClass("orange");

$("li:eq(1)").parents().addClass("orange");

其他遍历方法

*each( ) ：规定为每个匹配元素规定运行的函数

（选择器的位置）

            |

语法：$(selector).each(function(index,element)) ;

                    |

（当前的元素）

示例：$("img").click(function(){

$("li").each(function(){

var str=$(this).text()+"<br>";

$("section").append(str);

})

});

end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

示例：

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");

$(".gameList li:last").css("border","none");

CSS-DOM操作

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶

点击回到目录页