这一章里,我们讨论一下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"})