jQueryDOM节点操作

jQueryDOM节点操作

2:节点的增删改查

查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点

一、查找节点

1、使用各种选择器
    都是在查找元素

2、父节点
    a. 对象.parent()   == 对象.parentNode 
    b. 对象.parents("body")  无参数:父级集合直到html,
    c. 对象.parentsUntil("body")  父级到指定的父级结束
3、子节点
    a. $("box").children()    div>p
    b. $("box").find("li");  div li
4、兄弟节点
    a.上一个  
        对象.prev() == previousElementSibling
        对象.prevAll()  上一个到最先的兄弟
    b.下一个
        对象.next()  ==nextElementSibling
        对象.nextAll(选择器)  
    c.所有的兄弟节点(除自己外) c==a+b
        sibling===同胞
        对象.siblings()

二、创建节点

JS:var obox=document.createElement("div");
创建元素节点
var newBox=$("<div id="box"></div>");
创建带文本的元素节点
var newBox=$("<div id="box">我是div标签</div>");

三、插入节点

1、在某父节点内(前后): 
    后面:
    JS: 父节点.appendChild(子节点);  
    a.$(父节点).append(子节点);
    b.$(子节点).appendTo(父节点); //把子节点插入到父级点后面
    前面:
    a.$(父节点).prepend(子节点);
    b.$(子节点).prependTo(父节点);

2、在兄弟节点前后:
    js:父节点.insertBefore(新节点,旧节点)
    前面:
    a.$(兄弟节点).before(新的兄弟节点); //在兄弟节点前插入新的兄弟节点
    b.$(新的兄弟节点).insertBefore(旧兄弟节点);//将新兄弟节点插入到旧节点前
    后面:
    a.$(兄弟节点).after(新的兄弟节点); //在兄弟节点后插入新的兄弟节点
    b.$(新的兄弟节点).insertAfter(旧兄弟节点);//将新兄弟节点插入到旧节点后

四、删除节点

js: 父节点.removeChild("要删除的节点");
1、删除节点
    $(要删除的节点).remove(); //彻底删除,包括它自己
2、清空节点
    $(要清空的节点).empty(); //将该节点内容清空,保留它自己 

3、detach()

五、复制节点
js: 要复制的节点.cloneNode(boolean);

$(“要复制的节点”).clone(boolean); true复制事件,默认为false

六、替换节点

JS: 父节点.replaceChild(新节点,旧节点);
1、$(旧节点).replaceWith(新节点); //旧节点被新节点替换

2、$(新节点).replaceAll(旧节点); //新节点替换旧节点

七、包裹节点

JS: 无
wrap :包裹
<!-- <div class="wrapper"></div> -->
1、将某个节点用其他元素包裹起来(单独包裹)
    $(子节点).wrap("父节点标签");
    例子:$("p").wrap("<div></div>");  //用父节点把子节点包起来
2、将所有匹配的元素用另一个元素包裹起来(打包包裹)
    $(子节点).wrapAll("父节点标签");
    例子:$("p").wrapAll("<div></div>"); //所有的p都会被div个打包
3、将每一个匹配的子内容用其他标记包裹起来。相当于是对wrap取相反。
    $("父节点标签").wrapInner(子节点);
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值