主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
语法1：
$("div").each(function (index, domEle) { xxx; }）
1. each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数： index是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
它是自动给我们数组设置了索引号
dom元素对象，所以不能使用jQuery方法
可以转换为jq对象然后使用方法
这里是要转换的，因为字符与数字相加比较特殊，要转换
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
// 1. each() 方法遍历元素
var sum=0
var arr=["red","blue","green"]
$("div").each(function(i,domEle){
// 回调函数第一个参数一定是索引号 可以指定索引号名
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是dom元素对象 、
// console.log(domEle);所以不能使用jQuery方法
console.log(domEle)
$(domEle).css("color",arr[i])
sum+=parseInt($(domEle).text());
})
console.log(sum)
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
})
</script>语法2：
$.each(object，function (index, element) { xxx; }）
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有2个参数： index是每个元素的索引号; element 遍历内容
以后遍历dom对象用第一种，遍历 数组，对象用第二种。
案例：购物车案例模块-计算总计和总额
①核心思路：把所有文本框里面的值相加就是总计数量。总额同理
②文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
③点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
④因此可以封装一个函数求总计和总额的， 以上2个操作调用这个函数即可。
⑤注意1： 总计是文本框里面的值相加用val() 总额是普通元素的内容用text()
⑥要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
$(function(){
// 1.全选 全选功能模块
// 就是把全选按钮（checkall）的状态赋值给三个小按钮（j-checkbox）就可以了
// s事件可以是哟共change
$(".checkall").change(function(){
var a= $(this).prop("checked");
$(".j-checkbox,.checkall").prop("checked",a)//并集选择器 自己也选上
})
// 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function(){
// console.log($(".j-checkbox:checked").length) 所有小复选框的个数
if($(".j-checkbox:checked").length===$(".j-checkbox").length){
$(".checkall").prop("checked",true)
}else{
$(".checkall").prop("checked",false)
}
});
// 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
$(".increment").click(function(){
// 得到当地兄弟文本框的值 现在的值为1
var n=$(this).siblings(".itxt").val();
// console.log(n)
n++;
$(this).siblings(".itxt").val(n)
// 每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计
// var p=$(this).parent().parent().siblings(".p-price").text().substr(1)*n;
var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n
// console.log(p)
// 小计模块
// $(this).parent().parent().siblings(".p-sum").html("￥"+p)
$(this).parents(".p-num").siblings(".p-sum").html("￥"+p.toFixed(2))
getSum();
})
// 减法
$(".decrement").click(function(){
// 得到当地兄弟文本框的值 现在的值为1
var n=$(this).siblings(".itxt").val();
// console.log(n)
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n)
// var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n;
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p)
p = p.substr(1)
// 小计模块
$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
getSum();
// $(this).siblings(".itxt").val(n)
})
// 4.用户修改文本框的值 计算 小计模块
$(".itxt").change(function(){
// 用最新的表单内的值 乘以 单价即可 但是还是当前商品小计
n=$(this).val();
var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n
$(this).parents(".p-num").siblings(".p-sum").html("￥"+p.toFixed(2))
getSum();
})
// 5.计算总计和总额模块
getSum();
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){
money+=parseInt($(ele).text().substr(1));
})
$(".price-sum em").text("￥"+money.toFixed(2))//.text(money)就是修改为我们的money
}
})创建元素
语法：
$(''<li></li>'');
创建li但是没有添加
添加元素
1.内部添加
element.append(''内容'')
把内容放入匹配元素内部最后面，类似原生appendChild。
element.prepend(''内容'')
把内容放入匹配元素内部最前面。
2.外部添加
element.after(''内容'') // 把内容放入目标元素后面
element.before(''内容'') // 把内容放入目标元素前面
①内部添加元素，生成之后，它们是父子关系。
②外部添加元素，生成之后，他们是兄弟关系。
删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
①remove删除元素本身。
②empt()和 html('''')作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。
购物车案例模块-删除商品模块
①核心思路：把商品remove()删除元素即可
②有三个地方需要删除：1.商品后面的删除按钮2.删除选中的商品3.清理购物车
③商品后面的删除按钮： 一定是删除当前的商品，所以从$(this)出发
④删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品
⑤清理购物车： 则是把所有的商品全部删掉
// 6.删除商品模块
// 商品后面的删除按钮
$(".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();
})
购物车案例模块-选中商品添加背景
①核心思路：选中的商品添加背景，不选中移除背景即可
②全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景
③小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景
④这个背景，可以通过类名修改，添加类和删除类
if($(this).prop("checked")){
// 让所有商品添加check-cart-item类名
$(".cart-item").addClass("check-cart-item");
}else{
// check-cart-item移除
$(".cart-item").removeClass("check-cart-item")
}