jQuery文档处理

仙鹤__

于 2023-05-14 11:10:28 发布

阅读量265

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130666549

版权

文档操作，主要是对文档中的dom节点进行操作。

1.1 内部插入

1.1.1 append(content|fn)

向每个匹配的元素内部追加内容

 <div>
        <p>I would like to say:</p>
        <p>I would like to say:</p>
        <p>I would like to say:</p>
    </div>
    <div>
        <p>I would like to say:</p>
        <p>I would like to say:</p>
        <p>I would like to say:</p>
    </div>

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            // 向每个匹配的元素内部追加内容
            $('div p').append("<strong style='color:red'>hello jQuery</strong>")
           

        })
    </script>

预览：

1.1.2 appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中。

 <p>同心守“沪”——记方舱医院里的援沪医疗队</p>
    <p>他们在上海送菜，从凌晨到凌晨，一天几万斤</p>
    <p>市场监管总局公布2022“铁拳”行动首批典型案例</p>
    <br>
    <button id="btn">点击，看一看</button>
    <br>
    <div id="foo">
       

    </div>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
               // 把 所有段落 追加到 ID值为foo的元素中。
               $("p").appendTo('#foo')

            })
        })
    </script>

预览：

1.1.3 prepend(content)

向每个匹配的元素内部前置内容。

<div>
        <p>：下午好，欢迎您登录到xxx系统！</p>
        <p>：下午好，欢迎您登录到xxx系统！</p>
        <p>：下午好，欢迎您登录到xxx系统！</p>
    </div>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            // prepend(content) 向每个匹配的元素内部前置内容
            $uname='小余';
            $("div p").prepend("<strong style='color:orange;'>"+$uname+"</strong>")
        })
    </script>

预览：

1.1.4 prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

<div>
        <p>：下午好，欢迎您登录到xxx系统！</p>
        <p>：下午好，欢迎您登录到xxx系统！</p>
        <p>：下午好，欢迎您登录到xxx系统！</p>
    </div>

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            // prepend(content) 向每个匹配的元素内部前置内容
            $("<em>小明同学</em>").prependTo("div p")
         
        })
    </script>

预览：

1.2 外部插入

外部插入指的是将内容放置在某个标签的后面，或者放置在某个标签的前面。反正不在标签里面。

1.2.1 after(content|fn)

在每个匹配的元素之后插入内容。

<div class="box">
        <p>你好</p>
        <h1>你好</h1>
        <h1>你好</h1>
        <h1>你好</h1>
        <h2>你好</h2>
    </div>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
        // after() 在每个匹配的元素之后插入内容。
        $(".box h1").after("<div>我是div</div>");
    </script>

预览：

1.2.2 before(content|fn)

在每个匹配的元素之前插入内容。

 <div class="box">
        <p>你好</p>
        <h1>你好</h1>
        <h1>你好</h1>
        <h1>你好</h1>
        <h2>你好</h2>
    </div>

  <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
       
        // before(content|fn) 在每个匹配的元素之前插入内容。
        $(".box h1").before("<div>我是div</div>");
        })
    </script>

预览：

1.2.3 insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

<div class="box">
        <p>你好</p>
        <h1>你好</h1>
        <h1>你好</h1>
        <h1>你好</h1>
        <h2>你好</h2>
    </div>

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
        
        //等价于after方法
        // 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
        $("<div>我是div</div>").insertAfter(".box h1")


        })
    </script>

预览：

1.3 包裹

1.3.1 wrap() 包裹 wrapAll()包裹

wrap(html|element|fn)

把所有匹配的元素用其他元素的结构化标记包裹起来。

我把找到的每个段落标签p，都给它放置到一个指定的div#box标签中去

<style>
    #box{
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        float:left;
    }
</style>

<p>网易</p>
    <p>优酷</p>
    <p>土豆</p>
    <br>
    <button id="btn">包裹所有的p段落</button>

预览：

//把所有p包裹到一个div中
 $(function(){
            $('#btn').click(function(){
            $("p").wrapAll("<div id='box'></div>")
               })
           
        })

预览：

1.4 替换

1.4.1 replaceWith

replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

<p>Hello</p>
    <p>cruel</p>
    <p>World</p>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //替换 所有
            $('p').replaceWith('<b>小明同学</b>')
               })
    </script>

预览：

1.4.2 replaceAll

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素

<p>Hello</p>
    <p>cruel</p>
    <p>World</p>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //替换 所有
            // $('p').replaceWith('<b>小明同学</b>')
           
            //作用与上面相同  语法不同
            $("<b>小明同学</b>").replaceAll("p")
        })
    </script>

1.5 删除

1.5.1 empty() 删内容不删节点

删除匹配的元素集合中所有的子节点。（置空）

注意：删除标签内的内容，标签本身没有被删除。

 <p style="outline: 1px dashed red;">Hello, <span>Person</span> <a href="#">and person</a></p>
 <button id="btn">删除</button>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            //把所有段落的子元素（包括文本节点）删除
            $('#btn').click(function(){
                $('p').empty();
               
            })
           
        })
    </script>

预览：

1.5.2 remove() 删节点

从DOM中删除所有匹配的元素。

注意：删标签以及它里面包裹的所有内容。

    <p style="outline: 1px dashed red;">Hello, <span>Person</span> <a href="#">and person</a></p>
    how are you?
    <p>this is my life</p>
    <p>this is my life</p>

    <button id="btn">删除</button>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
             //从DOM中把所有段落删除
             $('p').remove();

        })
    </script>

预览：

1.5.3 detach() 删节点

detach([expr])

从DOM中删除所有匹配的元素。

注意：删标签以及它里面包裹的所有内容。和 remove()的作用一样。

<p style="outline: 1px dashed red;">Hello, <span>Person</span> <a href="#">and person</a></p>
    how are you?
    <p>this is my life</p>
    <p>this is my life</p>

    <button id="btn">删除</button>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
            $('p').detach();

            })
           
        })
    </script>

1.6 复制

1.6.1 clone()

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。

<b>Hello</b>
    <b>Hi</b>
    <b>hi</b>
    <p style="outline: 1px dashed red;">, how are you?</p>
    <button id="btn">克隆</button>

<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $(function(){
            $('#btn').click(function(){
                //克隆
                $('b').clone().prependTo('p')
            })
        })
    </script>

预览：