2016/1/2--jquery

<!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"});
//
$("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">

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

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

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

<p>outerWidth()-返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight()- 返回元素的高度（包括内边距和边框）。</p>

<button>show the size of div.</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
<br>

<button>显示文档和窗口的属性。</button>

<button>调整div的尺寸。</button>

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

<div style="width:500px;">div曾祖父
<ul>ul祖父
<li>li直接父
<span>span</span>
</li>
</ul>
</div>
</body>
</html>

时间： 2024-11-08 19:36:50

2016/1/2--jquery

2016/1/2--jquery的相关文章

2016/1/5 jquery

2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作样式

2016/1/29 jquery.slicebox.js(上部分)

django + jQuery AJAX POST数据

一文带你了解2018年最流行的前端技术

聊一聊前端模板与渲染那些事儿

使用 Raspberry Pi 上的传感器在 Node.js 中创建一个 IoT Bluemix 应用程序

2016年4月最佳的20款 jQuery 插件推荐

2016年6月份那些最实用的 jQuery 插件专辑

2016 系统设计第一期（档案一）jQuery radio 取值赋值