jQuery each遍历方法

详细注释在源码中,共分为:遍历数组、遍历对象和遍历jQuery对象三部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
       //1.遍历数组
        //正常用 for循环  for in等方法
        // $.each(数组,function(k每个元素下标,v每个元素的值){});
        var color = ['gold','yello','orange','blue'];
        $.each(color,function(k,v){
            //遍历的主体实现
            console.log(k+'---'+v);
        });


        //2.遍历对象
        // $.each(对象,function(K成员名称,V成员值){});
        var cat = {name:'kitty',color:'white',climb:function(){console.log('会爬树')}};
        $.each(cat,function (k,v) {
            console.log(k+'---'+v);
        });



       var clr = ['red','blue','pink','purple','yellow','orange','gray'];
        //3.遍历jquery对象
        window.onload = function () {
            //$().each(function(k代表dom对象下标,v代表dom对象){});
            $('li').each(function(k,v){
                //console.log(k+'---'+v);   输出为0,1,2,3 ---[object HTMLLIElement]

                //this关键字,下面输出后发现this是指向了v
                console.log('this --'+this);
                //所以这样是可行的
                //this.style.color = 'red';
                //这样也是可行的
                $(this).css('background',clr[Math.floor(Math.random()*7)]);  //随机颜色


                //因为V是一个dom对象,所以可以这样
                //v.style.color = 'blue';
                //用dom对象变jQuery对象的方法来处理
                //$(v).css('background','lightgreen');
            });
        }
    </script>
</head>
<body>
<h2>each遍历方法</h2>
<ul>
    <li>石家庄</li>
    <li>济南</li>
    <li>郑州</li>
    <li>西安</li>
</ul>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND