jQuery页面元素操作之遍历元素

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_33979745

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量349

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9592287.html

版权

本篇接上篇聊聊如何使用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 {
            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>

转载于:https://www.cnblogs.com/johnvwan/p/9592287.html

weixin_33979745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery页面元素操作之遍历元素

本篇接上篇聊聊如何使用jQuery遍历页面元素。四.遍历元素在 DOM 元素操作中，有时需要对同一标记的全部元素进行统一操作。在传统的JavaScript 中，先获取元素的总长度，然后以 for 循环语句递减总长度，访问其中的某个元素，代码相对复杂；而在 jQuery 中，可以直接使用 each() 方法实现元素的遍历。其语法格式如下：each(callback)其中...
复制链接

扫一扫