<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#but1").click(function(){
$("p").css("color","red");
});//改变css样式
$("#but2").click(function(){
$("p").offset({ top: 10, left: 30 });
});//对p进行偏移
$("#but3").click(function(){
var p = $("p:first");
var offset = p.offset();
alert( "left: " + offset.left + ", top: " + offset.top );
});//p与父级left和top的距离
$("#but4").click(function(){
var p=$("p");
var position=p.position();
alert( "left: " + position.left + ", top: " + position.top );
});//p与上级的距离
$("#but5").click(function(){
$("div").scrollTop(100);
});//使div的滚动条距顶100px
$("#but6").click(function(){
alert($("div").scrollTop()+" px");
});//div滚动条距顶多少距离
$("#but7").click(function(){
$("div").height(100);
});//改变div的高
$("#but8").click(function(){
$("div").width(100);
});//改变div的宽
$("#but9").click(function(){
alert($("div").innerHeight());
});//第一个匹配元素的内部高度
$("#but10").click(function(){
alert($("div").innerWidth());
});//第一个匹配元素的内部宽度
$("#but11").click(function(){
alert($("div").outerHeight());
});//第一个匹配元素的外部宽度
$("#but12").click(function(){
alert($("div").outerWidth());
});//第一个匹配元素的外部宽度
});
</script>
<input id="but1" type="button" value="css">
<input id="but2" type="button" value="偏移">
<input id="but3" type="button" value="父级距离">
<input id="but4" type="button" value="上级距离">
<input id="but5" type="button" value="滚动条滚动">
<input id="but6" type="button" value="滚动条距离">
<input id="but7" type="button" value="改变高">
<input id="but8" type="button" value="改变宽">
<input id="but9" type="button" value="内部高">
<input id="but10" type="button" value="内部宽">
<input id="but11" type="button" value="外部高">
<input id="but12" type="button" value="外部宽">
<br />
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
<p style="border:1px solid black;">world</p>
</div>
<p style="border:1px solid black;">hello</p>
</body>
</html>
