jQuery页⾯元素操作之遍历元素
本篇接聊聊如何使⽤jQuery遍历页⾯元素。
四.遍历元素
在 DOM 元素操作中，有时需要对同⼀标记的全部元素进⾏统⼀操作。在传统的JavaScript 中，先获取元素的总长度，然后以 for 循环语句递减总长度，访问其中的某个元素，代码相对复杂；⽽在 jQuery 中，可以直接使⽤ each() ⽅法实现元素的遍历。其语法格式如下：
each(callback)
其中，参数 callback 是⼀个 function 函数，该函数还可以接受⼀个形参 index，此形参为遍历元素的序号（从 0 开始）；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取。如下⽰例演⽰了调⽤ each() ⽅法遍历全部元素获取每个元素属性的过程。
<!doctype html>
<html>
<head>
<title>遍历元素</title>
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<style type="text/css">
body {
font-size: 13px
}
img {jquery在一个元素后追加标签
border: solid 1px #ccc;
padding: 3px;
margin: 5px;
width: 143px;
height: 101px
}
</style>
<script type="text/javascript">
$(function () {
$("img").each(function (index) {
//根据形参 index设置元素的 title属性
this.title = "第 " + index + "幅风景图⽚，alt内容是 " + this.alt;
})
})
</script>
</head>
<body>
<p>
<img src="Images/img05.jpg" alt="第0幅风景画 "/>
<img src="Images/img06.jpg" alt="第1幅风景画 "/>
<img src="Images/img07.jpg" alt="第2幅风景画 "/></p>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。