标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jquery.css</title>
<script src = "/jquery/jquery.1.11.3.min.js"></script>
<script type="text/javascript">
//设置多个 CSS 属性
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
//jQuery width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
$("button").click(function(){
var txt = "";
txt+="width of div:" + $("#div1").width() + "<br>";
txt+="height of div:" + $("#div1").height() + "<br>";
$("#div1").html(txt);
});
//jQuery innerWidth() 方法返回元素的宽度（包括内边距）-innerHeight() 方法返回元素的高度（包括内边距）。
$("button").click(function(){
var txt1 = "";
txt1+="height of div:" + $("#div2").height() + "<br>";
txt1+="width of div:" + $("#div2").width() + "<br>";
txt1+="inner width of div:" + $("#div2").innerWidth() + "<br>";
txt1+="inner height of div:" + $("#div2").innerHeight() + "<br>";
$("#div2").html(txt1);
});
//jQuery outerWidth()-方法返回元素的宽度（包括内边距和边框） 和 outerHeight() 方法方法返回元素的高度（包括内边距和边框）-01
$("button").click(function(){
var txt2 = "";
txt2+="width of div:" + $("#div1").width() + "<br>";
txt2+="height of div:" + $("#div1").height() + "<br>";
txt2+="outer width of div:" + $("#div1").outerWidth() +"<br>";
txt2+="outer height of div:" + $("#div1").outerHeight() + "<br>";
$("#div1").html(txt2);
});
//jQuery outerWidth()-方法返回元素的宽度（包括内边距和边框） 和 outerHeight() 方法方法返回元素的高度（包括内边距和边框）-02
$("button").click(function(){
var txt3 = "";
txt3+="width of div:" + $("#div1").width() + "<br>";
txt3+="height of div:" + $("#div1").height() + "<br>";
txt3+="outer width of div(margin include):" + $("#div1").outerWidth(true) + "<br>";
txt3+="outer height of div (margin include)" + $("#div1").outerHeight(true) + "<br>";
$("#div1").html(txt3);
});
//jQuery - 更多的 width() 和 height()
$("button").click(function(){
var txt4 = "";
txt4+="document width/height" + $(document).width();
txt4+="X" + $(document).height() + "\n";
txt4+="window width/height" + $(window).width();
txt4+="X" + $(window).height() + "\n";
$("#div1").html(txt4);
});
//设置指定的 <div> 元素的宽度和高度：
$("button").click(function(){
$("#div1").width(320).height(320);
});
//jQuery parent() 方法
$("span").parent().css({"color":"red","border":"2px solid red"});
//<!--jQuery parents() 方法-->
$("span").parents().css({"color":"red","boeder":"3px solid pink"});
</script>
<style>
.ancestors{
display: block;
border: 2px solid pink;
color: lightcoral;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body class="ancestors1">
<!--设置多个 CSS 属性-->
<h1>This is a headline.</h1>
<p style="background-color: hotpink;">这是一个段落。</p>
<p style="background-color: lightgreen;">这是一个段落。</p>
<p style="background-color: orangered;">这是一个段落。</p>
<p>一切都是最好的安排。</p>
<button>为段落p设置不同的样式。</button>
<br><br>
<!--jQuery width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。-->
<div id = "div1" style="width: 400px;height:300px;background-color: lightcoral;margin: 3px;padding: 10px;
border: solid 1px blue;"></div>
<button>显示div的尺寸。</button>
<p>width()-返回元素的宽度。</p>
<p>height()-返回元素的高度。</p>
<!--jQuery innerWidth() 方法返回元素的宽度（包括内边距）-innerHeight() 方法返回元素的高度（包括内边距）。。-->
<div id = "div2" style="height: 300px;width:300px;border:1px solid hotpink; padding: 10px;margin: 3px;" ></div>
<button>显示div的尺寸（包括内外边距）</button>
<p>innerHeight()-返回元素的高度（包括内边距）</p>
<p>innerWidth()-返回元素的宽度（包括外边距）。</p>
<!--jQuery outerWidth()-方法返回元素的宽度（包括内边距和边框） 和 outerHeight() 方法方法返回元素的高度（包括内边距和边框）-->
<p>outerWidth()-返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight()- 返回元素的高度（包括内边距和边框）。</p>
<!--jQuery outerWidth()-方法返回元素的宽度（包括内边距和边框） 和 outerHeight() 方法方法返回元素的高度（包括内边距和边框）-->
<button>show the size of div.</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
<br>
<!--jQuery - 更多的 width() 和 height()-->
<button>显示文档和窗口的属性。</button>
<!--设置指定的 <div> 元素的宽度和高度：-->
<button>调整div的尺寸。</button>
<!--jQuery parent() 方法-->
<div class="ancestors">
<div style="width: 500px;">div曾祖父
<ul>ul祖父
<li>li直接父
<span>apan</span>
</li>
</ul>
</div>
<div style="width: 500px;">div（祖父）
<p>p(直接父)
<span>span</span>
</p>
</div>
</div>
<!--jQuery parents() 方法-->
<div style="width:500px;">div曾祖父
<ul>ul祖父
<li>li直接父
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/whatcanido/p/5095504.html
