jQuery 元素操做

時間 2020-10-06

標籤 css html app dom 函數 this atom spa htm 對象欄目 JQuery 简体版

原文原文鏈接

jQuery 元素操做主要講的是用jQuery方法，操做標籤的遍歷、建立、添加、刪除等操做。css

1、遍歷元素

jQuery 隱式迭代是對同一類元素作了一樣的操做。若是想要給同一類元素作不一樣操做，就須要用到遍歷。html

語法1app

注意：此方法用於遍歷 jQuery 對象中的每一項，回調函數中元素爲 DOM 對象，想要使用 jQuery 方法須要轉換。dom

語法2函數

注意：此方法用於遍歷 jQuery 對象中的每一項，回調函數中元素爲 DOM 對象，想要使用 jQuery 方法須要轉換。this

演示代碼atom

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 若是針對於同一類元素作不一樣操做，須要用到遍歷元素（相似for，可是比for強大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍歷元素 
            $("div").each(function(i, domEle) {
                // 回調函數第一個參數必定是索引號 能夠本身指定索引號號名稱
                // console.log(i);
                // 回調函數第二個參數必定是 dom 元素對象，也是本身命名
                // console.log(domEle); // 使用jQuery方法須要轉換 $(domEle)
                $(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>

2、案例：購物車案例模塊-計算總計和總額

把全部文本框中的值相加就是總額數量，總計同理。spa

文本框裏面的值不一樣，若是想要相加須要用 each() 遍歷，聲明一個變量作計數器，累加便可。htm

點擊+號-號,會改變總計和總額,若是用戶修改了文本框裏面的值一樣會改變總計和總額對象

所以能夠封裝一個函數求總計和總額,以上2個操做調用這個函數便可.

注意 :總計是文本框裏面的值相加用val() ,總額是普通元素的內容用text()

要注意普通元素裏面的內容要去掉￥而且轉換爲數字型才能相加

 // 封裝一個函數
    function getSum() {
        var count = 0; //總數
        var money = 0; //總額
        $(".itxt").each(function (i, ele) {
            //遍歷每一個商品的數量 相加 賦值給總計
            count += parseInt($(ele).val());
            $(".amount-sum em").text(count);
       });
        $(".p-sum").each(function (i, ele) {
            // 遍歷每一個商品小計 相加 賦值給總額 substr(1)去掉￥ toFixed(2)取兩位小數
            money += parseFloat($(ele).text().substr(1));
            $(".price-sum em").text("￥" + money.toFixed(2));
       })
   }

3、建立、添加、刪除

jQuery方法操做元素的建立、添加、刪除方法不少，咱們重點使用部分，以下：

語法總和

注意：以上只是元素的建立、添加、刪除方法的經常使用方法，其餘方法請參詳API。

案例代碼

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 建立元素
            var li = $("<li>我是後來建立的li</li>");
      
            // 2. 添加元素
            //  2.1 內部添加
            // $("ul").append(li); 內部添加而且放到內容的最後面 
            $("ul").prepend(li); // 內部添加而且放到內容的最前面
            // 2.2 外部添加
            var div = $("<div>我是後媽生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 刪除元素
            // $("ul").remove(); 能夠刪除匹配的元素 自殺
            // $("ul").empty(); // 能夠刪除匹配的元素裏面的子節點 孩子
            $("ul").html(""); // 能夠刪除匹配的元素裏面的子節點 孩子
       })
    </script>
</body>

4、案例：購物車案例模塊-刪除商品模塊

1.核心思路：把商品remove() 刪除元素便可

2.有三個地方須要刪除： 1. 商品後面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車

3.商品後面的刪除按鈕：必定是刪除當前的商品，因此從 $(this) 出發

4.刪除選中的商品：先判斷小的複選框按鈕是否選中狀態，若是是選中，則刪除對應的商品

5.清理購物車：則是把全部的商品所有刪掉

6.每次清除都須要從新計算總額和總數，因此要調用以前封裝好的函數

 // (1). 商品後面的刪除按鈕 
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
   });
    // (2).刪除選中的商品
    $(".remove-batch").click(function () {
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
   });
    // (3).刪除所有商品
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
   })

5、案例：購物車案例模塊-選中商品添加背景

1.核心思路：選中的商品添加背景，不選中移除背景便可

2.全選按鈕點擊：若是全選是選中的，則全部的商品添加背景，不然移除背景

3.小的複選框點擊：若是是選中狀態，則當前商品添加背景，不然移除背景

4.這個背景，能夠經過類名修改，添加類和刪除類

 $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox,.checkall").prop("checked", $(this).prop('checked'));
        // 若是全選框被選中，則給全部商品添加背景類名 .check-cart-item
        if ($(this).prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
       } else {
            // 不然移除類名
            $(".cart-item").removeClass("check-cart-item");
       };
   });
    $(".j-checkbox").change(function () {
        // 每次改變小複選框狀態都要判斷小複選框是否全被選中
        // 若是小複選框選中的個數等於全部小複選框個數，則選中全選按鈕 不然不選中
        // .j-checkbox:checked 選中的複選框
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
       } else {
            $(".checkall").prop("checked", false);
       };
        // 若是小複選框被選中，則給當前商品添加背景類名 .check-cart-item
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
       } else {
            // 不然移除類名
            $(this).parents(".cart-item").removeClass("check-cart-item");

       };
   });