JQuery中的DOM操作
1.查找节点
使用JQuery选择器来完成
1.1 查找元素节点
$("ul li:eq(1)")
1.2 查找属性节点
var $para = $("p");
var p_txt = $para.attr("title");
2.创建节点
2.1 创建元素节点
var $li_1 = $("<li></li>");
$("ul").append($li_1);
2.2 创建文本节点
var $li_1 = $("<li>香蕉</li>");
$("ul").append($li_1);
2.3 创建属性节点
var $li_1 = $("<li title=‘香蕉‘>香蕉</li>");
$("ul").append($li_1);
3. 插入节点
插入节点的方法
append() :向每个匹配元素内部追加内容
appendTo() :将所有匹配的元素追加到指定元素中
prepend() : 向每个匹配的元素内部前置内容
prependTo() : 将所有匹配的元素前置到指定的元素中
after() : 在每个元素之后插入内容
insertAfter() : after()相反
before() : 在每个匹配元素之前插入内容
insertBefore() : before()相反
4.删除节点
4.1 remove方法
$("ul li:eq(1)").remove();
$("ul li").remove("li[title!=菠萝]");
4.2 empty方法
$("ul li:eq(1))").empty();
5. 复制节点
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
$(this).clone(true).appendTo("body"); 增加true,使复制的新元素具有原来的行为
¥(this).appendTo("body"); 移动节点
6.替换节点
$("p").replaceWith("<strong>text</strong>");
$("<strong>text</strong").replaceAll("p");
7.包裹节点
$("strong").wrap("<b></b>"); 将所有元素进行单独包裹
$("strong").wrapAll("<b></b>"); 将所有匹配元素用一个元素来包裹
$("strong").wrapInner("<b></b>"); 将每个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。