jQuery与Dom

上节讲解了jQuery的选择器，基本都掌握了，现在再讲解一下jQuery的Dom操作。

 

1、查找节点

1.1 查找元素节点

[javascript] view plaincopyprint?

1. var $li = $("ul li:eq(1)");   //获取<ul>里第二个<li>节点。  
2.     
3. var li_txt = $li.text();    //获取第二个<li>元素节点的文本内容。  
4.     
5. alert(li_txt);  

1.2查找属性节点

jQuery选择器找到所需元素之后，就可以使用attr()方法来获取它的各种属性值。attr()的参数可以是一个，可以是两个。一个表示取值，两个表示赋值。

[javascript] view plaincopyprint?

1. var $para = $("p");  //获取<p>节点  
2.     
3. var p_txt = $para.attr("title"); //获取<p>元素节点属性title  
4.     
5. alert(p_txt);  

 

2、创建节点

 

2.1创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

(1)创建两个<li>新元素

(2)将这两个元素插入文档中。

第(1)个步骤可以用jQuery的工厂函数$()来完成，格式如下：

[javascript] view plaincopyprint?

1. $(html);  
2.     
3. $(html)方法会根据传入的html标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。  
4.     
5. 首先创建两个<li>元素，如下：  
6.     
7. var $li_1 = $("<li></li>");  
8.     
9. var $li_2 = $("<li></li>");  
10.     
11. 插入元素：  
12.     
13. $("ul").append($li_1);  
14.     
15. $("ul").append($li_2);或者用如下写法：$("ul").append($li_1).append($li_2);  

2.2创建文本节点

[javascript] view plaincopyprint?

1. var $li_1 = $("<li>香蕉</li>");  
2.     
3. var $li_2 = $("<li>雪梨</li>");  

其他的同2.1

 

2.3创建属性节点

[javascript] view plaincopyprint?

1. var $li_1 = $("<li title='香蕉'>香蕉</li>");  
2.     
3. var $li_2 = $("<li title='雪梨'>雪梨</li>");  

其他的同2.1

 

3、插入节点
动态的创建HTML元素并没有什么实际用处，还需要将新创建的元素插入到文档中去，前面已经介绍了一种append(),其实还有很多插入方法。

主要有四对方法处理，其实都很简单，很好记。如下：

append()和appendTo()：向每个匹配元素的内部追加内容，指的是后部。

prepend()和prependTo()：向每个匹配元素内部前置内容，指的是前部。

after()和insertAfter()：在每个匹配元素后部插入内容，指的是同级后面。

before()和insertBefore()：在每个匹配元素前部插入内容，指的是同级前面。

 

4、删除节点

如果文档中某一个元素多余，那么应该删除。jQuery提供了两种删除节点的方法，及remove()和empty()。

4.1remove()方法

var $li = $("ul li:eq(1)").remove(); //获取第二个<li>元素节点后，将它从网页上删除。

其返回值是一个指向已被删除的节点的引用，因此可以在以后继续使用这些元素。

$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里。

以上代码可以简写如下：

$("ul li:eq(1)").appendTo("ul"); //用来移动元素，移动元素首先删除元素，然后再插入。

remove()还可以添加参数,如下：

$("ul li").remove("li[title!=萝卜]");

4.2empty()方法

严格讲，empty()并不删除节点，只是清空节点，它能清空元素中的所有后代节点。

 

5、复制节点

clone()和clone(true)，复制节点后，被复制的新元素并不具有任何行为。如果需要新元素有具有复制功能，则使用clone(true)

[javascript] view plaincopyprint?

1. $("ul li").click(function(){  
2.     
3.     $(this).clone().appendTo("ul");//复制当前节点，并将它追加到<ul>元素中。  
4.     
5. });  

 

6、替换节点

如果要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。

$("p").repaceWith("<strong>你最不喜欢的水果是？</strong>");   //将所有匹配的元素都替换成指定的HTML或者DOM元素。

$("<strong>你最不喜欢的水果是？</strong>").repalceAll("p"); //和上面是一对操作。

 

7、包裹节点

使用wrap()和wrapAll()方法可以实现：

[javascript] view plaincopyprint?

1. $("strong").wrap("<b></b>");  //把每一个<strong>都用一个<b>包围起来，有几个包几个  
2.     
3. $("strong").wrapAll("<b></b>"); //整体包裹  

warpInner()方法，包裹元素的子内容（包括文本节点）

 

8、属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

8.1获取和设置属性 

attr()一个参数表示获取属性值，两个参数表示设置属性值，前面讲过。

$("p").attr("title","your title");

还可以设置多值，$("p").attr({"title":"your title","name":"test"})

jQuery中很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值，类似的还有

html()、text()、height()、width()、val()和css()等方法。

8.2删除属性

$("p").removeAttr("title");

 

9、样式操作

9.1获取样式和设置样式

var p_class = $("p").attr("class"); //获取<p>元素的class

也可以用attr来设置<p>元素的class，jQuery代码如下：

$("p").attr("class","high");  //此代码的作用是将原来的class替换为新的class，而不是在原有的基础上追加新的class，追加的如下。

9.2追加样式

使用addClass();

$("p").addClass("another"); //给<p>元素追加"another"类，此时一共有两个样式了。

9.3移除样式

使用removeClass()来完成，当有参数时removeClass("another"),则移除指定的样式，还有removeClass("high another");移除两个样式

当没有参数时则表明移除该元素的所有样式。

9.4切换样式

之前有toggle()方法

[javascript] view plaincopyprint?

1. $toggleBtn.toggle(function(){  
2.     
3.       //show code  
4.     
5. },function(){  
6.     
7.       //hide code  
8.     
9. });  

这里有toggleClass方法，控制样式的转换。如果类名存在则删除它，如果类名不存在则添加它。

$("p").toggleClass("another");  //重复切换类名"another"

9.5判断是否含有某个样式

hasClass("another"); 其实其内部是使用is(".another")来实现的，这样做只是增加了可读性。

 

10、设置和获取HTML、文本和值

主要有如下方法：

html()   对应javaScript的innerHTML属性

text() 对应javascript的innerText属性，firefox不支持innerText属性

val()方法focus()、blur()方法

val()除了取值和设置之外，还可以给select checkbox 和radio选中值，jQuery的val()的原则是从最后一个往前读，value和text值

this.defaultValue方法。

 

11、遍历节点

11.1children()方法

遍历所有的子节点。

11.2next(),pre(),siblings()

closest()取得最近的匹配元素。

 

12、CSS-DOM操作

$("p").css("color");//获取颜色属性

$("p").css("color","red");//设置颜色

$("p").css({"fontSize"："30px"，"backgroundColor"："#888888"});//同时设置多个样式。

有两个注意点：

(1)如果值是数字，将会被自动转化为像素值。

(2)在css()方法中，如果属性中带有"-"符号，例如font-size和background-color属性，用驼峰式写法。

hight().width();

offset()  .left .top  获取元素在当前视窗的偏移量，返回值对象包含两个属性left和top。

position()  .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。

scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)

 

下面是个经典的例子：鼠标移过图片，图片放大

[html] view plaincopyprint?

1. <html>  
2. <head>  
3. <title>jQuery DOM test</title>  
4. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
5. <script type="text/javascript">  
6. $(function(){  
7.     var x = 10;  
8.     var y = 20;  
9.     $("a.tooltip").mouseover(function(e){  
10.         //alert("over");  
11.         this.myTitle = this.title;  
12.         this.title = "";  
13.         var imgTitle = this.myTitle ? "<br/>"+this.myTitle : "";  
14.         var tooltip = "<div id='tooltip'><img src='" + this.href +"' alt='产品预览图'/>"+imgTitle+"</div>";   
15.         $("body").append(tooltip);  
16.         $("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");  
17.     }).mouseout(function(){  
18.         this.title = this.myTitle;  
19.         $("#tooltip").remove();  
20.     });  
21. });  
22. </script>  
23. </head>  
24. <body>  
25. <div>  
26. <ul style="list-style:none;">  
27.     <li style="display:inline"><a href="img/ipod.jpg" class="tooltip" title="苹果ipod" ><img src="img/ipod.jpg" alt="苹果ipod" style="150px; height:150px"/></a></li>  
28.     <li style="display:inline"><a href="img/iphone.jpg" class="tooltip" title="苹果iphone"><img src="img/iphone.jpg" alt="苹果iphone" style="150px; height:150px"/></a></li>  
29.     <li style="display:inline"><a href="img/ipad.jpg" class="tooltip" title="苹果ipad"><img src="img/ipad.jpg" alt="苹果ipad" style="150px; height:150px"/></a></li>  
30.     <li style="display:inline"><a href="img/air.jpg" class="tooltip" title="苹果air"><img src="img/air.jpg" alt="苹果air" style="150px; height:150px"/></a></li>  
31. </ul>  
32. </div>  
33. </body>  
34. </html>  

注意其中的li的横向排列方法还有其他的方法使其横向排列：

[html] view plaincopyprint?

1. 方法一：直接带<li>里面加样式来实现  
2.     
3. <ul style=list-style:none;>  
4. <li style="display:inline">我要横向排列</li>  
5. <li style="display:inline">Hier of chsfish </li>  
6. </ul>  
7.     
8.     
9. 方法二：通过定义ul li 来实现  
10.     
11. ul{  
12. list-style-type:none;  
13. 100%;  
14. }  
15. ul li{  
16. 80px;  
17. float:left;  
18. }  
19. <ul>  
20. <li>我要横向排列</li>  
21. <li>Hier of chsfish </li>  
22. </ul>  
23.     
24. 方法三：通过定义li的CSS来实现  
25.     
26. <style type="text/css">  
27. <!--  
28. li {  
29. background-color: #CCCCCC;  
30. text-align: center;  
31. float: left;  
32.  70px;  
33. margin: 3px;  
34. padding: 3px;  
35. list-style-type: none;  
36. }  
37. -->  
38. </style>  
39. <ul>  
40.    <li>Text1Text1Text1</li>  
41.    <li>Text2Text2Text2</li>  
42.    <li>Text3Text3Text3</li>  
43.    <li>Text4Text4Text4</li>  
44.     
45.    <li>Text5Text5Text5</li>  
46.    <li>Text6Text6Text6</li>  
47. </ul>