话常说，马无夜草不肥，程序员JQuery不学不香，虽然在技术革新速率很高的今天，JQuery已经不是必需品，但多了解总要比不了解好，话不多说，让我们直接来看看属性及其介绍。
目标
能够操作 jQuery 属性jQuery 常用属性操作有三种：prop() / attr() / data() ;
元素固有属性值 prop()（★★★）
所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type
语法
注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
元素自定义属性值 attr()（★★★）
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
语法
注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
示例代码
<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>案例：购物车案例模块-全选
全选思路：
里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
把全选按钮状态赋值给3小复选框就可以了。
当我们每次点击小的复选框按钮，就来判断：
如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
:checked 选择器 :checked 查找被选中的表单元素。
$(function() { // 1. 全选 全不选功能模块 // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了 // 事件可以使用change KaTeX parse error: Expected '}', got 'EOF' at end of input: …// console.log((this).prop(“checked”)); $(".j-checkbox, .checkall").prop(“checked”, ( t h i s ) . p r o p ( " c h e c k e d " ) ) ; i f ( (this).prop("checked")); if ( (this).prop("checked"));if((this).prop(“checked”)) { // 让所有的商品添加 check-cart-item 类名 $(".cart-item").addClass(“check-cart-item”); } else { // check-cart-item 移除 $(".cart-item").removeClass(“check-cart-item”); } }); // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。 KaTeX parse error: Expected '}', got 'EOF' at end of input: …// console.log((".j-checkbox:checked").length); // ( " . j − c h e c k b o x " ) . l e n g t h 这 个 是 所 有 的 小 复 选 框 的 个 数 i f ( (".j-checkbox").length 这个是所有的小复选框的个数 if ( (".j−checkbox").length这个是所有的小复选框的个数if((".j-checkbox:checked").length === $(".j-checkbox").length) { $(".checkall").prop(“checked”, true); } else { KaTeX parse error: Expected 'EOF', got '}' at position 49: …se); }̲ 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”); } });
})
jQuery 文本属性值
目标
会使用操作文本属性值的方法jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
jQuery内容文本值（★★★）
常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作
语法
注意：html() 可识别标签，text() 不识别标签。
示例代码
<body> <div> <span>我是内容</span> </div> <input type="text" value="请输入内容"> <script> // 1. 获取设置元素内容 html() console.log($("div").html()); // $("div").html("123"); // 2. 获取设置元素文本内容 text() console.log($("div").text()); $("div").text("123"); // 3. 获取设置表单值 val() console.log($("input").val()); $("input").val("123"); </script> </body>