jQuery使用
常用的方法總結(jié)
1,元素選擇器
第一種:向下選擇
(1),直接選擇緊挨著的子元素
$('.元素類名').children('.子元素類名')
$('.元素類名').children('子元素標(biāo)簽類型')
(2),選擇非緊挨著的子元素绷杜、孫元素,或者重孫元素(的值)
('.元素類名').find('.要選擇的元素名稱').text() //.text()方法獲取元素的值 適用于大部分標(biāo)簽
(3),層層子元素依次下選
$('.元素類名').children('.子元素類名').children('.子元素類名')
(4),選擇某個元素的下一個元素或者上一個元素 調(diào)用next()或者是prev()方法
$('#元素id').next()
第二種,向上選擇
(1),選擇父級元素 parents包含很多父級元素 是一個集合
==$('.元素類名').parents('ul').find('.元素類名')==
第三種,選擇特定元素
(1),選擇checkbox find(':checkbox')
==$('.settlements').find(':checkbox')==
(2),選擇被選中的checkbox find(':checked')
==$('.cart_list_td').find(':checked').parents('ul').each(function () {})==
2宾娜,元素的事件監(jiān)聽
(1)偏形,點擊事件添加
==$('.add').click(function () {})==
(2)仙粱,鍵盤焦點獲取 focus()
$('.num_show').focus(function () {
pre_count = $(this).val()
})
(3)鍵盤焦點消失
$('.num_show').blur(function () {
// 獲取商品的id和商品的數(shù)量
sku_id = $(this).attr('sku_id')
count = $(this).val()
})
(4),checkbox選擇狀態(tài)的改變 change()
$('.cart_list_td').find(':checkbox').change(function () {
})
3蚪黑,屬性獲取和自定義屬性添加與獲取
(1),獲取原有屬性 prop('屬性名')
sku_ul.find(':checkbox').prop('checked')
(2)添加屬性
//添加 直接綁定
<input type="text" class="num_show fl" sku_id='{{sku.id}}' value="{{ sku.count }}">
//獲取 使用attr
sku_id = $(this).next().attr('sku_id')
4,遍歷
例1 在哪個元素內(nèi)使用函數(shù) this就表示哪個函數(shù)
// 遍歷商品的對應(yīng)的checkbox,設(shè)置這些checkbox的選中狀態(tài)和全選的checkbox保持一致
$('.cart_list_td').find(':checkbox').each(function () {
$(this).prop('checked', is_checked)
})
例2
// 獲取所有被選中的商品的checkbox
// 獲取所有被選中的商品所在的ul元素
total_count = 0
total_price = 0
$('.cart_list_td').find(':checked').parents('ul').each(function () {
// 獲取商品的數(shù)目和小計
count = $(this).find('.num_show').val()
amount = $(this).children('.col07').text()
// 累加計算商品的總件數(shù)和總價格
count = parseInt(count)
amount = parseFloat(amount)
total_count += count
total_price += amount
})
// 設(shè)置被選中的商品的總件數(shù)和總價格
$('.settlements').find('em').text(total_price.toFixed(2))
$('.settlements').find('b').text(total_count)
5徐绑,刪除頁面元素
元素.remove()
6邪驮,獲取元素的個數(shù)
checked_len = $('.cart_list_td').find(':checked').length