jQuery网页开发案例:jQuery常用API--jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

 遍历元素

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")
		}