jQuery之DOM操作一

jQuery的dom操作是基于javascript原生的dom操作对其做了更简洁的封装，使得我们使用起来更加顺手，并且简化了大量代码，下面开始介绍jQuery的dom操作

<div>
  <p title="camera">你最喜欢的相机是？</p>
  <ul>
    <li >佳能</li>
    <li >索尼</li>
    <li >三星</li>
  </ul>
</div>

一、查找节点

1、查找元素节点

直接通过前面介绍的选择器操作。eg.查找第二个li节点并输出其文本内容

var li2 = $("ul li:eq(1)");//查找第二个li节点
alert(li2.text());//输入其文本内容

2、查找属性节点

通过attr方法查找元素的属性节点。eg.查找p元素的属性title并输出

var p = $("p").attr("title");//查找p元素的title属性节点
alert(p);//输入其属性内容camera

二、创建节点

1、创建元素节点

通过jQuery工厂函数$()创建，通过append方法添加到对象。eg.为ul添加li节点

$("ul").append('<li></li>');//注意单引号中的代码一定要符合html代码规范，处于闭合状态

添加之后示例代码变为：

<div>
  <p title="camera">你最喜欢的相机是？</p>
  <ul>
    <li >佳能</li>
    <li >索尼</li>
    <li >三星</li>
    <li ></li>
  </ul>
</div>

2、创建文本节点

$("ul").append("<li>松下</li>");
或者$("ul>li:eq(3)").text("松下");

添加之后示例代码变为：

<div>
  <p title="camera">你最喜欢的相机是？</p>
  <ul>
    <li >佳能</li>
    <li >索尼</li>
    <li >三星</li>
    <li >松下</li>
  </ul>
</div>

3、创建属性节点

eg.为p节点创建title属性

$("p").attr("title","这是p节点的title属性");

结果为：

...
<p title="这是p节点的title属性">你最喜欢的相机是？</p>
...

4、创建复杂的节点：

可以使用jQuery的链式结构创建，eg：

$("body").append('<div id="insertDiv"><a href="http://www.baidu.com"><b>baidu</b> <span>www.baidu.com</span></a></div>');

三、插入节点

方法列表如下：

这些方法都比较简单，不再举例说明。

四、删除节点

jQuery提供了三种删除节点的方法：empty()、remove、detach

1、remove，将所有匹配的元素都删除，删除之后body中不存在

remove前	remove后
<ul>     <li >佳能</li>     <li >索尼</li>     <li >三星</li>   </ul>	$("ul li:eq(2)").remove(); ---------------------------------------- <ul>     <li >佳能</li>     <li >索尼</li>   </ul>

2、empty，将所有匹配的元素下面的子元素删除，其本身不会被删除

empty前	empty后
<ul>     <li >佳能</li>     <li >索尼</li>     <li >三星</li>   </ul>	$("ul").empty(); ---------------------------------------- <ul>   </ul>

3、detach，与remove类似，不同之处在于该方法会保留匹配元素的绑定事件、附带数据等，意味着我们可以重新使用detach的元素

$("ul li").click(function(){
   alert($(this).text());
})

var li3 = $("ul li:eq(2)").detach();
$("ul").append(li3);//append后发现click事件还存在

五、复制节点

可以通过clone()方法来复制目标节点

新建一个ul标签

<ul></ul>

我们把上面例子中的li元素复制到新建ul中

$("ul li").click(function(){//点击佳能、索尼、三星，元素就会加入到我们新建的ul标签内
	$(this).clone().appendTo("ul:last");
});

新建完后我们会发现点击第一个ul的li元素会响应click事件，而第二个不会，其实通过clone方法也可以让复制的元素和原来的元素具有同样的click事件等，很简单，只需要在clone方法中加一个参数true就大功告成了

$("ul li").click(function(){
	$(this).clone(true).appendTo("ul:last");
});

此时点击第一个ul和第二个ul的li元素都会响应click事件。

六、替换节点

可以通过replaceWith、replaceAll方法实现，二者区别在于颠倒了顺序，一个替换对象在前，一个在后

替换前	replaceWith替换后	replaceAll后
....  <p title="camera">你最喜欢的相机是？</p> ....	$("p").replaceWith("<strong>你最喜欢的相机是？</strong>"); --------------------- ..... <strong>你最喜欢的相机是？</strong> .....	$("<strong>你最喜欢的相机是？</strong>").replaceAll("p"); ------------------------------------ ..... <strong>你最喜欢的相机是？</strong> .....

需要注意的是替换后的节点不在拥有原节点绑定的事件，需要重新为新节点绑定事件

七、包裹节点

可以通过wrap()、wrapAll()、wrapInner()方法用html代码包裹指定的节点

wrapAll方法是将指定节点全部包裹，而wrap方法是将指定节点（如果有多个）分别包裹，wrapInner是将指定节点的html内容包裹，对比如下

	操作	操作后
原始		.... <p title="camera">1你最喜欢的相机是？</p> <p title="camera">2你最喜欢的相机是？</p> ....
wrap	$("p").wrap("<b></b>");	.... <b><p title="camera">1你最喜欢的相机是？</p></b> <b><p title="camera">2你最喜欢的相机是？</p></b> ....
wrapAll	$("p").wrapAll("<b></b>");	.... <b> <p title="camera">1你最喜欢的相机是？</p> <p title="camera">2你最喜欢的相机是？</p> </b> ....
wrapInner	$("p").wrap("<b></b>");	.... <p title="camera"><b>1你最喜欢的相机是？</b></p> <p title="camera"><b>2你最喜欢的相机是？</b></p> ....

八、属性操作

1、获取属性：attr(attibute)

alert($("p").attr("title"));//输出‘camera’

2、删除属性：removeAttr()

删除前	删除后
.... <p title="camera">你最喜欢的相机是？</p> ....	$("p").removeAttr("title"); .... <p>你最喜欢的相机是？</p> ....

3、添加、修改属性：attr(attibute,value)

添加前	添加后	添加完修改后
.... <p>你最喜欢的相机是？</p> ....	$("p").attr("title","camera"); .... <p title="camera">你最喜欢的相机是？</p> ....	$("p").attr("title","camera title"); .... <p title="camera title">你最喜欢的相机是？</p> ....

九、样式操作

跟前面一样，jQuery提供了一些样式的dom操作，这里不再做详情介绍

<p class="test">这里测试样式操作</p>

1、获取和设置样式

alert($("p").attr("class"));//输出样式test
$("p").attr("class","test2");//修改样式为test2

2、追加样式

$("p").addClass("test2");//p标签的样式会变为class="test test2"

3、移除样式

$("p").removeClass("test2");//p标签的样式会变为class="test"

4、样式切换：通过样式追加/移除的方式就行样式切换

$("p").toggleClass("test2");//p标签的样式会在class="test"和class="test test2"之间切换

5、判断样式：判断指定元素是否含有指定样式，返回true、false

$("p").hasClass("test");//判断p标签是否含有test样式，有则返回true，反之false