学习笔记: 方便日后查看

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素遍历</title>

    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            /*
            文档
        1. js的遍历方式
		    * for(初始化值;循环结束条件;步长)
		2. jq的遍历方式
            1. jq对象.each(callback)
                1. 语法：
                    jquery对象.each(function(index,element){

                    });
                        * index:就是元素在集合中的索引
                        * element：就是集合中的每一个元素对象

                        * this：集合中的每一个元素对象
                2. 回调函数返回值：
                    * true:如果当前function返回为false，则结束循环(break)。
                    * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
            2. $.each(object, [callback])
            3. for..of: jquery 3.0 版本之后提供的方式
                for(元素对象 of 容器对象)
             */


        //1.js对象的遍历方式
        //js方式获取ul下的li元素(二选一)
        //var citys = document.getElementsByTagName("li");//citys相当于存放li元素的数组
        //jq方式获取ul下的li元素(二选一)
        var citys = $("#city li");//citys相当于存放li元素的数组
            //2.for循环遍历li
            for (var i = 0; i < citys.length; i++) {
                //获取内容
                // alert(i+":"+citys[i].innerHTML);
                /*
                结果:
                    0:北京
                    1:上海
                    2:天津
                    3:重庆
                */

                //小案例 如果我们想要如果内容等于天津的话就退出循环 该怎么做呢?
                    /*if (citys[i].innerHTML === "天津"){
                        break;//直接退出循环
                        // continue;//跳过天津，直接遍历下一个城市
                    }
                    alert(i+":"+citys[i].innerHTML);*/
            }

        //2.jq对象遍历方式

            //2.1jq对象each遍历方式 : jq对象.each(callback)

                //2.1.1获取li对象 第一种方式 this
                /*citys.each(function () {
                    //alert(this.innerHTML);//这一种方式缺点：获得不到元素对应的索引了,只是弹出值

                    //jquery方法获取元素内容,jquery提供的方法比js多很多，所以最好就是用jquery的方式获取元素对象
                    //alert($(this).html());
                })*/

                //2.1.2获取li对象 第二种方式 在回调函数(function)中定义参数(index(索引) element(元素对象)) 推荐
                citys.each(function (index,element) {//我们这两个参数名你可以自己定，这里只是为了明确意思,当然第一个参数就是表示索引的，第二个参数是表示元素对象
                    //这是js方式获取innerHTML.我们可以用jquery的方式获取看看
                    //alert(index+":"+element.innerHTML);

                    //jquery的方式获取
                    // alert(index+":"+$(element).html());//一样的结果，都是获取标签体内容
                    /*
                    结果:
                        0:北京
                        1:上海
                        2:天津
                        3:重庆
                     */
                    //小案例 如果我们想要如果内容等于天津的话就退出循环 该怎么做呢?
                        /*if ($(element).html() === "天津"){
                            /!*如果当前function返回为false，则结束循环 相当于break
                            返回true，则结束本次循环 相当于continue*!/
                            // return false;
                            return true;
                        }
                        alert(index+":"+$(element).html());*/
                })
            //2.2jq对象全局each遍历方式 : $.each(object, [callback])
            /*解释:
                与上面一个each的区别:
                        多了一个object,上一个方法的each，调用者必须要是jq对象(即通过$()方式获取的),
                    而这个$.each方法，object可以是js的数组对象，也就是说即可以传递js对象，也可以是jq对象

                        当然了还有一些小区别，后续会更新
                使用：和上一个each方法没有区别，直接复制下来都可以，这里我就复制小案例了
            */
                /*$.each(citys,function (index,element) {
                    //小案例 如果我们想要如果内容等于天津的话就退出循环 该怎么做呢?
                    if ($(element).html() === "天津"){
                        // return false;//相当于for循环的break
                        return true;//相当于for循环的continue
                    }
                    alert(index+":"+$(element).html());
                })*/
            //2.3jq对象 for..of遍历方式: for(元素对象 of 容器对象) 注意:这是jquery 3.0 版本之后提供的方式
                for (li of citys){
                    alert($(li).html());
                    /*
                    结果:
                        北京
                        上海
                        天津
                        重庆
                     */
                }

        })
    </script>
    <style>
        *{
            background-color: darkgrey;
        }
    </style>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>