jQuery学习笔记（四）jQuery遍历、DOM操作
jQuery学习笔记（四）jQuery遍历、DOM操作
一、DOM操作（增删改查）
1、新增节点
$(selector).append(content) 在匹配元素内部最后面新增一个节点
$(content).appendTo(selector)
把新节点追加到匹配元素内部最后面（效果同append，只是书写上前后位置互换）
$(selector).prepend(content) 在匹配元素内部最前面新增一个节点
$(content).prependTo(selector)
把新节点追加到匹配元素内部最前面（效果同prepend，只是书写上前后位置互换）
$(selector).after(content) 在匹配元素同级之后新增一个节点
$(content).insertAfter(selector
把新节点追加到匹配元素同级之后（效果同insertAfter，只是书写上前后位置互换）
$(selector).before(content) 在匹配元素同级之前新增一个节点
$(content).insertBefore(selector)
把新节点追加到匹配元素同级之前（效果同insertBefore，只是书写上前后位置互换）
演示：
html代码：
<body>
<input type="button" value="btn">
<ol class="list">
<li>吃饭</li>
<li>睡觉</li>
</ol>
</body>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/cities.js"></script>
<script src="../js/jquery.validate.min.js"></script>
<script>
jQuery(function () {
/*
内部新增
A.append(B) 在节点内部的末尾处新增
B.appendTo(A)
*/
// 1. 给按钮绑定一个单击事件
jQuery("input").click(function () {
// 2. 新增一个 li 标签
var newLi = "<li>打地鼠</li>";
// 3. 将新增的 li 标签, 拼接到类名为 list 的有序列表中
// $(".list").append(newLi);
jQuery(newLi).appendTo(".list");
});
/*
A.prepend(B) 在节点内部的最前面新增
B.prependTo(A)
*/
jQuery("input").click(function () {
var newLi = "<li>打地鼠</li>";
// $(".list").prepend(newLi);
jQuery(newLi).prependTo(".list");
});
/*
同级新增
A.after(B) 同级之后
B.insertAfter(A)
*/
jQuery("input").click(function () {
var newLi = "<li>打地鼠</li>";
// $(".list").after(newLi);
$(newLi).insertAfter(".list");
});
/*
A.before(B) 同级之前
B.insertBefore(A)
*/
$("input").click(function () {
var newLi = "<li>打地鼠</li>";
// $(".list").before(newLi);
$(newLi).insertBefore(".list");
});
});
</script>
其他操作图类型如下：
2、删除节点
remove() 删除节点，斩草除根，全部删除
empty() 清空节点，斩草留根，只清空内部的东西，保留最外面的标签
演示：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.list{
width: 400px;
margin: 50px auto;
}
.list li{
list-style: none;
height: 50px;
line-height: 50px;
border-bottom: 1px dashed #ccc;
}
.list a{
float: right;
}
</style>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 点击 a 标签, 删除元素
});
</script>
</head>
<body>
<ul class="list">
<li>
商品信息1
<a href="#">删除</a>
</li>
<li>
商品信息2
<a href="#">删除</a>
</li>
<li>
商品信息3
<a href="#">删除</a>
</li>
</ul>
</body>
</html>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 点击 a 标签, 删除元素
// 1. 获取 a 标签, 并绑定事件
$("a").click(function () {
// 2.1 删除 (将所有的 a 标签全部删除了)
// $("a").remove();
// 2.2 删除 (删除当前被点击的 a 标签)
// this.remove();
// $(this).remove();
// 2.3 删除 (被点击 a 标签的 parent() 父标签)
// $(this).parent().remove(); // li 标签就是 `根`
// 2.4 empty 清空
$(this).parent().empty();
});
});
</script>
3、替换节点
$(selector).replaceWith(content) 100%把旧的替换掉演示：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换节点</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 需求: 点击按钮, 将div标签替换为h1标签
});
</script>
</head>
<body>
<button>替换节点</button>
<div id="box">这是一个div节点.</div>
</body>
</html>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 需求: 点击按钮, 将div标签替换为h1标签
// 1. 为 button 按钮绑定一个单击事件
$("button").click(function () {
// 2. 准备替换的内容
var h1 = "<h1>我是h1标签</h1>";
// 3. 替换
$("#box").replaceWith(h1);
});
});
</script>
二、jQuery遍历函数
1、概述
jquery对象本身就是数组对象，通过jquery选择器获得的都是满足该选择器条件的对象的集合体。因此在常常需要对jquery对象进行遍历。我们会学
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
图示解释：
JQuery有三种遍历方法、
注意：不管哪种遍历方式，遍历的集合中的每一个元素都是JS对象，因此想要使用JQ的方法需要加$()。
2、原始方式遍历
for循环进行遍历
for（var i=0 ; i<Jq对象.length ; i++）{
console.log();
}
演示：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery遍历</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 遍历方式 :
});
</script>
</head>
<body>
<ul class="list">
<li style="color: red;">1</li>
<li style="color: red;">2</li>
<li style="color: red;">3</li>
<li style="color: red;">4</li>
</ul>
</body>
</html>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 遍历方式 : length
// 1. 获取 li 标签
var lis = $("li");
// 2. 遍历
for (var i = 0; i < lis.length; i++) {
console.log(i + " = " + lis[i] + " = " + lis[i].innerHTML);
// console.log(i + " = " + lis[i] + " = " + $(lis[i]).html());
}
});
</script>
3、jquery对象的方法
说明：此方式是jquery特有的遍历方式，使用jquery集合对象调用each方法即可遍历。
格式：
Jq对象.each（function（index，element）{
alert（index）; //打印索引
alert（element）; //打印集合对象中的每一个元素
}）
$(element).css('color','red');在使用的时候必须加选择器环境$()
经验：一般我们很少去用element这个参数，this在这里等同于element
演示：
html代码：同上
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 遍历方式 : jquery对象.each(function(index, element) {});
$("li").each(function (index, element) {
console.log(index + " = " + element + " = " + $(element).html())
// 将当前遍历的元素, 颜色设置为 green.
// 注意点 : element 是一个 JS 对象, 如果需要调用 jquery 方法, 需要将 JS 对象包装为 jquery 对象.
$(element).css("color", "green");
});
});
</script>
4、jquery的全局方法
说明：此方式是jquery特有的遍历方式，与上面jquery的对象方法相似，但此处的each方法不是某个具体jquery对象的，而是jquery的全局对象的each方法，名字和功能虽然相同，但语法不同。
格式：
$.each（Jq对象，function（index,element）{
alert(index); //打印索引
alert(element); //打印集合对象中的每一个元素
}）
演示：
html代码：同上
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 遍历方式 : $.each(jquery对象, function(index, element) {});
$.each($("li"), function (index, element) {
console.log(index + " = " + element + " = " + $(element).html())
// 将当前遍历的元素, 颜色设置为 green.
// 注意点 : element 是一个 JS 对象, 如果需要调用 jquery 方法, 需要将 JS 对象包装为 jquery 对象.
$(element).css("color", "green");
});
});
</script>
5、案例-省份与城市二级联动
方式一：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 1. 先准备区县的数组
var cities = [
["朝阳区", "海淀区", "丰台区", "昌平区", "西城区", "东城区", "通州区", "大兴区"],
["浦东新区", "闵行区", "静安区", "徐汇区", "杨浦区", "嘉定区", "黄埔区"],
["白云区", "天河区", "花都区", "番禺区"]
];
});
</script>
</head>
<body>
<select id="province">
<option value="none">--请选择省--</option>
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">广州市</option>
</select>
<select id="city">
<option value="none">--请选择市--</option>
</select>
</body>
</html>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 1. 先准备区县的数组
var cities = [
["朝阳区", "海淀区", "丰台区", "昌平区", "西城区", "东城区", "通州区", "大兴区"],
["浦东新区", "闵行区", "静安区", "徐汇区", "杨浦区", "嘉定区", "黄埔区"],
["白云区", "天河区", "花都区", "番禺区"]
];
// 2. 为 `province` 绑定 change 更改事件
$("#province").change(function () {
// 清空方式一 : jquery 方法
// $("#city").html("<option value=\"none\">--请选择市--</option>");
// 清空方式二 : js 方法
// document.getElementById("city").innerHTML = "<option value=\"none\">--请选择市--</option>";
// 清空方式三 : options 数组 (是JS数组)
// document.getElementById("city").options.length = 1;
// 清空方式四 : 通过 get 方法将 jquery 转换为 js 对象.
// $("#city").get(0).options.length = 1;
$("#city")[0].options.length = 1;
// 3. 获取当前省份的 value 值.
var index = $("#province").val();
// 4. 根据获取的 index, 从 cities 数组中取出对应的一维数组. 实现遍历
$(cities[index]).each(function (index, element) {
// console.log(index + " = " + element); element 就是我们需要的字符串
// 5. 创建一个 option 元素
var option = "<option value=\"none\">"+element+"</option>";
// 6. 将 option 元素添加到 city 选择标签中
$("#city").append(option);
});
});
});
</script>
方式二：JSON、[]为数组、{}为对象
json代码：jsons.js
var china = [
{
"p_name": "吉林省",
"p_id": "jl",
"cities": [
{
"c_name": "长春",
"c_id": "cc"
},
{
"c_name": "四平",
"c_id": "sp"
},
{
"c_name": "通化",
"c_id": "th"
},
{
"c_name": "松原",
"c_id": "sy"
}
]
},
{
"p_name": "辽宁省",
"p_id": "ln",
"cities": [
{
"c_name": "沈阳",
"c_id": "sy"
},
{
"c_name": "大连",
"c_id": "dl"
},
{
"c_name": "抚顺",
"c_id": "fs"
},
{
"c_name": "铁岭",
"c_id": "tl"
}
]
},
{
"p_name": "山东省",
"p_id": "sd",
"cities": [
{
"c_name": "济南",
"c_id": "jn"
},
{
"c_name": "青岛",
"c_id": "qd"
},
{
"c_name": "威海",
"c_id": "wh"
},
{
"c_name": "烟台",
"c_id": "yt"
}
]
},
{
"p_name": "上海市",
"p_id": "sh",
"cities": [
{
"c_name": "闵行区",
"c_id": "mh"
},
{
"c_name": "徐汇区",
"c_id": "xh"
},
{
"c_name": "黄浦区",
"c_id": "hp"
},
{
"c_name": "浦东新区",
"c_id": "pd"
}
]
}
];
html代码：
<body>
<select id="province">
<option value="none">--请选择省--</option>
</select>
<select id="city">
<option value="none">--请选择市--</option>
</select>
</body>
jquery代码：
<script src="../js/jquery-3.3.1.min.js"></script>
<!--导入 cities.js 文件-->
<script src="../js/jsons.js"></script>
<script>
$(function () {
// 说明 : jquery 可以实现 json 文件的遍历
// 1. 遍历 cities JSON 格式的js文件. china 是js文件中的变量名称
$(china).each(function (index, element) {
// console.log(index + " = " + element + " = " + element.p_id + " = " + element.p_name);
// 2. 根据当前遍历的 element 对象, 获取到 option 标签对应的 value 和 内容.
var province = "<option value='"+element.p_id+"'>"+element.p_name+"</option>";
// 3. 将新建的标签拼接到 province 标签内容
$("#province").append(province);
});
// 4. 给 `province` 标签绑定更改事件
$("#province").change(function () {
// 注意 : 当省份发生变化时, 需要清空城市
$("#city").html("<option value=\"none\">--请选择市--</option>");
// 5. 获取当前选中省份的 value 数值
var p_id = $("#province").val();
// 6. 遍历 china 数据, 查找与选中省份 p_id 相同的 element 标签对象
$(china).each(function (index, element) {
// 7. 将外部的 p_id 与 element 对象的 p_id 进行比较与判断
if (p_id == element.p_id) {
// 8. 需要遍历当前 element 对象的 cities 数组
$(element.cities).each(function (index, element) {
// 9. 查看 element 对象的中 c_id 和 c_name 数据, 并完成 option 对象的字符串书写
// console.log(element.c_id + " = " + element.c_name);
var city = "<option value='"+element.c_id+"'>"+element.c_name+"</option>";
// 10. 将新建的 city 标签对象, 拼接到 city 的选项标签内部.
$("#city").append(city);
});
}
});
});
});
</script>
