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="width: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="width: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="width: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="width: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. width:100%;  
  14. }  
  15. ul li{  
  16. width: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. width: 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>  
posted @ 2013-10-30 14:10  wuseyukui  阅读(181)  评论(0)  编辑  收藏  举报