jQuery 文档操作

文档处理

　　文档处理是指使用jQuery对HTML文档进行结构化的处理，最基本的就是对标签元素的增删改查。

创建标签

$()

　　使用$(标签)进行创建，返回一个jQuery对象。

　　可支持嵌套标签的创建

　　可支持标准属性或特征属性以及内容的定义

　　在新版本中，如果创建的标签没有内容且是闭合标签，可不用写后面的闭合部分

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $section = $("<section>"); // 闭合标签不必写闭合部分，这是新版本锁支持的
        let $main = $("<main><nav>导航</nav><main>"); // 支持标签嵌套与内容定义
        let $article = $("<article data-color:'red'></article>"); // 支持属性定义

        console.log($section.get(0));
        console.log($main.get(0));
        console.log($article.get(0));

</script>

子级插入

prepend()

　　对jQuery对象中的每一个标签内部的头部都插入一个其他的标签

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $main.prepend($div);
        console.log($main.get(0));

        /*
        <main>
                <div></div>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
        */

</script>

append()

　　对jQuery对象中的每一个标签内部的尾部都插入一个其他的标签

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $main.append($div);
        console.log($main.get(0));

        /*
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
                <div></div>
        </main>
        */

</script>

prependTo()

　　将jQuery对象中的标签都插入到另一个标签内部的头部

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $div.prependTo($main);
        console.log($main.get(0));

        /*
        <main>
                <div></div>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
        */

</script>

appendTo()

　　将jQuery对象中的标签都插入到另一个标签内部的尾部

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $div.appendTo($main);
        console.log($main.get(0));

        /*
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
                <div></div>
        </main>
        */

</script>

同级插入

before()

　　对jQuery对象中的每一个标签的前面都插入一个其他的标签

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $main.before($div);

        /*
        <div></div>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
        */

</script>

after()

　　对jQuery对象中的每一个标签的后面都插入一个其他的标签

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $main.after($div);

        /*
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
        <div></div>
        */

</script>

insertBefor()

　　将jQuery对象中的标签都插入到另一个标签的前面

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $div.insertBefore($main);

        /*
        <main>
                <div></div>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
        */

</script>

insertAfter()

　　将jQuery对象中的标签都插入到另一个标签的后面

<body>
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $div = $("<div>");
        let $main = $("main");

        $div.insertAfter($main);

        /*
        <main>
                <nav></nav>
                <section></section>
                <footer></footer>
        </main>
        <div></div>
        */

</script>

外部包裹

wrap()

　　将jQuery对象中的每一个标签外部包裹上另一个标签

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.wrap("<div></div>");

        /*
        <section>
                <div><span>HELLO</span></div>
                <div><span>HELLO</span></div>
                <div><span>HELLO</span></div>
        </section>
        */

</script>

warpAll()

　　将jQuery对象中的所有标签外部包裹上另一个标签

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.wrapAll("<div></div>");

        /*
        <section>
                <div>
                        <span>HELLO</span>
                        <span>HELLO</span>
                        <span>HELLO</span>
                </div>
        </section>
        */

</script>

wrapInner()

　　将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.wrapInner("<mark></mark>")

        /*
        <section>
                <span><mark>HELLO</mark></span>
                <span><mark>HELLO</mark></span>
                <span><mark>HELLO</mark></span>
        </section>
        */

</script>

外部移除

unwrap()

　　将jQuery对象中的每一个标签外部父级标签进行移除

<body>
        <section>
                <div><span>HELLO</span></div>
                <div><span>HELLO</span></div>
                <div><span>HELLO</span></div>
        </section>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.unwrap();

        /*
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>
        */

</script>

替换操作

replaceWith()

　　将一个标签替换为任意元素，可以是文本，也可以是标签

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.replaceWith(`文本${$span.html()}文本`);

        /*
        <section>
                文本HELLO文本
                文本HELLO文本
                文本HELLO文本
        </section>
        */

</script>

replaceAll()

　　用一个元素替换掉另一个匹配元素，相当于replaceWith()的反向操作，但去替换的只能是一个元素。

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        let $mark = $(`<mark>${$span.html()}</mark>`);
        $mark.replaceAll($span);

        /*
        <section>
                <mark>HELLO</mark>
                <mark>HELLO</mark>
                <mark>HELLO</mark>
        </section>
        */

</script>

删除操作

empty()

　　删除jQuery对象中每个元素的子节点（不会删除自己），这个只属于清空操作。

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.empty();
  
        /*
        <section>
                <span></span>
                <span></span>
                <span></span>
        </section>
        */

</script>

remove()

　　删除jQuery对象中的元素（连同自己和子类一同删除）

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.remove();
  
        /*
        <section></section>
        */

</script>

detach()

　　删除HTML文档中的标签元素，但会保留jQuery对象中的元素。因为将来有可能再用到，保留所有子级标签，事件绑定，属性等。

<body>
        <section>
                <span>HELLO</span>
                <span>HELLO</span>
                <span>HELLO</span>
        </section>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

        let $span = $("span");
        $span.detach();

        // 依旧保留jQuery对象中的元素，而remove()是全部删除干净
        console.log($span); // S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)] 
  
        /*
        <section></section>
        */

</script>

标签拷贝

clone()

　　用于拷贝节点，与Js中的cloneNode()效果相同。

　　参数为true时递归复制子节点即深拷贝，会将原标签的事件等也一同进行拷贝。

<body>
        <div onclick="show(this,event)" style=" 20px;height: 20px;background: red;margin-top: 20px;"></div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>

        function show(ele, event) {
                ele.style.backgroundColor = "blue";
                document.body.append($("div").eq(0).clone(true).get(0));
        }


        // 必须要取出单独DOM元素，否则每次都会成倍添加。
        // 第一次  2个  第二次 4个 第三次  8个
        // 因为jQuery对象是一个集合，而不是单独元素，每一次的克隆都会对jQuery对象进行遍历克隆。所以会成倍添加

</script>

相关阅读:
javaEE的三层结构：web层、service层、dao层
 shell 流水账
 Git笔记（流水账）
Openstack搭建（流水账）
shell数组脚本
 linux配置邮箱服务
 Linux产生随机数的几种方法
 MySQL主从复制原理及配置过程
 安装并配置多实例Mysql数据库
 Nginx防盗链配置
原文地址：https://www.cnblogs.com/Yunya-Cnblogs/p/13551626.html