jQuery属性操作
设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。
1.获取属性
prop（"属性"）
2.设置属性
prop（"属性"，"属性值"）
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index="1"。
1.获取属性
attr（"属性"） // 类似原生 getAttribute()
2.设置属性
attr（"属性"，"属性值"） // 类似原生 setAttribute()
该方法也可以获取H5自定义属性
数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
1.附加数据语法
data（"name","value"） // 向被选元素附加数据
2.获取数据语法
data（"name"） // 向被选元素获取数据
同时，该方法也可以获取H5自定义属性 data-index ，得到的是数字型
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
jQuery内容文本值
普通元素内容html() （相当于原生inner HTML）
html() //获取元素的内容
hmtl("内容") // 设置元素的内容
普通元素文本内容text() (相当于原生innerText)
text() // 获取元素的文本内容
text("文本内容") //设置元素的文本内容
表单的值val() （相当于原生value）
val() //获取文本框中的值
val("内容") //设置文本框中的值
案例：购物车
HTML核心部分：
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
<!-- 购物车主要核心区域 -->
<div class="cart-warp">
<!-- 头部全选模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<div class="t-action">操作</div>
</div>
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥12.60</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价： <em>￥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</div>
</div>
</div>
JS部分：
$(function () {
//选中/全选模块
// 1. 当全选框 checkall 选中的时候 所有的 j-checkbox都要选中
$(".checkall").change(function () {
$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
// 当全选框 checkall 选中的时候 给所有的 cart-item添加check-cart-item 类
if ($(".checkall").prop("checked")) {
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
});
// 2.当 j-checkbox都选中时， checkall 也要选中
$(".j-checkbox").change(function () {
// ：checked 可以返回当前被选中元素的信息
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
// 当全选框j-checkbox 选中的时候 给对应的 cart-item添加check-cart-item 类
if ($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
});
// 通过+ - 按钮增减商品数量模块
// 3.当点击 + 号，increment 的兄弟 itxt 标签的值 应该要再原来的基础上加一
$(".increment").click(function () {
// 获取到 itxt 标签的初始值
var n = $(this).siblings(".itxt").val(); // 商品数量
n++;
$(this).siblings(".itxt").val(n);
// 小计模块
// 5.小计（p-sum）=当前商品单价(p-price) * 商品数量 （itxt）
// parents()方法 返回祖先元素
var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1); // 商品单价
// toFixed()方法 保留指定小数位
var price = (p * n).toFixed(2); // 商品总价
$(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
getSum();
});
// 4.当点击 - 号，decrement 的兄弟 itxt 标签的值 应该要再原来的基础上减一 注意 减到1 就不能再减了
$(".decrement").click(function () {
// 获取到 itxt 标签的初始值
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
// 6.小计（p-sum）=当前商品单价(p-price) * 商品数量 （itxt）
var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);
// toFixed()方法 保留指定小数位
var price = (p * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
getSum();
});
// 7.通过直接在文本框输入增减商品数量模块
$(".itxt").change(function () {
var n = $(this).val();
var p = $(this).parents(".p-num").siblings(".p-price").text().substr(1);
// toFixed()方法 保留指定小数位
var price = (p * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
getSum();
});
getSum();
// 8.计算总计、总额模块
function getSum() {
var count = 0; // 总件数
var money = 0; // 总金额
// 把所有的 itxt 的内容相加 然后赋值给 amount-sum 里面的 em
$(".itxt").each(function (i, ele) {
count += parseInt($(ele).val());
$(".amount-sum em").text(count);
});
// 把所有p-sum 的的内容相加 然后赋值给 price-sum 里面的 em
$(".p-sum").each(function (i, ele) {
money += parseFloat($(ele).text().substr(1));
$(".price-sum em").text("￥" + money.toFixed(2));
})
}
// 9.删除模块 注意 每次执行完删除 记得 重新计算价格！！
// 每个商品后面对应的删除按钮
$(".p-action a").click(function () {
$(this).parents(".cart-item").remove();
getSum();
});
// 点击 删除选中的商品 后删除 需要先拿到被选中的商品 ：checked
$(".remove-batch").click(function () {
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
});
// 点击 清空购物车 然后删除
$(".clear-all").click(function () {
$(".cart-item").remove();
getSum();
})
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
