一. jQuery訪问属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery attr demo</title>
</head>
<body>
<input >
<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>