jQuery中隐式迭代与each方法的区别

最新推荐文章于 2022-03-09 10:46:26 发布

包淼淼

最新推荐文章于 2022-03-09 10:46:26 发布

阅读量790

点赞数

本文链接：https://blog.csdn.net/qq_32849999/article/details/80104511

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        li {
            width: 100px;
            height: 100px;
            background-color: gold;
            margin-right: 10px;
            float: left;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //隐式迭代--内部帮助我们循环遍历做（相同）操作
              $('#btn').click(function(){
         $('p').text('为了新中国').css('background', 'blue');
     });



            //每个元素做不同操作的时候，使用each方法，帮助遍历jQuery对象
            //each方法就是用来遍历jQuery对象的，但是里面的每个对象最开始都是DOM对象，如果想要使用jQuery的方法，需要把DOM对象转jQuery对象
            //获取所有的li，针对每个li的透明度进行设置
            $("#uu>li").each(function (index,ele) {
                //参数1：索引，参数2：对象
                // console.log(arguments[0]+"==="+arguments[1]);
                //每个li的透明度不一样
                 opacity=(index+1)/10;
                 $(ele).css("opacity",opacity);
            });

        });
    </script>
</head>
<body>
<input type="button" value="设置p" id="btn">
<p>q</p>
<p>w</p>
<p>r</p>
<p>t</p>
<p>y</p>
<ul id="uu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>


</body>
</html>

包淼淼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery中隐式迭代与each方法的区别

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { margin: 0;
复制链接

扫一扫