jQuery元素操作

jQuery元素操作

1. 遍历元素

1.1 说明

image-20230320191009949

1.2 语法1

image-20230320191029336

1.3 语法2

image-20230320191046351

1.4 代码解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.js"></script>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span>
<span>2</span>
<span>3</span>
<script>
$(function () {
// jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
$('div').css('color', 'red');

// 语法1:
// $("div").each(function (index, domEle) { xxx; })
var sum = 0
var arr = ['red', 'green', 'blue'];
$('div').each(function (index, domEle) {
// 回调函数第一个参数一定是索引号,索引号可以自定义
console.log(index);
// 回调函数第二个参数一定是Dom对象
console.log(domEle);
$(domEle).css('color', arr[index]);
sum += parseInt($(domEle).text())
})
console.log(sum);
// 1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
// 2. 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
// 3. 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)

// 语法2:
// $.each(object,function (index, element) { xxx; })
var array=['10px', '20px', '30px']
$.each($('span'), function (index, element) {
$(element).css('font-size', array[index])
})
// 1. $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
$.each(array, function (index, element) {
console.log(index);
console.log(element);
})
// 2. 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
var data={
name:'andy',
age:18
}
$.each(data, function (index, element) {
console.log(index);//输出属性名
console.log(element);//输出属性值
})
})
</script>
</body>

</html>

1.5 案例:购物车案例模块-计算总计和总额

image-20230320191221163

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 总计总额
function getSum() {
var count = 0 //计算件数
$('.itxt').each(function (index, domEle) {
var price = $(domEle).val()
count += parseInt(price)
})
$('.amount-sum').children('em').text(count)

var money = 0 //计算总额
$('.p-sum').each(function (index, domEle) {
var totalPrice = $(domEle).text()
totalPrice = totalPrice.substr(1)
money += parseFloat(totalPrice)
})
$('.price-sum').children('em').text('¥' + money.toFixed(2))
}
  • 所有有关购物车的操作都要调用这个函数

2. 创建元素

image-20230320191248509

3. 添加元素

image-20230320191259533

image-20230320191305086

4. 删除元素

image-20230320191316304

5. 创建、添加、删除代码解释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.6.0.js"></script>
</head>

<body>
<ul>
<li class="first">第一个li</li>
</ul>
<div class="test">第一个div</div>
<script>
$(function () {
// 1.创建元素
// 语法:
// $('' < li ></li > '');
// 动态的创建了一个 < li >
var li=$('<li>第二个li</li>');
var div=$('<div>第二个div</div>');

// 2.添加元素

// 2.1 内部添加
// element.append(''内容'')
// 把内容放入匹配元素内部最后面,类似原生 appendChild。
// element.prepend(''内容'')
// 把内容放入匹配元素内部最前面。
// ① 内部添加元素,生成之后,它们是父子关系。
$('ul').append(li)
$('ul').prepend(li)

// 2.2 外部添加
// element.after(''内容'') // 把内容放入目标元素后面
// element.before(''内容'') // 把内容放入目标元素前面
// ② 外部添加元素,生成之后,他们是兄弟关系。
// $('div').after(div)
$('div').before(div)

// 3.删除元素
// element.remove() // 删除匹配的元素(本身)
$('.first').remove()
// element.empty() // 删除匹配的元素集合中所有的子节点
$('ul').empty()
// element.html('''') // 清空匹配的元素内容
$('div').html('')
// ① remove 删除元素本身。
// ② empt() 和 html('''') 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
})
</script>
</body>

</html>

6. 案例分析

6.1 购物车案例模块-删除商品模块

6.11 思路

image-20230320191418597

6.12 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
// 删除商品模块
// ① 核心思路:把商品remove() 删除元素即可
// ② 有三个地方需要删除: 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
// ③ 商品后面的删除按钮: 一定是删除当前的商品,所以从 $(this) 出发
// ④ 删除选中的商品: 先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品
// ⑤ 清理购物车: 则是把所有的商品全部删掉

// 删除商品
$('.p-action a').click(function () {
$(this).parents('.cart-item').remove()

// 总计总额回调函数
getSum()
})

// 删除选中商品
$('.remove-batch').click(function () {
$('.j-checkbox:checked').parents('.cart-item').remove()

// 总计总额回调函数
getSum()
})

// 删除所有商品
$('.clear-all').click(function () {
$('.cart-item').remove()

// 总计总额回调函数
getSum()
})
</script>

6.2 购物车案例模块-选中商品添加背景

6.21 思路

image-20230320191620881

6.22 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script>
// js
// 1. 全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
// 获取元素
// var all = document.querySelectorAll('.checkall')
// var inputbox = document.querySelectorAll('.j-checkbox')
// var checkBg=document.querySelectorAll('.cart-item')
// for (var i = 0; i < all.length; i++) {
// all[i].onclick = function () {
// for (var i = 0; i < inputbox.length; i++) {
// // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
// inputbox[i].checked = this.checked
// }

// for (var i = 0; i < all.length; i++) {
// all[i].checked = this.checked
// }

// for(var i=0; i < checkBg.length; i++) {
// checkBg[i].classList.toggle('check-cart-item')
// }
// }
// }

// // 2. 下面复选框需要全部选中, 上面全选才能选中做法:
// // 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
// for (var i = 0; i < inputbox.length; i++) {
// inputbox[i].onclick = function () {
// // flag 控制全选按钮是否选中
// var flag = true;
// // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
// for (var i = 0; i < inputbox.length; i++) {
// if (!inputbox[i].checked) {
// flag = !flag
// // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
// break
// }
// }
// for (var i = 0; i < all.length; i++) {
// all[i].checked = flag
// }

// this.parentNode.parentNode.classList.toggle('check-cart-item')
// }
// }

// jquery
$(function () {
// ① 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走。
// ② 因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
// ③ 把全选按钮状态赋值给3小复选框就可以了。
// ④ 当我们每次点击小的复选框按钮,就来判断:
// ⑤ 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
// ⑥ :checked 选择器 :checked 查找被选中的表单元素。
$('.checkall').change(function () {
$('.j-checkbox,.checkall').prop('checked', $(this).prop('checked'));

// 切换背景
if ($('.checkall:checked').length === $('.checkall').length) {
$('.cart-item').addClass('check-cart-item')
} else {
$('.cart-item').removeClass('check-cart-item')
}
})

$('.j-checkbox').change(function () {
if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
$('.checkall').prop('checked', true);
} else {
$('.checkall').prop('checked', false);
}
})

// 切换背景
$('.j-checkbox').click(function () {
$(this).parents('.cart-item').toggleClass('check-cart-item')
})
})
</script>