[网页编程]-07 jQuery 操作页面元素属性

prtyaa 2023-12-27 15:56:08  51147

分类专栏：资讯

本篇介绍获取和操作页面元素属性

在jq语法中使用attr()方法操作页面元素的属性。如果只写一个值 jq.attr('class')则代表获取该对象class的属性值，如果写两个值 jq.attr('class','bigBox')则代表设置该对象class的属性值。

获取页面元素对象属性

获得元素对象的属性jq对象.attr('属性名');.

获得文本框实时输入的值jq对象.val();

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					//获得元素对象
					var tex =$("#inp1");
					//获得元素对象的属性
					var t1 = tex.attr("type");
					var na1 = tex.attr("name");
					//获得元素固有的属性值
					var ps1 = tex.attr("value");
					
					console.log(t1+"--"+na1+"--"+ps1);
					//获取元素实时的内容
					var te = tex.val();
					alert(te);
				})
			})
		</script>
		
	</head>
	<body>
		<input type="button" name="" id="but1" value="元素属性的获得" />
		<hr>
		<form action="">
			
			账号:<input type="text" name="uname" id="inp1" value="123" />
			
			密码:<input type="password" name="upassword" id="pwd1" value="123" />
		</form>
	</body>
</html>

操作页面元素属性

JESON格式操作

多选框操作

判断有没有被勾选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#but1").click(function(){
					
					//多选框
				//var ch = $("#fav").attr("checked");
				var flag =$("#fav").prop("checked");
				///lert(flag) 选了就是true 没选就是false
				
				
				})
			})
		</script>
		
	</head>
	<body>
		<input type="button" name="" id="but1" value="元素属性的获得" />
		<hr>
		<form action="">
			
			账号:<input type="text" name="uname" id="inp1" value="123" />
			
			密码:<input type="password" name="upassword" id="pwd1" value="123" /><br>
			
			爱好: <br>
				抽烟:<input type="checkbox" name="" id="" value="" />
				喝酒<input type="checkbox" name="" id="" value="" />
				烫头<input type="checkbox" name="" id="fav" value="" checked="checked" />//默认勾选
		</form>
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31514

赞同 0

评论 0 条

[网页编程]-07 jQuery 操作页面元素属性

本篇介绍获取和操作页面元素属性

获取页面元素对象属性

操作页面元素属性

多选框操作

相关文章

关注我们