jQuery访问属性，绝对定位

最新推荐文章于 2023-06-27 15:06:03 发布

J_array

最新推荐文章于 2023-06-27 15:06:03 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u012769750/article/details/46446083

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用jQuery操作DOM元素属性的方法，包括.attr(), .prop() 和 .is() 的用法区别，以及如何通过jQuery获取页面中元素的绝对位置信息。示例展示了复选框状态的读取和多个浮动div元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. jQuery访问属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery attr demo</title>
</head>
<body>
	<input id="check" type="checkbox" checked="checked">
	<label for="check">复选框</label>
	<p></p>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("input").change(function(){
			var $input = $(this);
			$("p").html(".attr('checked') = <b>" + $input.attr('checked') + "</b><br>"
				 	  + ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>"
				  	  + ".is(':checked') = <b>" + $input.is(':checked') );
		}).change();
	})
</script>
<style>
b {color: red;}
</style>
</html>

二. jQuery绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery absolute fix demo</title>
</head>
<body>
	<div>盒子1</div>
	<div style="float:left">盒子2</div>
	<div style="float:left">盒子3</div>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" >
	$(function(){
    	var o1 = $("div").eq(0).offset();					//获取第一个div元素的偏移信息
    	$("div").eq(0).html( "left: " + o1.left + "<br />top: " + o1.top ); 	//显示信息
    	var o2 = $("div").eq(1).offset();					//获取第二个div元素的偏移信息
    	$("div").eq(1).html( "left: " + o2.left + "<br />top: " + o2.top ); 	//显示信息
    	var o3 = $("div").eq(2).offset();					//获取第三个div元素的偏移信息
    	$("div").eq(2).html( "left: " + o3.left + "<br />top: " + o3.top ); 	//显示信息
	})
</script>

<style type="text/css">
	body { padding:0; margin:0; }/*清除页边距*/
	div {height:60px; width:200px; border:solid 10px red; }/*统一div元素的显示样式*/ 
</style>
</html>