锋利的Jquery——学习笔记(四)DOM操作(一)
2017-07-19 17:36
501 查看
Jquery中的DOM操作(一)
查找节点创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作
设置和获取HTML、文本和值
遍历节点
css-dom操作
一、查找节点
1、查找元素节点
var li_txt=$("ul li:eq(2)").text(); //获取元素节点的文本内容 alert(li_txt);
2、查找属性节点
var p_txt=$("p").attr("title");
attr()方法中的第一个参数为属性的名字,第二个参数为设置值
$(selector).attr(attribute,value);
二、创建节点
1、创建元素节点
有两个步骤:(1)创建元素节点:$(html)方法会根据传入的html标记字符串,创建dom对象,然后包装成jQuery对象返回
(2)将节点加入文档中:append()方法
var $li_1=$("<li></li>"); var $li_2=$("<li></li>"); $("ul").append($li_1); $("ul").append($li_2);
2、创建文本节点
var $li_3=$("<li><em>这是</em><b>一个</b><a href='#'>复杂的组合</a></li>"); $("ul").append($li_3);
3、创建属性节点
var $li_4=$("<li title="西瓜">西瓜</li>"); $("ul").append($li_4);
三、插入节点
插入节点的方法(将创建的元素插入到文档的不同位置)
(1)append(); //像每个符合的元素追加内容$("ul").append($li_3);
(2)appendTo(); //将所有匹配元素追加到指定的元素中
$("<li title='猕猴桃'>猕猴桃</li>").appendTo("ul");
(3)prepend(); //像每个匹配元素添加前置内容
html:<p>我想说:</p> js:$("p").prepend("<b>hahahaha</b>"); 结果为: <p><b>hahahaha</b>我想说:</p>
(4)prependTo(); //将所有匹配元素前置添加到指定的元素中
js:$("<b>hahahaha</b>").prependTo("p");
(5)after(); //插入到当前元素的后面,区分append()【插入到当前元素内部的最后面】
(6)insertAfter(); // 和(5)插入的位置进行颠倒
(7)before(); //插入到当前元素的前面,区分prepend()【插入到当前元素内部的最前边】
(8)insertBefore(); // 和(7)插入的位置进行颠倒
四、删除节点
1、remove()
根据传入的参数,删除所有匹配元素以及其后代节点,但是这个方法会返回一个删除节点的引用,可以在后续程序中继续应用。$li_1=$("ul li:eq(2)").remove(); $li_1.appendTo("ul");
$("ul li").remove("li[title!='苹果']");//可以在方法中添加条件
2、empty()
不是删除节点,而是清空节点中的内容。五、复制节点
应用场景:在网上购物时,选中某个物品后,鼠标选中可以拖入购物车中$(this).clone(true).appendTo("ul[name='purchasecar']");//表示复制元素的同时,也复制该元素所绑定的事件
六、替换节点
1、replaceWith()
$("p").replaceWith("<b>我是大好人</b>");//效果是将原来的<p>我是大好人</p>换为现在的<b>我是大好人</b>
2、replaceAll()
用法与replaceWith使用恰好相反。注:当节点被替换以后,原来节点绑定的事件将会消失,需要重新绑定。
七、包裹节点
1、wrapAll()
包裹节点,用wrapAll()方法是将所有匹配元素进行统一的包裹,但是wrap()是将每一个符合的元素节点进行单独的包裹。2、wrapInner()
将每一个匹配元素的子内容(包括文本),用其他结构化标记包裹起来。相关文章推荐
- 锋利的Jquery——学习笔记(五)DOM操作(二)
- 锋利的Jquery——学习笔记(三)DOM的操作分类
- 锋利的jQuery-第三章 jQuery中的DOM操作
- 锋利的Jquery【读书笔记】 -- 第三章 jQuery中的DOM操作
- 《jQuery权威指南》学习笔记之第3章 jQuery操作DOM
- 锋利的jquery--CH3 jquery中的dom操作
- 学习笔记《锋利的jQuery》-jQuery中的DOM操作
- 锋利的JQuery-Jquery中DOM操作
- 锋利的jQuery(jQuery中的DOM操作)
- 【学习笔记】锋利的jQuery(二)DOM操作
- 锋利的jQuery学习笔记之DOM操作
- 锋利的jQuery | jQuery中的DOM操作
- 锋利的jquery读书笔记---jquery的dom操作
- 锋利的jQuery学习笔记(4)-DOM操作
- web前端之锋利的jQuery三:jQuery中的DOM操作
- 锋利的JQuery —— DOM操作
- 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
- 【锋利的JQuery】0x03 JQuery中的DOM操作
- 锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
- 锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)