jQuery之DOM操作一
来源:互联网 发布:php如何优化 编辑:程序博客网 时间:2024/05/24 13:28
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,将所有匹配的元素下面的子元素删除,其本身不会被删除
<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
- jQuery之DOM操作一
- jQuery开发之DOM操作一
- Jquery 之DOM文档操作(一)
- JQuery之DOM操作
- JQuery之操作DOM
- JQuery之DOM操作
- JQuery之DOM操作
- jQuery之DOM操作
- JQuery之DOM操作
- Jquery之Dom操作
- jQuery基础教程之DOM操作-节点操作函数(一)
- jQuery基础教程之DOM操作-节点操作函数(一)
- jQuery 中的DOM操作(一)
- 打杂之WEB前端(一) jQuery 操作DOM总结,DOM Core操作
- jQuery使用手册之DOM操作
- jQuery技术之DOM操作
- javascript之jquery DOM操作
- jQuery之DOM操作二
- 鼠标滑过文字,显示隐藏的div,离开后div隐藏
- iOS程序模拟器手机运行都正常,archiving出错:Undefined symbols for architecture arm64
- linux 命令行
- 你相信我们的爱会创造奇迹吗
- 推荐ios学习的博客,很不错的博文
- jQuery之DOM操作一
- 代理模式
- 实习的第一个上午
- php计算时间的应用
- MySQL数据类型中DECIMAL的作用和用法
- SQL的内连接与外连接
- mini2440 led驱动程序测试实验
- 脚踏实地,一步一步开始
- 常见的地毯保养误区