本文详细介绍了使用jQuery进行DOM操作，包括添加元素（末尾追加、插入到现有元素之前、替换现有元素）、删除元素（$元素.remove()）、以及克隆元素（$元素.clone()）。特别强调了jQuery的简化版函数，如链式操作和自动使用文档片段，以及如何通过事件委托实现元素的添加与删除。
目录
【前文回顾】👉 jQuery操作之如何修改元素_03
❣️ 添加/删除/替换/克隆
1. 添加、插入与替换
(1). DOM中:
a. 添加一个元素: 3步
1). 创建一个新的空元素:
var 新元素=document.createElement("标签名")
2). 设置关键属性:
3). 将新元素添加到DOM树: 3种:
i. 末尾追加:
父元素.appendChild(新元素)
ii. 插入到现有元素之前:
父元素.insertBefore(新元素, 现有元素)
iii. 替换现有元素:
父元素.replaceChild(新元素, 现有元素)
b. 批量添加多个平级子元素: 文档片段 3步：
1). 创建文档片段:
var frag=document.createDocumentFragment();
2). 将子元素临时添加到文档片段中
frag.appendChild(子元素)
3). 将文档片段对象添加到DOM树
父元素.appendChild(frag)
(2). jq中: 2步
a. 无论创建一个元素还是创建多个元素都只用$()就够了！
var $新元素=$(`HTML片段`)
😇 $除了使用选择器查找外，还可以有创建的功能
b. 只剩一件事: 将新元素添加到DOM树，5种方式，10个函数
⁉️ 为什么5种方式，每种方式却提供了2个功能一样的函数？
——为了可以进行链式操作：由于每个函数都会返回点前的主语对象，这样就可以进行链 式操作
例如：$父元素.append($新元素)函数，因为返回值就是父元素对象，此时如果想要继续 对父元素执行操作，比如想要进一步修改父元素的宽度，所以，在这样的场景下，选择该 函数就可以使用jQ的函数链式操作(在该函数后加点即可)，很方便！
$新元素.appendTo($父元素)函数，因为返回值就是新元素对象，此时如果想要继续新父 元素执行操作，比如想要继续为新元素绑定单击事件，所以，在这样的场景下，选择该函 数就可以使用jQ的函数链式操作(在该函数后加点即可)，很方便！
1). 末尾追加: $父元素.append($新元素)
return $父元素
可继续对父元素执行操作
$新元素.appendTo($父元素)
return $新元素
可继续对新元素执行操作
2). 开头插入: $父元素.prepend($新元素)
return $父元素
可继续对父元素执行操作
$新元素.prependTo($父元素)
return $新元素
可继续对新元素执行操作
3). 插入到现有元素之前: $现有元素.before($新元素)
return $现有元素
可继续对现有元素执行操作
$新元素.insertBefore($现有元素)
return $新元素
可继续对新元素执行操作
4). 插入到现有元素之后: $现有元素.after($新元素)
return $现有元素
可继续对现有元素执行操作
$新元素.insertAfter($现有元素)
return $新元素
可继续对新元素执行操作
5). 替换现有元素: $现有元素.replaceWith($新元素)
return $现有元素
可继续对现有元素执行操作
$新元素.replaceAll($现有元素)
return $新元素
可继续对新元素执行操作
c. jquery这十个函数在将新元素添加到DOM树上时，只要遇到同时添加多个新元素的情况，在其内部，会自动使用文档片段整体添加！——从此不用我们自己再写文档片段！
2. 删除: $元素.remove()
◼️ 示例: 添加删除方块
9_append.html —— 未使用链式操作优化
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
<style>
.container {
border: 1px solid #aaa; overflow:hidden;
}
.block {
float: left; margin: 10px;
border: 1px solid #aaa;
background: #faa;
width: 150px; height: 150px;
}
.block:hover{ box-shadow:0 5px 6px #000; }
.close {
float:right; padding:5px;
font-weight:bold; opacity:.2; cursor: pointer;
}
.close:hover { opacity: .5; }
</style>
</head>
<body>
<h1>添加/删除节点</h1>
<button id="add-block">添加区块</button>
<div class="container">
<!-- <div class="block">
<span class="close">×</span>
</div> -->
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 点按钮添加新方块
var $btn=$("#add-block");
//2. 绑定事件处理函数
$btn.click(function(){
//3. 查找要修改的元素
//本例中: 点击按钮向下方class为container的div中添加新方块
var $div=$(".container");
//4. 修改元素
//4.1 先创建新方块元素:
var $block=$(`<div class="block">
<span class="close">×</span>
</div>`);
//4.2 为新方块设置随机背景色
$block.css("background-color",`rgb(${
parseInt(Math.random()*255)
},${
parseInt(Math.random()*255)
},${
parseInt(Math.random()*255)
})`)
//4.3 将新方块元素添加到div中
$div.prepend($block);
})
</script>
</body>
</html>9_append2.html —— 使用链式操作优化后
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
<style>
.container {
border: 1px solid #aaa; overflow:hidden;
}
.block {
float: left; margin: 10px;
border: 1px solid #aaa;
background: #faa;
width: 150px; height: 150px;
}
.block:hover{ box-shadow:0 5px 6px #000; }
.close {
float:right; padding:5px;
font-weight:bold; opacity:.2; cursor: pointer;
}
.close:hover { opacity: .5; }
</style>
</head>
<body>
<h1>添加/删除节点</h1>
<button id="add-block">添加区块</button>
<div class="container">
<!-- <div class="block">
<span class="close">×</span>
</div> -->
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 点按钮添加新方块
$("#add-block")
//2. 绑定事件处理函数
.click(function(){
//3. 查找要修改的元素
//本例中: 点击按钮向下方class为container的div中添加新方块
// var $div=$(".container");
//4. 修改元素
//4.1 先创建新方块元素:
$(`<div class="block">
<span class="close">×</span>
</div>`)
//4.2 为新方块设置随机背景色
.css("background-color",`rgb(${
parseInt(Math.random()*255)
},${
parseInt(Math.random()*255)
},${
parseInt(Math.random()*255)
})`)
//4.3 将新方块元素添加到div中
.prependTo(".container");
//自动查找
});
//DOM 4步
//1. 查找触发事件的元素
//本例中: 因为多个×都能点击，所以事件应该绑在公共的父元素div.container上一份——事件委托
$(".container")
//2. 绑定事件处理函数
.click(function(e){
//事件委托第二步: e.target代替this
var $tar=$(e.target);
//事件委托第三步: 判断
//只有点在class为close的span上才执行删除操作
if($tar.is(".close")){ // $tar.hasClass("close")
//3. 查找要修改的元素
//本例中: 点×删除的是×的父元素
// var $block=$tar.parent();
//变量$block只使用一次，没有必要在声明变量，所以$tar.parent()即可
$tar.parent()
//4. 修改元素
//删除元素
// $block=.remove(); 链式操作，省去$block，所以直接.remove();即可
.remove();
}
})
</script>
</body>
</html>
运行结果:
⚗️ 补: $元素.is("选择器") 判断当前元素是否符合选择器的要求
👉 这个函数既不是查找也不是添加也不是修改，作为判断之用
3. 克隆元素：var $新元素=$旧元素.clone()
◼️ 示例: 选飞机
10_replace_clone.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>替换节点</h1>
<div id="chosen">
<img src="img/p0.png">
</div>
<hr />
<div id="list">
<img src="img/p3.png">
<img src="img/p4.png">
<img src="img/p5.png">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找触发事件的元素
//本例中: 因为三个img都可点击，所以事件只绑定在父元素上一份即可——事件委托
$("#list")
//2. 绑定事件处理函数
.click(function(e){
//事件委托第二步: e.target代替this
var $tar=$(e.target);
//事件委托第三步: 判断当前元素是不是img
if($tar.is("img")){
//3. 查找要修改的元素
//本例中: 点下方的img只要修改上方的img即可
//4. 修改元素
//先将当前选中的img克隆一个元素副本
$tar.clone()
//用副本元素代替上方的img
.replaceAll("#chosen>img");
//自动查找
}
})
</script>
</body>
</html>运行结果:
❣️ 总结：jQuery简化版函数3大特点
1. 自带for循环
2. 一个函数两用
3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫
❣️ 总结：$()共有4种
1. $("选择器") 查找DOM元素，并包装进jQuery对象中
2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中
3. $(`HTML片段`) 创建新元素
4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！
❣️ 总结：知识点提炼
1. 引入jQuery.js: 2种
(1). 引入项目本地jquery.js文件:
<script src="js/jquery-1.11.3.js">
(2). 引入CDN网络中共享的jquery.js文件:
<script src="官方提供的CDN上jquery.js文件地址">
2. 创建jQuery类型子对象: 2种
(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。
DOM家元素对象无权直接使用jQuery家简化版函数。
所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。
(2). 如何:2种:
a. 查找DOM元素对象，并保存进新创建的jQuery对象中:
var $jq子对象=$("选择器")
b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:
var $jq子对象=$(DOM元素对象)
3. 原理:
(1). $=jQuery=new jQuery
(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象
(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。
所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。
jQuery中的this、e、e.target等，和DOM中的完全一样！
4. jQuery简化版函数3大特点:
(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环
(2). 一个函数两用: 调用函数时:
a. 没给新值作为参数，默认执行获取旧值的操作
b. 给了新值作为参数，自动切换为执行修改操作
(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。
5. 查找元素:
(1). jQuery支持用所以CSS3选择器查找
(2). jQuery新增选择器: (css中不能用)
a. 基本过滤: (下标从0开始)
:first :last :eq(i) :lt(i) :gt(i) :even :odd
b. 内容过滤:
:contains(文本) :has(选择器) :parent :empty
c. 可见性过滤:
:visible :hidden(只能选择display:none和input type="hidden")
d. 表单元素过滤:
:input :text :password :radio :checkbox ... ...
(3).用节点间关系查找: 2大类关系, 8个函数
a. 父子关系：3个函数:
$元素.parent()
$元素.children("选择器")
$元素.find("选择器")
b. 兄弟关系：5个
$元素.prev()
$元素.prevAll("选择器")
$元素.next()
$元素.nextAll("选择器")
$元素.siblings("选择器")
6. 修改元素: 3种:
修改中的所有函数，都是一个函数两用！
(1). 内容: 3种:
a. 原始HTML内容:
$元素.html("新HTML内容") 代替.innerHTML
b. 纯文本内容:
$元素.text("纯文本内容") 代替.textContent
c. 表单元素的值:
$元素.val("新值") 代替.value
(2). 属性: 3种:
a. 字符串类型的HTML标准属性:2种:
1). $元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
2). $元素.prop("属性名", bool值)
代替 元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种
$元素.prop("属性名", bool值)
代替 元素.属性名=bool值
c. 自定义扩展属性:只有一种:
$元素.attr("属性名","新属性值")
代替 元素.getAttribute()和setAttribute()
反过来总结:
$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)
$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)
(3). 样式:
a. 获取或修改单个css属性: 只有1种
$元素.css("css属性名", "属性值")
获取属性值时被翻译为getComputedStyle(元素)
修改属性值时被翻译为.style.css属性=属性值
b. 使用class批量修改样式:
$元素.addClass("class名")
$元素.removeClass("class名")
$元素.hasClass("class名")
$元素.toggleClass("class名")
| 💥 修改相关的函数都可同时修改多个属性值: $元素.attr或prop或css({ 属性名:"属性值", ... : ... }) |
7. 添加删除替换克隆元素: ⏬ 👇
(1). 添加新元素: 2步
a. 使用HTML片段批量创建新元素:
$(`HTML片段`)
b. 将新元素添加到DOM树: 5种方式，10个函数
1). 末尾追加:
$父元素.append($新元素)
$新元素.appendTo($父元素)
2). 开头插入: 新增:
$父元素.prepend($新元素)
$新元素.prependTo($父元素)
3). 插入到一个现有元素之前:
$现有元素.before($新元素)
$新元素.insertBefore($现有元素)
4). 插入到一个现有元素之后:
$现有元素.after($新元素)
$新元素.insertAfter($现有元素)
5). 替换现有元素:
$现有元素.replaceWith($新元素)
$新元素.replaceAll($现有元素)
(2). 删除元素: $元素.remove()
(3). 克隆元素: $元素.clone()
(4). 判断一个元素是否具有什么特征: $元素.is("选择器")
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！
扫一扫
3319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
