操作DOM

1、获取和设置DOM属性

获取和设置DOM属性可以用.prop()和.attr()这两个方法。.prop()方法是JQuery 1.6版本为了解决.attr()方法的BUG以上才引入的，在具体使用时，有些区别，如下：

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

举例说明：

<a href="http://www.baidu.com" target="_self" class="c">百度</a>

元素的DOM属性有“href、target和class"，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

var h=$('.c').prop('href')

<a href="#" id="link1" action="delete">删除</a>

元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

var a=$('#link1').attr('action');

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

设置属性值
$(元素).attr/prop({propertyname:‘value’,propertyname:‘value’,…})

2、创建新元素

函数$()可以用来创建新元素。例如：

$(document).ready(function() { 
	$('<a href="#top">back to top</a>'); 
	$('<a id="top"></a>'); 
});
//以上方法只是创建了元素，但并没有加载到界面上

如果将新创建的元素添加到界面上，可以用如下方法

$(propertyname).insertBefore(selector)
在selector元素外部、之前添加propertyname。

$(selector).before(propertyname)
在selector元素外部、之前添加propertyname。

注：.before()与.insertBefore()功能一样，只是写法不一样。

$(propertyname).insertAfter(selector)
在selector元素外部、之后添加propertyname。

$(selector).after(propertyname)
在selector元素外部、之后添加propertyname。

注：.after()与.insertAfter()功能一样，只是写法不一样。

$(propertyname).prependTo(selector)
在selector元素内部、之前添加propertyname，如果selector元素内部有其它子元素，则插入到所有子元素之前。

$(selector).prepend(propertyname)
在selector元素内部、之前添加propertyname。

注：.prepend()与.prependTo()功能一样，只是写法不一样。

$(propertyanme).appendTo(selector)
在selector元素内部、之后添加propertyname，若selector元素内部有其它子元素，则插入到所有子元素之后。

$(selector).append(propertyname)
在selector元素内部、之后添加propertyname。

注：.append()与.appendTo()功能一样，只是写法不一样。

例如：

$(document).ready(function() { 
	$('<a href="#top">back to top</a>').insertAfter('div.chapter p'); 
	$('<a id="top"></a>').prependTo('body'); 
});
//第一句：在指定类名为chapter的div元素中所有p元素外部、后面创建了一个链接
//第二句：在body元素内部、前面创建一个锚

上述代码也可以写成：

$(document).ready(function(){
	$('div.chapter p').after('<a href="#top">back to top</a>');
	$('body').prepend('<a id="top"></a>');
});

3、包装元素

JQuery中包装元素有3个方法：.wrapAll()、.wrap()、wrapInner()，这三个方法的语法是一样的：$(selector).wrap(wrapper)。
wrapper参数可以为：

HTML 代码 - 比如 ("<div></div>")
新的 DOM 元素 - 比如 (document.createElement("div"))
已存在的元素 - 比如 ($(".div1"))
函数
已存在的元素不会被移动，只会被复制，并包裹被选元素。

下面介绍这三个方法的函义及区别
.wrapAll(wrapper)：将所有匹配的元素移动到第一个匹配元素的位置下面，并用wrapper将其全部包裹。例：

html代码：
<p id="n1">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
<span id="n6">[span#n6]</span>

执行JQuery代码：
$("span").wrapAll('<em class="all-span"></em>');

执行后的html代码：
<p id="n1">
    <em class="all-span"><span id="n2">[span#n2]</span><span id="n5">[span#n5]</span><span id="n6">[span#n6]</span></em>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
//我们发现，所有的<span>元素都移动到第一个<span>元素下面，并在外面包裹<em class="all-span"></em>元素。

如果wrapper为函数时，则匹配元素不会发生移动，例：

原始html代码：
<p id="n1">
    <span id="n2">[span#n2]</span>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<span id="n5">[span#n5]</span>
<span id="n6">[span#n6]</span>

执行JQuery代码：
$("span").wrapAll( function(index){
    return '<em class="level-' + index + '"></em>'; 
} );

执行后html代码：
<p id="n1">
    <em class="level-0"><span id="n2">[span#n2]</span></em>    
</p>
<p id="n3">
    <label id="n4">[label#n4]</label>
</p>
<em class="level-1"><span id="n5">[span#n5]</span></em>
<em class="level-2"><span id="n6">[span#n6]</span></em>
//我们发现<span>元素并未发生移动

.wrap(wrapper)：在每个匹配的元素外包裹wrapper。例：

原始html代码：
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>

执行JQuery代码：
$("li").wrap("<div></div>");

执行后的html代码：
<ul>
  <div><li title="苹果">苹果</li></div>
  <div><li title="橘子">橘子</li></div>
  <div><li title="菠萝">菠萝</li></div>
</ul>
//我们发现，每个<li>元素外面都包裹了<div>元素。

.wrapInner(wrapper)：在每个匹配元素内外部包裹指定的元素，如果该元素内包含其它元素，则一并包裹。该方法不发生移动。例：

原始html代码：
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>

执行JQuery代码：
$("li").wrapInner("<div></div>");

执行后的html代码：
<ul>
  <li title='苹果'><div>苹果</div></li>
  <li title='橘子'>><div>橘子</div></li>
  <li title='菠萝'>><div>菠萝</div></li>
</ul>
//我们发现，为每个<li>元素的内容包裹了<div>元素。

4、遍历元素

$(selector).each(function(index,item))：遍历匹配元素，为每个元素执行函数。

var arr = ["aaa", "bbb", "ccc"];
$.each(arr, function (i, item) {
	alert(i.toString() + '-' + item);
})
//遍历每个数组元素，并输出索引和值。

5、复制元素

$(selectot).clone(withData [,deepwithData])
参数：
withData：布尔值，是否同时复制元素的附加数据和绑定事件，默认为false。
deepwithData：布尔值，是否同时复制元素的所有子元素的附加数据和绑定事件，默认值即为参数withData的值。
注：
1、在jQuery 1.4之前，clone()函数只额外复制元素的绑定事件，从1.4版本开始，才开始支持复制元素的附加数据。
2、1.5.0版本时(只有1.5.0)，参数withDataAndEvents的默认值被错误地设定为true，从1.5.1开始，其默认值才被改回false。