一、属性操作
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>