jQuery属性操作
1.1设置或获取元素的固有属性值prop()
- 获取属性值语法
prop("属性")
- 设置属性值方法
prop("属性","属性值")
1.2设置或获取元素的自定义属性attr()
例如 index=1,也可以获得h5自定义属性 data-index=2
- 获取属性值语法
attr("属性");//类似于原生getAttribute()
- 设置属性值方法
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);
});
});