美文网首页
DOM操作

DOM操作

作者: daisx | 来源:发表于2017-05-24 15:26 被阅读0次

    创建元素:同时新建(元素节点)(文本节点)(属性节点)

    插入节点:动态创建的元素节点插入

    append、appendTo、prepend、prependTo是更倾向于父子元素之间的插入操作。

    $("A").append(B)【查找某个元素A后,向其内部元素后面插入元素B】

    $("B").appendTo(A)

    $("A").prepend(B)【查找某个元素A,向其内部元素前面插入元素B】

    $("B").prependTo(A)

    after、insertAfter、before、insertBefore偏向于兄弟元素之间的插入

    $(A).after(B);【查找元素A,在其后面插入元素B】

    $(B).insertAfter(A);

    $(A).before(B);【查找元素A,在其前面插入元素B】

    $(B).insertBefore(A);

    删除节点

    remove()【删除元素以及元素内包含后代,返回被删除对象,可以带参数删除】

    detach()【类似remove,区别在于,元素绑定的方法再次使用时,依旧存在,但是人remove已不复从前】

    empty()【清空元素内部节点,和remove、detach存在很大区别。比如ul中清除了li:eq(0)元素,只是清空了文本,绑定的事件依旧存在】

    复制节点

    clone()【不带参数,不具备原节点的行为,带参数true完整克隆】

    替换节点

    $(A).replaceWith(B)【查找到A,用B来替换】

    $(B).replaceAll(A')【调到了B和A的位置】

    属性操作

    获取属性:$(A).attr(pro-name)【获取元素A的属性】

    修改属性:$(A).attr({名/值对})【修改A的属性】

    删除属性:$('A').removeAttr('属性名')【删除元素A属性】

    样式操作

    追加样式:addclass()

    移除样式:removeclass()

    切换样式:toggle()

    判断样式:hasclass()

    设置内容:html()、text()

    遍历节点:

    children():只考虑子元素,而不考虑后代元素

    $(A).next():获取紧邻同辈中A元素的下一个元素

    $(A).prev():获取紧邻同辈中A元素的上一个元素

    $(A).siblings():获取紧邻同辈中A元素所有兄弟元素

    相关文章

      网友评论

          本文标题: DOM操作

          本文链接:https://www.haomeiwen.com/subject/hwpnxxtx.html