您的位置：首页 > Web前端 > JQuery

jQuery访问属性，绝对定位

2015-06-10 20:08 621 查看

一. 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航