jQuery 元素操作——遍歷元素

小草dym發表於2020-11-29
jQuery

jQuery 元素操作

主要是遍歷、建立、新增、刪除元素操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // $("div").css("color", "red");
            // 如果針對於同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強大）
            var sum = 0;
            // 1. each() 方法遍歷元素 
            var arr = ["red", "green", "blue"];
            $("div").each(function(i, domEle) {
                // 回撥函式第一個引數一定是索引號  可以自己指定索引號號名稱
                // console.log(index);
                // console.log(i);
                // 回撥函式第二個引數一定是 dom元素物件 也是自己命名
                // console.log(domEle);
                // domEle.css("color"); dom物件沒有css方法
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍歷元素 主要用於遍歷資料，處理資料
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);

            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);


            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 輸出的是 name age 屬性名
                console.log(ele); // 輸出的是 andy  18 屬性值


            })
        })
    </script>
</body>

</html>

相關文章