1. 详解jQuery-each()方法

     更新时间:2019年03月13日 16:15:53   作者:笑苍茫   我要评论

    这篇文章主要介绍了jQuery-each()方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    jquery中有隐式迭代,不需要我们再次对某些元素进行操作。但是如果涉及到不同元素有不同操作,需要进行each遍历。本文利用10个li设置不同的透明度的案例,对each方法进行说明。

     语法:

    $(元素).each(function(index,element){ });

    参数index:表示元素索引,在本例中是0-9

    参数element:表示对象,在本例中是每个li

    案例效果:

    代码如下

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
          li{
            width: 100px;
            height: 100px;
            background-color: green;
            list-style: none;
            float: left;
            margin-left: 10px;
          }
        </style>
    
        <script src="jquery-1.12.2.js"></script>
        <script type="text/javascript">
          $(function(){
            //页面加载后,让每个li的透明度发生改变
            $("li").each(function(index,element){
              //第一个参数是索引,第二个参数是对象
              $(element).css("opacity",(index+1)/10);
            })
          });
        </script>
      </head>
      <body>
        <ul>
          <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>

    以上所述是小编给大家介绍的jQuery-each()方法详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常?#34892;?#22823;家对脚本之家网站的支持!

    相关文章

    最新评论

    山东群英会开奖查询