jQueryDom操作全解

最新推荐文章于 2024-02-28 16:51:01 发布

c-Tomorrow

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量321

点赞数

分类专栏： JQuery jQuery学习总结文章标签： jQuery Dom操作全解

本文链接：https://blog.csdn.net/c__dreamer/article/details/81270147

版权

JQuery 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

jQuery学习总结

16 篇文章 2 订阅

订阅专栏

说到底，jQuery是一个JavaScript库，离不开对Dom的操作。今天就总结一下jQuery中的Dom操作

Dom插入并包裹现有内容

wrap(wrappingElement)

unwrap()

wrapAll(wrappingElement)

wrapInner(wrappingElement)

height():(不包括margin、padding、border)

width() : (不包括margin、padding、border)

Dom插入并包裹现有内容

wrap(wrappingElement)

描述：在每一个匹配的元素外层包上一个HTML元素

<div></div>
<script>
    $(function(){
        $("div").wrap("<div class="wrapper"></div>")
    })
</script>

上面代码表示在选中的div外层在包裹一层div

unwrap()

描述：将匹配的元素父级删除，保留自身和兄弟元素（如果存在）在原来的位置。不接受任何参数

<div>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $("p").unwrap();
    })
</script>

上述代码的意思是把匹配到的元素的父级元素删除，保留自身和兄弟元素还在原来的位置。此时上述代码div元素删除掉了，p元素和span元素仍然存在原来的位置。

wrapAll(wrappingElement)

描述：在所有匹配的元素碗面包裹一层HTML元素

<p></p>
<script>
    $(function(){
        $("p").wrapAll("<div></div>")
    })
</script>

wrapInner(wrappingElement)

描述：在匹配元素里的内容外包裹一层HTML结构

<p>innerHTML</p>
<script>
    $(function(){
        $("p").wrapInner("<div></div>")    //<p><div>inner</div></p>
    })
</script>

Dom插入现有元素内

append()

描述：在每个匹配元素的末尾处插入参数内容，相当于原生的appendChild()方法

<div></div>
<script>
    $(function(){
        var str = "<p>123</p>";
        $("div").append(str);
    })
</script>

当然也可以在页面中选中已有的元素加入当另一个元素内，相当于剪切效果。

appendTo()

描述：将匹配的元素插入到目标元素的最后面（内部插入）。

这个和上面是相同的效果，只是匹配参数不同。上面是把目标元素插入到匹配的元素的最后面。这个是把匹配的元素插入到目标元素的最后面

<div></div>
<script>
    $(function(){
        $("<p></p>").appendTo($("div"))
    })
</script>

html()

描述：获取匹配集合中的第一个匹配元素的HTML内容，或者设置每一个匹配元素的HTML内容

相当于原生JS的innerHTML

<div>123</div>
<script>
    $(function(){
        $("div").html();    //123
        $("div").html("456")
    })
</script>

prepend()

描述：将目标元素插入到匹配元素内的最前面（内部插入）

<div></div>
<script>
    $(function(){
        $("div").prepend("<p></p>")
    })
</script>

同样的这个也是插入，与append()不同的是，append()是在匹配元素的最后一个子元素处插入，这个方法是在第一个子元素处插入。

prependTo()

描述：将目标元素插入到匹配元素内的最前面

<div></div>
<script>
    $(function(){
        $("<p></p>").prependTo($("div"))
    })
</script>

text()

描述：得到匹配元素集合中每个元素的合并文本，包括他们的后代，设置匹配元素的中的每个元素的文本内容为指定内容。

<div>123</div>
<script>
    $(function(){
        $("div").text();
    })
</script>

Dom移除

detach()

描述：从Dom中去除掉所有匹配的元素，使用这个方法的时候会遍历Dom文档

当没有参数的时候是把匹配的元素全部删除，当有参数的时候，删除匹配元素中的指定的元素。

<p></p>
<div>
    <p></p>
</div>
<script>
    $(function(){
        $("p").detach();    //删除Dom文档中所有的p元素
        $("p").detach("div p") //删除div下的p元素
    })
</script>

empty()

描述：从Dom中移除匹配元素的所有子元素，不接受任何参数

<div>
    <p></p>    
</div>
<script>
    $(function(){
        $("div").empty();
    })
</script>

remove()

描述：将匹配集合中的元素从Dom中移除，（同时移除元素上的事件和jQuery数据）

<div></div>
<script>
    $(function(){
        $("div").remove()
    })
</script>

Dom替换

replaceAll()

描述：用匹配的元素替换目标元素

<p></p>
<script>
    $(function(){
        $("<span>替换</span>").replaceAll($("p"))
    })
</script>

replaceWith()

描述：用匹配的内容去替换目标元素。并返回被删除的目标元素的集合

<p></p>
<script>
    $(function(){
        console.log($("<span></span>").replaceWith($("p")));
    })
</script>

CSS属性

css()

描述：获取/设置一个或多个CSS属性

当参数为1个的时候表示获取该属性的值，当参数为两个得时候表示设置属性和值，当需要设置多个属性值的时候可以用对象的形式设置。

<div style="width:100px;height:100px"></div>
<script>
    $(function(){
        $("div").css("height");    //获取height的值
        $("div").css("background-color","red")    //设置背景颜色为红色
        $("div").css({
            border: "1px solid red",
            color : "red",        //设置多个属性的值
        })
    })
</script>

height():(不包括margin、padding、border)

描述：获取匹配元素集合中每个元素的当前计算高度值，设置每个匹配元素的高度值（参数为数值）

这个高度不包括margin，padding。border

<div style="width:100px;height:100px;padding:10px;margin:10px"></div>
<script>
    $(function(){
        $("div").height();    //100
        $("div").height(200)    //设置高度值
    })
</script>

width() : (不包括margin、padding、border)

描述：获取匹配元素集合中每个元素的当前计算宽度值，设置每个匹配元素的宽度值（参数为数值）

这个高度不包括margin，padding。border

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").width();    //100
        $("div").width(200)    //设置宽度值
    })
</script>

innerHeight

描述：为匹配元素集合中获取第一个元素的当前计算高度值，包括padding，但不包括border，不可以接受参数

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").innerHeight();    //120
    })
</script>

innerWidth()

描述：为匹配元素集合中获取第一个元素的当前计算宽度值，包括padding，但不包括border，不可以接受参数

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").innerWidth();    //120
    })
</script>

outerHeight()

描述：获取元素集合中第一个元素的当前计算高度值，包括padding、border和选择性的margin。

返回一个整数（不包含px）表示值，或如果在一个空集合上调用该方法，则会返回null。

参数为bool类型，默认值为false，不包含margin，当为true时候计算值包括了margin。

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").outHeight();    //122
        $("div").outHeight(true)    //142
    })
</script>

outWidth()

描述：获取元素集合中第一个元素的当前计算宽度值，包括padding、border和选择性的margin。

返回一个整数（不包含px）表示值，或如果在一个空集合上调用该方法，则会返回null。

参数为bool类型，默认值为false，不包含margin，当为true时候计算值包括了margin。

<div style="width:100px;height:100px;padding:10px margin:10px ;border:1px solid red;"></div>
<script>
    $(function(){
        $("div").outWidth();    //122
        $("div").outWidth(true)    //142
    })
</script>

offset()

描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档、设置匹配的元素集合中每一个元素的坐标，坐标相对于文档。

返回值是一个对象，参数也是一个对象

$(function(){
        var div  = $('.box');
        console.log(div.offset());
        div.offset({
             top : 300,
             left : 500,
        })
})

position()

描述：获取匹配元素中第一个元素的当前坐标，相对于距离该元素最近的而且被定位过得祖先元素

<div style="position:absolute">
    <p></p>
</div>
<script>
    $(function(){
        $("p").position()    //div
    })
</script>

scrollLeft()

描述：获取匹配的元素集合中第一个元素的当前水平滚动条的位置，设置每个匹配元素的水平滚动条位置

参数为数值

$(function(){
     $('.content').scrollLeft(300);
     console.log($('.content').scrollLeft());
})

scrollTop()

描述：获取匹配的元素集合中第一个元素的当前垂直滚动条的位置，设置每个匹配元素的垂直滚动条位置。

参数为数值

$(function(){
     $('.content').scrollTop(300);
     console.log($('.content').scrollTop());
})

复制元素

clone()

描述：创建一个匹配的元素集合深度拷贝副本，append方法相当于剪切，这个相当于复制

不接受任何参数，结合appendTo和append来使用。

<p></p>
<div></div>
<script>
    $(function(){
        $("p").clone().appendTo("div");
    })
</script>

Dom元素插入现有元素外

after()

描述：在匹配元素集合中的每个元素后面插入参数所指定的内容作为兄弟节点。

$(function(){
     $('p').after("<div>后面插入</div>");
})

insertAfter()

描述：在目标元素后面插入集合中每个匹配的元素（注：插入的元素作为目标元素的兄弟元素）。

$(function(){
     $('<div>后面插入</div>').insertAfter($('p'));
})

before()

描述：根据参数设定，在匹配元素的前面插入内容（注：外部插入）

$(function(){
       $('p').before("<div>前面插入</div>");
})

insertBefore()

描述：在目标元素前面插入集合中每个匹配的元素（注：插入的元素作为目标元素的兄弟元素）。

$(function(){
    $("<div>前面 插入</div>").insertBefore($('p'));
})

主页传送门

c-Tomorrow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQueryDom操作全解

说到底，jQuery是一个JavaScript库，离不开对Dom的操作。今天就总结一下jQuery中的Dom操作目录Dom插入并包裹现有内容wrap(wrappingElement)unwrap()wrapAll(wrappingElement)wrapInner(wrappingElement)Dom插入现有元素内append()appendTo()htm...
复制链接

扫一扫