目录

属性参考表格

属性

attr(name|properties|key,value|fn)

描述

语法

示例

removeAttr(name)

描述

语法

示例

prop(name|properties|key,value|fn)

描述

语法

示例

removeProp(name)

描述

语法

示例

CSS类

addClass(class|fn)

描述

语法

示例

removeClass([class|fn])

描述

语法

示例

toggleClass(class|fn[,sw])

描述

语法

示例

HTML代码/文本/值

html([val|fn])

描述

语法

示例

text([val|fn])

描述

语法

示例

val([val|fn|arr])

描述

语法

示例

属性参考表格

编号

语法

描述

1

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

设置或返回被选元素的属性值。

2

removeAttr(name)

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

3

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

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

4

removeProp(name)

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

5

addClass(class|fn)

为每个匹配的元素添加指定的类名。

6

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类。

7

toggleClass(class|fn[,sw])

切换类，如果不存在该类则添加指定类，如果存在该类则删除指定类。

8

html([val|fn])

设定或取得第一个匹配元素的html内容。

9

text([val|fn])

设定或取得所有匹配元素的内容。

10

val([val|fn|arr])

设定或获得匹配元素的当前值。

属性

attr(name|properties|key,value|fn)

描述

设置或者返回被选元素的属性值。

参数说明：

  • name指的是属性名称。
  • properties指的是属性的“名/值对”对象。
  • key,value指的是属性名,属性值
  • key,function(index.attr)指的是属性名称和返回属性值的函数，其中函数有两个参数，index表示当前元素的索引值，第二个参数为原先的属性值。

语法

// attr(name)
$('img').attr("src");

// attr(properties)
$('img').attr({src:"a.jpg",alt:'这是图片'});

// attr(key,value)
$('img').attr('src','a.jgp');

// attr(key,function(index,attr){});
$('img').attr('title',function(){return '图片'});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<img>
		</div>
		<script type="text/javascript">
			var url = 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png';
			$('img').attr('src', url);
		</script>
	</body>
</html>

removeAttr(name)

描述

从被匹配的元素中删除属性。

参数说明：

  • 要删除的属性名。

语法

$(selector).removeAttr(name);

其中selector为选择器，name表示要删除的属性名。

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<img>
		</div>
		<script type="text/javascript">
			var url = 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png';
			// 添加src属性
			$('img').attr('src', url);
			// 删除名为src的属性
			$('img').removeAttr('src');
		</script>
	</body>
</html>

prop(name|properties|key,value|fn)

描述

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

参数说明：

  • name指的是属性名称。
  • properties指的是属性的“名/值对”对象。
  • key,value指的是属性名,属性值
  • key,function(index.attr)指的是属性名称和返回属性值的函数，其中函数有两个参数，index表示当前元素的索引值，第二个参数为原先的属性值。

语法

// $(selector).prop(name)
$("input[type='checkbox']").prop("checked");

// $(selector).prop({attrName:attrValue})
$("input[type='checkbox']").prop({
    disabled: true
});

// $(selector).prop(key,value)
$("input[type='checkbox']").prop("checked", true);

// $(selector).prop(key,function(index,attr){})
$("input[type='checkbox']").prop("checked", function(i, val) {
    return !val;
});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<input type="checkbox">男
			<input type="checkbox">女
		</div>
		<script type="text/javascript">
			$('input[type="checkbox"]').attr("checked",true);
		</script>
	</body>
</html>

浏览器效果如下：

jquery修改变量赋值 jquery修改src_jquery修改变量赋值

removeProp(name)

描述

删除由.prop()方法设置的属性集。

参数说明：

  • name指的是要删除的属性名。

语法

$(selector).removeProp(name)

selector指的是选择器，name指的是属性名。

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<img src="#" alt="问奈何">
			<button type="button">删除属性</button>
		</div>
		<script type="text/javascript">
			$('button').click(function() {
				$('img').removeProp("alt");
			});
		</script>
	</body>
</html>

该示例无效，不会产生作用，可能是jQuery版本问题，removeProp()方法已经失效。

CSS类

addClass(class|fn)

描述

为指定元素添加指定的类名。

参数说明：

  • class指的是要添加的类名，可以添加多个类名，当必须用空格隔开。
  • 函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

语法

$(selector).addClass(className)

$(selector).addClass(className1 className2 ... className)

$(selector).addClass(function(index,className){})

selector指的是选择器，className指的是要添加的类名。

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle {
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			$("#app").addClass("appStyle")
		</script>
	</body>
</html>

浏览器显示如下：

jquery修改变量赋值 jquery修改src_jquery修改变量赋值_02

第二种用法的示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			$("#app").addClass(function(index,className){
				return 'appStyle_'+index;
			})
		</script>
	</body>
</html>

removeClass([class|fn])

描述

用匹配的元素中删除全部或指定的类。

参数说明：

  • 如果没有参数则删除所有类。
  • class指的是删除指定类名的类。
  • fn表示此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

语法

// 删除所有类
$(selector).removeClass();

// 删除指定的类
$(selecotr).removeClass(className);

// 回调函数
$(selecotr).removeClass(function(index,className){});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}

			.appStyle_1 {
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app" class="appStyle_0 appStyle_1">测试DIV</div>
		<button id="deleteAll">删除全部</button>
		<button id="deleteClass">删除指定类</button>
		<button id="deleteFunction">删除回调函数</button>
		<button id="refresh">刷新</button>

		<script type="text/javascript">
			$('#deleteAll').click(function() {
				// 删除所有类
				$("#app").removeClass();
			});
			$('#deleteClass').click(function() {
				// 删除名为appStyle_0的类
				$("#app").removeClass("appStyle_0");
			});
			$('#deleteFunction').click(function() {
				// 删除调用回调函数
				$("#app").removeClass(function(index, className) {
					console.log("index: " + index + "->className: " + className);
					return className + " appStyle_1";
				})
			});
			$('#refresh').click(function() {
				// 刷新浏览器页面
				window.location.reload();
			});
		</script>
	</body>
</html>

浏览器如下：

jquery修改变量赋值 jquery修改src_javascript_03

toggleClass(class|fn[,sw])

描述

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。

参数说明：

  • class：必需。规定添加或移除 class 的指定元素。如需规定若干 class，请使用空格来分隔类名。
  • sw：可选。布尔值。规定是否添加或移除 class。

语法

$(selector).toggleClass(class,switch)

$(selector).toggleClass(function(index,class),switch)

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app">测试DIV</div>
		<button id="test">切换</button>

		<script type="text/javascript">
			$('#test').click(function() {
				// 如果元素存在appStyle_0类就删除,如果不存在就添加appStyle_0类
				// 如果为true则添加后不会再删除类.
				// 如果为false则删除后不会再添加类
				$('#app').toggleClass('appStyle_0');
				// $('#app').toggleClass('appStyle_0',true);
			})
		</script>
	</body>
</html>

使用回调函数的代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			.appStyle_0 {
				width: 50px;
				height: 50px;
				background: red;
			}

			.appStyle_1 {
				border-radius: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app" class="appStyle_0">测试DIV</div>
		<button id="test">切换</button>

		<script type="text/javascript">
			$('#test').click(function() {
				// 如果元素存在appStyle_0类就删除,如果不存在就添加appStyle_0类
				// 如果为true则添加后不会再删除类.
				// 如果为false则删除后不会再添加类
				$('#app').toggleClass(function(index, className) {
					console.log("index: " + index + "->className: " + className);
					return "appStyle_1";
				});
			})
		</script>
	</body>
</html>

HTML代码/文本/值

html([val|fn])

描述

取得所匹配元素的HTML文本内容。

参数说明：

  • val：可以设定所匹配元素的html值
  • fn(index,html)：此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为该元素原先的HTML值。

语法

// 获取html值
$(selector).html();

// 设定所匹配元素的html值
$(selector).html(value);

// 使用函数来设置所有匹配元素的内容
$(selector).html(function(index,html){});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button>获取html文本</button>

		<script type="text/javascript">
			$('button').click(function() {
				alert($('span').html());
			})
		</script>
	</body>
</html>

设定html文本值的示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button>获取html文本</button>

		<script type="text/javascript">
			$('button').click(function() {
				$('span').html('这是所设定的文本')
			})
		</script>
	</body>
</html>

调用函数的示例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button>获取html文本</button>

		<script type="text/javascript">
			$('button').click(function() {
				$('span').html(function(index,html) {
					return "新的文本"+" 索引："+index+" 原文本："+html;
				});
			});
		</script>
	</body>
</html>

text([val|fn])

描述

取得所有匹配元素的内容。

参数说明：

  • val：可以设定所匹配元素的text值
  • fn(index,text)：此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为该元素原先的text值。

语法

// 获取所匹配元素的text文本
$(selector).text();

// 指定所匹配元素的text文本
$(selector).text(value);

// 调用回调函数
$(selector).text(function(index,text){});

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<span>测试文本</span><br>
		<button id="one">获取text文本</button>
		<button id="two">设定text文本</button>
		<button id="three">回调函数设置text文本</button>

		<script type="text/javascript">
			$('#one').click(function() {
				alert($('span').text());
			});
			$('#two').click(function() {
				$('span').text("新文本");
			});
			$('#three').click(function() {
				$('span').text(function(index, text) {
					return "新文本组成：" + "index: " + index + "原text: " + text;
				});
			});
		</script>
	</body>
</html>

val([val|fn|arr])

描述

获得匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

参数说明：

  • val：指的是要设置的值。
  • fn(index,value)：函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为所匹配元素原先的text值。
  • array：用于设置check/select 的被选中的值。

语法

// 获取文本框的值
$(selector).val();

// 设定文本框的值
$(selector).val(value);

// 回调函数
$(selector).val(function(index, value) {});

// 设定array
$(selector).val([value1, value2...]);

示例

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<input type="text" value="初始值">
		<select id="selected">
			<option value="唐僧">唐僧</option>
			<option value="孙悟空">孙悟空</option>
			<option value="猪八戒">猪八戒</option>
			<option value="沙僧">沙僧</option>
		</select><br>

		<button id="one">获取文本框的值</button>
		<button id="two">设定文本框的值</button>
		<button id="three">回调函数</button>
		<button id="four">使用arry设定被选中值</button>

		<script type="text/javascript">
			$('#one').click(function() {
				alert($('input').val());
			});
			$('#two').click(function() {
				$('input').val("新值");
			});
			$('#three').click(function() {
				$('input').val(function(index, value) {
					return "新值组成：" + "index: " + index + "原value: " + value;
				});
			});
			$('#four').click(function() {
				var arr = ['沙僧'];
				// 是用于设定被选中的值
				$('select').val(arr);
			})
		</script>
	</body>
</html>