jQuery — 属性操作

一、属性操作

　　1、attr(name |pro | key,val | fn)

　　　　用法：

格式：$("img").attr("src") 返回文档中所有图像的 src 属性值 $("img").attr({src : "test.jpg", alt : "Test Img"}) 为所有的图像设置 src 和 alt 属性

说明：设置或返回被选元素的属性值

注意：该方法不推荐操作 checked、readOnly、selected、disabled 等，此方法还可以操作非标准的属性，如自定义属性：abc、oob等

　　2、removeAttr(name)

　　　　用法：

格式：$("img").removeAttr("src")：将文档中图像的 src 属性删除

说明：从每一个匹配的元素中删除一个属性

注意：1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的

　　3、prop(n | p | k,v | f)

　　　　用法：

格式：$("input[type='checkbox']").prop("checked") 选中复选框为true，没选中为false $("input[type='checkbox']").prop({disabled : true}) ：禁用所有的复选框

说明：获取在匹配的元素集中的第一个元素的属性值

注意：随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误，所以只推荐操作 checked、readOnly、selected、disabled 等等

　　4、removeProp(name)

　　　　用法：

格式：$("input[type='checkbox']").removeProp("checked")

说明：用来删除由 prop() 方法设置的属性集

二、CSS 类

　　1、addClass(class | fn)

　　　　用法：

格式：$("p").addClass("myclass1 myclass2") 给所有的 p 元素添加两个类名

说明：为每个匹配的元素添加指定的类名

　　2、removeClass([class | fn])

　　　　用法：

格式：$("p").removeClass() 删除匹配元素的所有类 $("p").removeClass(".myclass1") 从匹配的元素中删除 'myclass1' 类名

说明：从所有匹配的元素中删除全部或指定的类

　　3、toggleClass(class | fn[,sw])

　　　　用法：

格式：$("p").toggleClass("myclass")

说明：如果存在（不存在）就删除（添加）一个类

三、HTML 代码/文本/值

　　1、html([val | fn])

　　　　用法：

格式：$("p").html()：表示获取 p 元素的内容 $("p").html("<b>hello</b> world")：表示设置所有 p 元素的内容

说明：获取/设置匹配元素的 HTML 内容，该方法如果没有参数，表示获取值；如果有参数表示设置值（同 innerHTML）

　　2、text([val | fn])

　　　　用法：

格式：$("p").text()：表示获取 p 元素的文本内容 $("p").text("Hello world")：表示设置所有 p 元素的文本内容

说明：获取/设置匹配元素的内容，如果没有参数，表示获取值；如果有参数表示设置值（同 innerText）

　　3、val([val | fn | arr])

　　　　用法：

格式：$("input").val() 获取文本框的值 $("input").val("Hello world"):设置文本框的值

说明：获取/设置匹配元素的当前值和表单的value属性值，包括 select，如果多选，将返回一个数组，包含所选的值（同 value）

　　val() 除此之外,该方法还能同时设置多个表单想的选中状态：

　　　　Demo：

 1 <!DOCTYPE html>
 2 <html lang="zh_CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title><script type="text/javascript" src="script/jquery-1.10.3.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             /*
 9             // 批量操作单选
10             $(":radio").val(["radio2"]);
11             // 批量操作筛选框的选中状态
12             $(":checkbox").val(["checkbox3","checkbox2"]);
13             // 批量操作多选的下拉框选中状态
14             $("#multiple").val(["mul2","mul3","mul4"]);
15             // 操作单选的下拉框选中状态
16             $("#single").val(["sin2"]);
17             */
18             $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
19             );
20         });
21     </script>
22 </head>
23 <body>
24 <body>
25 单选：
26 <input name="radio" type="radio" value="radio1" />radio1
27 <input name="radio" type="radio" value="radio2" />radio2
28 <br/>
29 多选：
30 <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
31 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
32 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
33 <br/>
34 下拉多选 ：
35 <select id="multiple" multiple="multiple" size="4">
36     <option value="mul1">mul1</option>
37     <option value="mul2">mul2</option>
38     <option value="mul3">mul3</option>
39     <option value="mul4">mul4</option>
40 </select>
41 <br/>
42 下拉单选 ：
43 <select id="single">
44     <option value="sin1">sin1</option>
45     <option value="sin2">sin2</option>
46     <option value="sin3">sin3</option>
47 </select>
48 </body></body>
49 </html>