jQuery网页开发案例:jQuery常用API--jQuery文本属性值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()（ 相当于原生inner HTML)

html()             // 获取元素的内容

html(''内容'')   // 设置元素的内容

2. 普通元素文本内容 text()   (相当与原生 innerText)

text()                     // 获取元素的文本内容

text(''文本内容'')   // 设置元素的文本内容

3. 表单的值 val()（ 相当于原生value)

val()              // 获取表单的值

val(''内容'')   // 设置表单的值

 一句话不写在括号里面的获取，写在括号里面打印出来

 <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
       console.log($("div").html())
	   // 修改
	   $("div span").html("123")
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text())
		// 修改
		$("div").text("1234")
        // 3. 获取设置表单值 val()
		console.log($("div").val())
        $("input").val("123")
    </script>

案例：购物车案例模块-增减商品数量

①核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。

②注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。

③修改表单的值是val() 方法

④注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值

 ⑤减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。

$(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)
	})
	// 减法
	$(".decrement").click(function(){
		// 得到当地兄弟文本框的值 现在的值为1
		var n=$(this).siblings(".itxt").val();
		// console.log(n)
	
		if(n==1){
			return false;
		}else{
				n--;
		}
		$(this).siblings(".itxt").val(n)
	})
})

 购物车案例模块-修改商品小计

①核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格  就是 商品的小计

②注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum） 

③修改普通元素的内容是text() 方法

④注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)

⑤parents(‘选择器’) 可以返回指定祖先元素 

⑥最后计算的结果如果想要保留2位小数 通过 toFixed(2)  方法

⑦用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件

⑧用最新的表单内的值 乘以 单价即可  但是还是当前商品小计

爸爸的爸爸的兄弟

 

加减实现

	// 首先声明一个变量，当我们点击+号（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;
		// console.log(p)
		// 小计模块
		$(this).parent().parent().siblings(".p-sum").html("￥"+p)
	})
	// 减法
	$(".decrement").click(function(){
		// 得到当地兄弟文本框的值 现在的值为1
		var n=$(this).siblings(".itxt").val();
		// console.log(n)
	
		if(n==1){
			return false;
		}else{
			n--;
			var p=$(this).parent().parent().siblings(".p-price").text().substr(1)*n;
			// console.log(p)
			// 小计模块
			$(this).parent().parent().siblings(".p-sum").html("￥"+p)
		}
		$(this).siblings(".itxt").val(n)
	})

 但是这样的做法太麻烦了，能不能直接返回祖先元素

parents(‘选择器’) 可以返回指定祖先元素可以返回所有组先元素

 保留两位小数  toFixed(2) 可以保留两位小数

直接输入就有bug因此还要加入change事件 

完整代码

$(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))
	})
	// 减法
	$(".decrement").click(function(){
		// 得到当地兄弟文本框的值 现在的值为1
		var n=$(this).siblings(".itxt").val();
		// console.log(n)
	
		if(n==1){
			return false;
		}else{
			n--;
			var p=$(this).parents(".p-num").siblings(".p-price").text().substr(1)*n;
			var price=p.toFixed(2)
			// console.log(p)
			// 小计模块
			$(this).parents(".p-num").siblings(".p-sum").html("￥"+price)
		}
		$(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))
	})
})