jQuery 元素操作

2022-08-02 16:18:10 字數 2464 閱讀 9015

jquery 元素操作主要講的是用jquery方法,操作標籤的遍歷、建立、新增、刪除等操作。

jquery 隱式迭代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作,就需要用到遍歷。

語法1

注意:此方法用於遍歷 jquery 物件中的每一項,**函式中元素為 dom 物件,想要使用 jquery 方法需要轉換。

語法2

注意:此方法用於遍歷 jquery 物件中的每一項,**函式中元素為 dom 物件,想要使用 jquery 方法需要轉換。

演示**

12

3$(function() )

console.log(sum);

// 2. $.each() 方法遍歷元素 主要用於遍歷資料,處理資料

// $.each($("div"), function(i, ele) );

// $.each(arr, function(i, ele) )

$.each(, function(i, ele) )

})

把所有文字框中的值相加就是總額數量,總計同理。

文字框裡面的值不同,如果想要相加需要用 each() 遍歷,宣告乙個變數做計數器,累加即可。

點選+號-號,會改變總計和總額,如果使用者修改了文字框裡面的值同樣會改變總計和總額

因此可以封裝乙個函式求總計和總額,以上2個操作呼叫這個函式即可.

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

要注意普通元素裡面的內容要去掉¥並且轉換為數字型才能相加

// 封裝乙個函式

function getsum() );

$(".p-sum").each(function (i, ele) )

}

jquery方法操作元素的建立、新增、刪除方法很多,我們重點使用部分,如下:

語法總和

注意:以上只是元素的建立、新增、刪除方法的常用方法,其他方法請參詳api。

案例**

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

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

3.商品後面的刪除按鈕: 一定是刪除當前的商品,所以從 $(this) 出發

4.刪除選中的商品: 先判斷小的核取方塊按鈕是否選中狀態,如果是選中,則刪除對應的商品

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

6.每次清除都需要重新計算總額和總數,所以要呼叫之前封裝好的函式

// (1). 商品後面的刪除按鈕 

$(".p-action a").click(function () );

// (2).刪除選中的商品

$(".remove-batch").click(function () );

// (3).刪除全部商品

$(".clear-all").click(function () )

1.核心思路:選中的商品新增背景,不選中移除背景即可

2.全選按鈕點選:如果全選是選中的,則所有的商品新增背景,否則移除背景

3.小的核取方塊點選: 如果是選中狀態,則當前商品新增背景,否則移除背景

4.這個背景,可以通過類名修改,新增類和刪除類

$(".checkall").change(function ()  else ;

});$(".j-checkbox").change(function () else ;

// 如果小核取方塊被選中,則給當前商品新增背景類名 .check-cart-item

if ($(this).prop("checked")) else ;

});

jQuery操作元素

對於元素屬性的操作 attr 屬性名 獲得屬性 如 a attr href 獲得鏈結的內容 removeattr 屬性名 刪除此屬性 如 a removeattr href 移除href屬性 2.對於元素內容的操作 dd html 獲得元素的html內容 dd html 哈哈哈 設定元素的html內...

jQuery操作元素

獲取內容 test text test html test val 獲取屬性 test attr href 設定或者修改屬性 attr disabled disabled removeattr checked input select在value值變化時可以呼叫不同的函式 change functi...

jQuery 元素操作

一.高度和寬度 獲取高度 div height 高度 div width 寬度 設定高度 div height 300 div height 300px 有沒有單位都可以 獲取高度和寬度,沒有引數 結果300 number型別 如果要進行數 算,要用這個方法 二.座標值 獲取位置值的兩種方式 1 o...