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="width: 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>
