JQuery笔记(三)-节点操作

    这一章里，我们讨论一下JQuery怎样操作dom节点，你会看到利用JQuery，可以非常方便快捷的完成dom节点的增、删、改等操作。

 

1.创建节点

   在JQuery中，创建节点非常简单：$("<p><a href="#">a</a></p>") 表示创建了一个包含<a>的<p>。JQuery中，不仅可以用这种方式创建节点，而且可以像操作真正节点一样操作创建出来的节点。例如 : $("<p><a href="#">a</a></p>").find("a")

2.添加节点

   JQuery中添加节点的方法有很多种，现在仅以append()方法来举例

   <select multiple id="select1" style="width:100px;height:160px;">
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                    <option value="3">option3</option>
                    <option value="4">option4</option>
                    <option value="5">option5</option>
                    <option value="6">option6</option>
                    <option value="7">option7</option>
                    <option value="8">option8</option>
   </select>

   <select multiple id="select2" style="width:100px;height:160px;">

   var $options = $("#select1 option:selected");
   $options.appendTo("#select2"); //这两句代码可以把select1中选中的option追加到select2中

   在实际测试中，这部分不仅追加到select2中，而且也从select1中被移除

   JQuery中，还有一些负责添加节点的函数：

   • append()
   • prepend()
   • prependTo()
   • after()
   • before()
   • insertAfter()
   • insertBefore()
   • wrap()
   • wrapAll()
   • wrapInner()

   这里就不一一举例了，使用时可以查阅JQuery的API reference

 

3.移除节点

   JQuery中移除节点只需在selector后面加上.remove()即可。例如：$("a#testA").remove();  //表示移除id为testA的<a>

 

4.替换节点

   $("li.remove").replaceWith("<li>removed</li>"); 用<li>removed</li>替换class为remove的<li>

 

5.复制节点

   $("ul").clone.appendTo("body");

 

6.遍历查找到的结果集

   var url = [];

   $("div#post a[href]").each(function(i) {
      urls[i] = $(this).attr('href');
   });

 

7.属性的操作

   $("a").attr("href") 获得<a>的属性href

   $("a").attr("href","www.sina.com") 将<a>的属性href设为www.sina.com

   $("a").removeAttr("href")移除<a>的属性href

 

8.获取标签中的html值

   $("p").html() 获取<p>中的html值，类似于innerHTML

 

9.获取节点文本值

   $("p").text()

 

10.节点样式操作

   $("div").addClass("newClass"); $("div").removeClass("class");

   $("#tooltip").css({"top": e.pageX+"px","left": e.pageY+"px"})