Web前端开发与设计11-jQuery操作DOM

学习要点

DOM操作
样式操作
内容操作
节点与属性操作
节点的遍历
CSS-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操作可分为：

1. 样式操作
2. 内容及Value属性值操作
3. 节点操作
4. 节点属性操作
5. 节点遍历
6. CSS-DOM操作

“元素”和“节点”含义大同小异

样式操作

1、设置或者获取样式值

使用css()为指定的元素设置样式值语法：

css(name,value) ;
或
css({name:value, name:value,name:value…}) ;

使用CSS()获取样式值语法：

css(name)

示例代码

$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

2、追加样式

语法：

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

示例代码：

//样式
.t{ padding:10px;}
.c {background-color:#FFFF00; }
.b {border:1px dashed #333; }
//脚本
$("h2").mouseover(function() {
     $("p").addClass("c b");
});

3、移除样式

语法：

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

示例代码：

$("h2").mouseout(function() {
        $("p").removeClass("t c");
});

4、切换样式

语法：

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

$(selector).toggleClass(class) ;

示例代码：

$("h2").click(function() {
    $("p").toggleClass("c  b");
});

5、判断是否含指定的样式

语法：

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

$(selector). hasClass(class);

示例代码：

//判断无，添加样式
$("h2").mouseover(function() {
    if(!$("p").hasClass("c")){
	$("p").addClass("c");
	}
});
//判断有，删除样式
$("h2").mouseout(function() {
      if($("p").hasClass("c")) {
	$("p").removeClass("c");
    }
});

内容操作

内容操作包括：HTML代码操作，标签内容操作，属性值操作。

1、HTML代码操作

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

语法：

//获取
$("div.left").html();
//设置
 $("div.left").html("<div class='light'>…</div>");

2、标签内容操作

text()可以获取或设置元素的文本内容。

语法：

//获取
$("div.left").text();
//设置
 $("div.left").text("<div class='light'>…</div>");

3、属性值操作

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

语法：

//获取属性值
$(this).val();
//设置属性值
$(this).val(value);

节点操作

节点操作包括：查找节点、创建节点、插入节点、删除节点、替换节点、复制节点。

1、创建元素节点

工厂函数$()用于获取或创建节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

示例代码：

var $newNode=$("<li></li>");
var $newNode1=$("<li>海贼王</li>");
var $newNode2=$("<li title='last'>龙猫</li>");

2、插入节点

元素内部插入子节点：

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");

3、删除节点

remove()：删除整个节点。
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据

4、替换节点

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

var $newNode1=$("<li>海贼王</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);

或者：

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

5、复制节点

clone()用于复制某个节点。

语法：

$(selector).clone([includeEvents]) ;

参数includeEvents：参数ture或flase, true复制事件处理，flase时反之。

属性操作

属性操作包括：获取与设置元素属性、删除元素属性。

1、获取与设置元素属性

语法：

//获取
$(selector).attr([name]) ;
//设置
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例代码：

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

2、删除元素属性

语法：

$(selector).removeAttr(name) ;

示例代码：

$(".contain img").removeAttr("alt");

节点遍历

节点遍历包括：遍历子元素、遍历同辈元素、遍历前辈元素、其他遍历方法。

1、遍历子元素

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

语法：

$(selector).children([expr]);

示例：

//获取<section>的子元素，但不包含子元素的子元素
var $section =$("section").children();
alert($section.length);

2、遍历同辈元素

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");

3、遍历前辈元素

jQuery中可以遍历前辈元素
parent()：获取元素的父级元素
parents()：元素元素的祖先元素

示例：

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

4、其他遍历方法

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()外，还有获取和设置元素高度、宽度等的样式操作方法。

示例代码：

<script src="js/jquery-1.12.4.js"></script>
<script>
	$(document).ready(function(){
		var adverTop=parseInt($("#adver").css("top"));
		var adverLeft=parseInt($("#adver").css("left"));
		$(window).scroll(function(){
			var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
			var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离
			$("#adver").offset({top:scrollTop+adverTop});
			$("#adver").offset({left:scrollLeft+adverLeft});
		});
	})
</script>