[JavaScript知识库]jQuery中的DOM操作

一、创建节点

1. 创建空节点

var $li=$("<li></li>")

2. 创建带文本的节点

var $li=$("<li>文本</li>")
var $li=$("<li title='text'>文本</li>")

二、插入节点

1. append: 插入子节点至父元素末尾

$("ul").append($li)

2. prepend: 插入子节点至父元素开头

$("ul").prepend($li)

3. insertBefore insertAfter移动节点

//(待移动的节点).insertBefore(参考点)
$("ul li:eq(1)").insertBefore($("ul li:eq(0)"))		//将第二个li移动到第一个li之前
$("ul li:eq(0)").insertAfter($("ul li:eq(1)"))		//将第一个li移动到第二个li之前

4. after/before 将子节点插入到指定的节点之前/之后

$("li").after("<li>这是新插入的节点1</li>")
$("li:first").before("<li>这是新插入的节点2</li>")

三、清空节点

empty 将元素中的子元素和文本清空

$("li").parent().empty();

四、删除节点

remove 删除所有匹配的元素

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

$("li").remove()

五、克隆节点

clone(true/false)克隆匹配的DOM元素
true 是克隆出来的副本还可以继续克隆，false只能克隆一次,不写默认为false

$("li").clone(true).appendTo($("ul"))	//将li克隆后在插入ul中

六、替换节点

replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("<strong title='sport'>你最不喜欢的运动是</strong>")	

七、包裹节点

1.wrap() 将匹配元素用其它元素包裹起来

$("strong").wrap("<b></b>");	//将strong用b标签包裹起来

2. wrapAll() 将所有匹配元素用单个元素包裹起来

$("a").wrapAll("<p></p>");	//给所有选择器包裹标签

3. wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

	$("li").wrapInner("<span></span>");	//给标签里面的内容包裹

八、操作属性

attr()设置/改变/获取/删除匹配元素的属性

$("p").attr("title","这是p标签");		//设置
alert($("p").attr("title"));			//获取
$("p").attr("title","please choose your favouite fruit.");		//改变
$("p").removeAttr("title","选择你最喜欢的水果.");		//删除

设置多个属性

$("a").attr({
	"href":"http://www.sohu.com",
	"title":"sohu",
	"target":"_blank",
})

九、操作样式

设置单个样式

$("div").css("width","200px");

设置多个样式

$("div").css({
	"display":"block",
	"width":"200px",
	"height":"200px",
	"background":"red",
})

offset获取匹配元素在当前视口的相对偏移
返回的对象包含两个整型属性：top 和 left，以像素计

var left=$("div").offset().left;
var top=$("div").offset().top;

十、获取元素的值

1. html() 获取元素中的代码（包括标签）
括号内传递参数表示设置内容

alert($("p").html());

1. text() 只获取元素中的文本（不包括标签）
括号内传递参数表示设置内容

alert($("p").text());

3. 获取/设置表单元素的值

$(":text").val()