一、遍历DOM!
1-1：代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询DOM信息</title>
<link rel = "stylesheet" href="">
<script src = ./js/jquery-3.4.1.min.js type = "text/javascript"></script>
</head>
<body>
<input type = "text" name="username" id = "username" class = "input-text" my-user="张三" value="我的用户名">
<input type = "password" name="password" >
<p class="area city">广州</p>
<p style="color:#f00;">深圳</p>
<p class="area">长沙</p>
<p class="area" id = 'beij'>北京</p>
<p class="info" id = "info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(document).ready(function(){
var pList = $('p');
// //第一个p元素
// var p1 = pList.get(0);
// console.log(p1);
// var p3 = pList.get(2);
// console.log(p3);
console.log(pList);
console.log('总共有几个：',pList.length)
// for循环遍历
for (var i=0;i<pList.length;i++){
var item = pList[i];
console.log(item)
}
//each函数循环遍历
console.log("第一种表达方式----------------");
pList.each(function (index,value) {
console.log(index,value)
});
console.log("第二种表达方式，第一个参数为jquery对象");
$.each(pList,function (index,value) {
console.log(index,value)
})
})
</script>
</body>
</html>
image.png
二、find的使用
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查询DOM信息</title>
<link rel = "stylesheet" href="">
<script src = ./js/jquery-3.4.1.min.js type = "text/javascript"></script>
</head>
<body>
<input type = "text" name="username" id = "username" class = "input-text" my-user="张三" value="我的用户名">
<input type = "password" name="password" >
<p class="area city">广州</p>
<p style="color:#f00;">深圳</p>
<p class="area">长沙 <span>测试数据：</span></p>
<p class="area" id = 'beij'>北京</p>
<p class="info" id = "info">
查看详细
<span>内容：</span>
<small>文字描述</small>
</p>
<script>
$(document).ready(function(){
//find的使用
var list = pList.find('span');
console.log(list)
})
</script>
</body>
</html>
image.png
网友评论