文档操作,主要是对文档中的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>
预览: