JQery操作属性 && 案例：全选or全不选

最新推荐文章于 2024-04-25 11:38:14 发布

好吃的都给你呀

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量127

点赞数

分类专栏： #前端思维框架文章标签： jqery 获取属性

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/103394966

版权

#前端思维框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JQery操作属性

prop()

语法

prop("属性名"); 获取元素的某个属性的值

prop("属性名",属性值); 给属性赋值

removeProp("属性名"); 删除元素的某个属性的值

注：prop命令是jQuery1.6版本后的新操作方式，用以替代attr命令。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.redDiv{
				font-family: "楷体";
				color: red;
			}
		</style>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			function run1(){
				$("#username").prop('value','我是变过来的');
			}
			function run2(){
				$("#d2").removeProp('class');
			}
			function run3(){
				$("#d1").prop('class','redDiv');
			}
		</script>
	</head>
	<body>
		<div id="d1">11111</div>
		<input type="button" value="变" onclick="run3()" />
		<div id="d2" class="redDiv">你好，我是第二行的字</div>
		<input type="button" value="变" onclick="run2()" /><br />
		<input type="text" id="username"  /><br />
		<input type="button" value="变" onclick="run1()" />
	</body>
</html>

案例：全选、全不选和反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			function quanxuan(){
				$("[type=checkbox]").prop('checked',true);
			}
			function quanbuxuan(){
				$("[type=checkbox]").prop('checked',false);
			}
			function fanxuan(){
				var cs = $(':checkbox');
		  		cs.each(function(){
					$(this).prop('checked',!$(this).prop('checked'));
		 		 });
			}
		</script>
	</head>
	<body>
		<div>
			 <input type="button" value="全选" onclick="quanxuan()" />
			 <input type="button" value="全不选" onclick="quanbuxuan()" />
			 <input type="button" value="反选" onclick="fanxuan()" />
		</div>
		<input type="checkbox" value="math"  />数学
		<input type="checkbox" value="chinese"  />语文
		<input type="checkbox" value="english"  />英语
	</body>
</html>