JQuery中操作元素的属性_对象属性

最新推荐文章于 2023-06-26 10:07:38 发布

有园人

最新推荐文章于 2023-06-26 10:07:38 发布

阅读量379

点赞数

分类专栏：网页编程和设计文章标签： JQuery中操作元素的属性_对象属性

本文链接：https://blog.csdn.net/qq_42031653/article/details/99696915

版权

网页编程和设计专栏收录该内容

33 篇文章 0 订阅

订阅专栏

我们主要是通过attr去获取元素的属性：

看body内容：

<body>
		<p>
			账号：<input type="text" id="uname" value="张三" />
		</p>
		<p>
			密码：<input type="password" id="pwd" value="123456" />
		</p>
		<p>
			<input type="button" id="but" value="显示表单的信息" />
		</p>
	</body>

如果需要获取密码的type，我们就需要通过面的id去获取：

//获取密码
var pwd=$("#pwd");
					
//获取密码的type
var tp=pwd.attr("type");

获取密码的value的俩种方式：

//获取密码的value(获取的是默认值)
var val=pwd.attr("value");
//获取value的另一种方式(获取的是表单的实时值，用的更多)
var val2=pwd.val();

注意：这里获取value的俩种方式。对应的结果不同：

操作表单元素：

同样也可以用attr

$("#pwd").attr("type","text");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10jQuery中操作元素的属性</title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
		<script>
			$(function(){
				$("#but").click(function(){
					//获取密码
					var pwd=$("#pwd");
					
					//获取密码的type
					var tp=pwd.attr("type");
					
					//获取密码的value(获取的是默认值)
					var val=pwd.attr("value");
					//获取value的另一种方式(获取的是表单的实时值，用的更多)
					var val2=pwd.val();
					
					console.log(tp+"<--->"+val+"<--->"+val2)
					
					//操作表单元素
					$("#pwd").attr("type","text");
					alert("操作成功！")
				});
			})
		</script>
	</head>
	<body>
		<p>
			账号：<input type="text" id="uname" value="张三" />
		</p>
		<p>
			密码：<input type="password" id="pwd" value="123456" />
		</p>
		<p>
			<input type="button" id="but" value="显示表单的信息" />
		</p>
	</body>
</html>

获取元素对象属性：

俩种方式获取checked：

//第一种获取checked
var fav=$("#fav").attr("checked");
					
//第二种获取checked，如有则返回true，没有返回false
var fav=$("#fav").prop("checked");

由于第二种方式获取checked的返回值是布尔类型，因此我们可以通过这个方法去手动改变元素的默认值:

//通过这个将checked属性添加给表单元素
$("#fav1").prop("checked",true);
//通过这个将checked属性从表单元素中删除
$("#fav").prop("checked",false);

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>11jQuery中操作元素对象属性</title>
	</head>
	<body>
		<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10jQuery中操作元素的属性</title>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
		<script>
			$(function(){
				$("#but").click(function(){
					//第一种获取checked
					var fav=$("#fav").attr("checked");
					
					//第二种获取checked，如有则返回true，没有返回false
					var fav=$("#fav").prop("checked");
					//通过这个将checked属性添加给表单元素
					$("#fav1").prop("checked",true);
					//通过这个将checked属性从表单元素中删除
					$("#fav").prop("checked",false);
					//alert(fav);
				})
				
			})
		</script>
	</head>
	<body>
		<p>
			账号：<input type="text" id="uname" value="张三" />
		</p>
		<p>
			密码：<input type="password" id="pwd" value="123456" />
		</p>
		
		<p>
			爱好：<input type="checkbox" name="" id="" value="" />抽烟
				<input type="checkbox" name="" id="fav" value="" checked="checked"/>喝酒
				<input type="checkbox" name="" id="fav1" value="" />烫头
		</p>
		<p>
			<input type="button" id="but" value="操作元素的属性" />
		</p>
	</body>
</html>

	</body>
</html>

有园人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中操作元素的属性_对象属性

我们主要是通过attr去获取元素的属性：看body内容：<body> <p> 账号：<input type="text" id="uname" value="张三" /> </p> <p> 密码：<input type="password" id="pwd" value="123456" />...
复制链接

扫一扫