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