jQuery 순회 방법

each() 메소드:

$.each(배열/객체, 함수 처리); //$객체 호출됨

$(selector).each(함수 처리); //jquery 객체 호출됨

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
        //① 遍历对象
        //$.each(对象,function(k对象属性变量,v对象属性值变量){});
        var cat = {name:'kitty',age:5,climb:function(){console.log('在爬树');}};

        jQuery.each(cat,function(k,v){
            console.log(k+'---'+v);
        });

        //② 遍历数组
        //$.each(数组,function(k元素下标变量,v元素值变量){});
        var color = ['red','blue','green'];
        jQuery.each(color,function(m,n){
            console.log(m+'---'+n);
        });
}
        window.onload = function(){
            //③ 遍历"jquery对象"
            //$('li').each(function(w dom对象下标索引值,f代表具体的每个dom对象){});
            $('li').each(function(w,f){
                //this代表遍历出来的每个“dom对象”
                //this ----> f
                //this ----> li对象(dom对象)
                console.log(w+"---"+f+"---"+this);
                f.style.color = "blue";
            });
        }
      
        </script>
        <style type="text/css">
        div {width:300px;height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <h2>each遍历方法</h2>
        <div id="apple"></div>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>
        <input type="button" value="触发1" onclick="f1()" />
    </body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ //① 遍历对象 //$.each(对象,function(k对象属性变量,v对象属性值变量){}); var cat = {name:'kitty',age:5,climb:function(){console.log('在爬树');}}; jQuery.each(cat,function(k,v){ console.log(k+'---'+v); }); //② 遍历数组 //$.each(数组,function(k元素下标变量,v元素值变量){}); var color = ['red','blue','green']; jQuery.each(color,function(m,n){ console.log(m+'---'+n); }); } window.onload = function(){ //③ 遍历"jquery对象" //$('li').each(function(w dom对象下标索引值,f代表具体的每个dom对象){}); $('li').each(function(w,f){ //this代表遍历出来的每个“dom对象” //this ----> f //this ----> li对象(dom对象) console.log(w+"---"+f+"---"+this); f.style.color = "blue"; }); } </script> <style type="text/css"> div {width:300px;height:200px; background-color:pink;} </style> </head> <body> <h2>each遍历方法</h2> <div id="apple"></div> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> <input type="button" value="触发1" onclick="f1()" /> </body> </html>

제출하다 코드 재설정

자동운전