2. 设置属性
注意:
2. 设置自定义属性
2. 获取数据缓存
注意:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery.min.js"></script> </head> <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> </body> <script> $(function () { // 1.获取固定属性名 console.log($("a").prop("href")); console.log($("a").prop(‘title‘)); // 1.1 设置属性 $(‘a‘).prop("title", ‘我们‘) // 1.2 prop 更加适用disabled / checked / selected 等。 $(‘input‘).change(function () { console.log($(this).prop("checked")); }) // 2 自定义属性 // 2.1 获取自定义属性 console.log($(‘div‘).attr(‘data-index‘)); console.log($(‘div‘).attr(‘index‘)); // 2.2 设置自定义属性 $(‘span‘).attr(‘index‘, 1) // 3 数据缓存 data() 这个里面的数据是存放在元素的内存里面 $(‘span‘).data(‘uname‘, ‘peach‘); // 设置缓存数据 console.log($(‘span‘).data(‘uname‘)); // 获取缓存数据 // 3.1 data 获取html5 自定义data-index, 第一个 不用写data- , 得到的是数字型。 console.log($(‘div‘).data(‘index‘)); }) </script> </html>
$(function () { // 全选和 全不选 // 把全选的的状态给其他商品的状态即可 // 1. 全选 $(‘.checkall‘).change(function () { // 1.1 设置其他商品的状态和全选按钮 的状态一致 console.log($(this).prop(‘checked‘)); $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); // 1.2 如果全选则 让所有的商品添加 check-cart-item 类名 if ($(this).prop("checked")) { $(‘.cart-item‘).addClass("check-cart-item"); // 添加类名 } else { $(".cart-item").removeClass("check-cart-item"); } }) // 2. 如果小框里面的数值等于所有数组,则选择全选 $(‘.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); } if ($(this).prop("checked")) { // 让当前的商品添加 check-cart-item 类名 $(this).parents(".cart-item").addClass("check-cart-item"); } else { // check-cart-item 移除 $(this).parents(".cart-item").removeClass("check-cart-item"); } }) })
原文:https://www.cnblogs.com/py-web/p/12530260.html