第三章：JQuery

最新推荐文章于 2025-06-03 18:54:56 发布

PCC.

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量202

点赞数

分类专栏： JavaWeb项目实战-商城购物系统文章标签： jquery javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44278828/article/details/122048611

版权

JavaWeb项目实战-商城购物系统专栏收录该内容

40 篇文章

订阅专栏

3.6JQuery的属性操作

JQuery属性操作：
1、 html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样；
2、 text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样；
3、 val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样；
4、 attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等，attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj（注意：当输入一个参数的时候表示查询这个属性的值，当传入两个参数的时候，表示设置这个属性的值。除此之外，使用attr还可以给标签自定义属性，并设置属性的值）；
5、 prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等（注意：prop方法与attr方法是一个互补的关系）。

1.	<!DOCTYPE html>  
2.	<html lang="en">  
3.	<head>  
4.	    <meta charset="UTF-8">  
5.	    <title>001jQuery的属性操作.html</title>  
6.	  
7.	    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>  
8.	  
9.	    <script type="text/javascript">  
10.	        /**  
11.	         * 使用jQuery进行批量的操作  
12.	         */  
13.	  
14.	        //操作选中的单选  
15.	        $(function () {//在页面完成加载之后  
16.	            //首先要查询到单选  
17.	            $(":radio").val(["radio1"]);//操作选中指定的单选框  
18.	        });  
19.	  
20.	        //批量操作多选框  
21.	        $(function () {  
22.	            $(":checkbox").val(["checkbox1", "checkbox2", "checkbox3"]);  
23.	        });  
24.	  
25.	        //批量操作多选的下拉框  
26.	        $(function () {  
27.	            $("#multiple").val(["mul1", "mul2", "mul3", "mul4"]);  
28.	        });  
29.	  
30.	        //批量操作但徐昂框的选中状态  
31.	        $(function () {  
32.	            $("#single").val(["sin3"]);  
33.	        })  
34.	    </script>  
35.	</head>  
36.	<body>  
37.	单选：  
38.	<input name="radio" type="radio" value="radio1"/>radio1  
39.	<input name="radio" type="radio" value="radio2"/>radio2  
40.	<br/>  
41.	多选：  
42.	<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1  
43.	<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2  
44.	<input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3  
45.	<br/>  
46.	下拉多选 ：  
47.	<select id="multiple" multiple="multiple" size="4">  
48.	    <option value="mul1">mul1</option>  
49.	    <option value="mul2">mul2</option>  
50.	    <option value="mul3">mul3</option>  
51.	    <option value="mul4">mul4</option>  
52.	</select>  
53.	<br/>  
54.	下拉单选 ：  
55.	<select id="single">  
56.	    <option value="sin1">sin1</option>  
57.	    <option value="sin2">sin2</option>  
58.	    <option value="sin3">sin3</option>  
59.	</select>  
60.	</body>  
61.	</html>