jQuery学习--003

jQuery属性操作

1.1设置或获取元素的固有属性值prop()

1. 获取属性值语法

prop("属性")

2. 设置属性值方法

prop("属性","属性值")

1.2设置或获取元素的自定义属性attr()

例如 index=1,也可以获得h5自定义属性 data-index=2

1. 获取属性值语法

attr("属性");//类似于原生getAttribute()

2. 设置属性值方法

attr("属性","属性值");//类似于原生setAttribute()

1.3数据缓存data()

• 在匹配元素上存储任意相关数据.
• 存放在元素内存里，dom显示不出来
• $(“body”).data(“foo”, 52);//将52存在名字为foo的变量里
• 这个方法可以获取h5自定义属性，data-index,返回的是数字，不用写data-

jQuery内容文本值

2.1普通元素内容html()（相当于原生innerHTML）

html()//获取元素内容
html("内容")//设置元素内容

2.2普通元素文本内容text()（相当于原生 innerTEXT）

text()//获取元素文本内容
text("内容")//设置元素文本内容

2.3获取设置表单的值val()（相当于原生value）

$("input").val()//获取表单的值
$("input").val("内容")//设置表单值

设置购物车的商品数量，价格

• 利用val()获取表单input的值，并修改
• toFixed(2)保留两位有效数字
• 注意考虑Input认为改动数字的价格变化,change()

$(function() {
	//数量增
	$(".plus").click(function() {
		var n = $(this).siblings(".itxt").val();
		n++;
		$(this).siblings(".itxt").val(n);
		
		var price = $(this).parents().siblings(".yui3-u-1-8").children(".price").html();
		var sum = (n*price).toFixed(2);
		//设置总价
		$(this).parents().siblings(".yui3-u-1-8").children(".sum").html(sum);

	});
	//数量减
	$(".mins").click(function() {
		var n = $(this).siblings(".itxt").val();
		if(n == 1) {
			return false;
		}
		n--;
		$(this).siblings(".itxt").val(n);
		var price = $(this).parents().siblings(".yui3-u-1-8").children(".price").html();
		var sum = (n*price).toFixed(2);
		//设置总价
		$(this).parents().siblings(".yui3-u-1-8").children(".sum").html(sum);
	});
	//价格小计
	$(".itxt").change(function() {
		var n = $(this).val();
		var price = $(this).parents().siblings(".yui3-u-1-8").children(".price").html();
		var sum = (n*price).toFixed(2);
		//设置总价
		$(this).parents().siblings(".yui3-u-1-8").children(".sum").html(sum);
	});
});