零.前言
JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客
JQuery(二)---【使用JQuery对HTML、CSS进行操作】-CSDN博客
一.JQuery动态设置浏览器窗口尺寸大小
1.1width()和height()方法
- width()：设置或者返回元素的宽度(不包括内边距、边框或外边距)
- height()：设置或者返回元素的高度(不包括内边距、边框或外边距)
一个返回元素宽度和高度的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> .n{ font-weight: bold; font-size: large; } .color{ color: blue; } </style> </head> <body> <div style="height: 300px;width: 200px;background-color: aqua;" id="div1"> <p id="text1"></p> <p id="text2"></p> </div> <button id="bt1">点我显示div的宽度和高度</button> <script> $(document).ready(function(){ $("#bt1").click(function(){ $("#text1").text("div的宽度是:" + $("#div1").width()); $("#text2").text("div的高度是:" + $("#div1").height()); }) }); </script> </body> </html>
效果：
一个设置元素“高度和宽度”的例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> .n{ font-weight: bold; font-size: large; } .color{ color: blue; } </style> </head> <body> <div style="height: 300px;width: 200px;background-color: aqua;" id="div1"> </div> <br><br> <button id="bt1">点我更改div的高度和宽度</button> <script> $(document).ready(function(){ $("#bt1").click(function(){ $("#div1").width(500).height(200); }) }); </script> </body> </html>
点击前：
点击后：
1.2innerWidth()和innerHeight()方法
- innerWidth() ：返回元素的宽度（包括内边距）
- innerHeight() ：返回元素的高度（包括内边距）
一个例子：
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height of div: " + $("#div1").innerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>innerWidth() - 返回元素的宽度（包括内边距）。</p> <p>innerHeight() - 返回元素的高度（包括内边距）。</p> </body> </html>
效果：
注意：
“可以看到使用innerWitdth和innerHeight的大小都基于width和height的基础上加了两个内边距的长度”
原因很简单，因为内边距分为：“上下左右”四个方向，因此要加两个内边距！
1.3outerWidth和outerHeight
- outerWidth() ：返回元素的宽度（包括内边距和边框)
- outerHeight() ：返回元素的高度（包括内边距和边框）
- outerWidth(true) ：返回元素的宽度（包括内边距、边框和外边距）
- outerHeight(true) ：返回元素的高度（包括内边距、边框和外边距）
一个outer不带(true)的例子：
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height of div: " + $("#div1").outerHeight(); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p> <p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p> </body> </html>
效果：
可以看到结果：“高度/宽度+内边距+边框”的长度
一个outer带(true)的例子
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of div: " + $("#div1").height() + "</br>"; txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br> <button>显示 div 的尺寸</button> <p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p> <p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p> </body> </html>
效果：
可以看到结果：“高度/宽度+内边距+边框+外边距”的长度
二.JQuery的遍历
2.1JQ遍历介绍
JQ遍历，意为：“移动”，用于根据其相对于其他元素的关系来“查找”HTML元素
下面是一个“家族树”，JQ的遍历将会在“家族树”上进行：
在“家族树”中，有三种关系：“父子关系”、“兄弟(同胞)关系”、“祖孙关系”：
- <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先
- <ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
- 左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代
- <span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代
- 两个 <li> 元素是同胞（拥有相同的父元素）
- 右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代
- <b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代
2.2祖先的遍历
祖先可以是：“父”、“祖父”、“曾祖父”等等
遍历祖先，即：在“家族树”中向上
方法有三种：“parent”、“parents”、“parentsUntil”：
2.2.1parent()
parent()方法返回被选元素的直接父元素。
例如：
<!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <div style="width:500px;">div (曾祖父) <ul>ul (祖父) <li>li (直接父) <span>span</span> </li> </ul> </div> <div style="width:500px;">div (祖父) <p>p (直接父) <span>span</span> </p> </div> </div> </body> </html>
效果：
2.2.2parents()
parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素
例如：
<!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("span").parents().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (曾曾祖父) <div style="width:500px;">div (曾祖父) <ul>ul (祖父) <li>li (直接父) <span>span</span> </li> </ul> </div> </body> <!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 --> </html>
效果：
最外面的“红框”是：“<html>”元素
同时我们也可以使用“过滤”，来获得我们只想要的祖先元素：
例如：
$(document).ready(function(){ $("span").parents("ul"); });
效果：
2.2.3parentsUntil()
parentsUntil方法返回介于两个给定元素之间的所有“祖先元素”(不包括两个边界【开始位置和结束位置】)
例如：
$(document).ready(function(){ $("span").parentsUntil("div"); });
效果：
2.3后代的遍历
后代是：“子”、“孙”、“曾孙”等等
遍历后代，相当于在“家族树”中向下遍历，方法有两种：
- children()：遍历直接子元素
- find()：遍历所有后代元素
2.3.1children()
children方法返回被选元素的所有直接子元素
例如：
<!DOCTYPE html> <html> <head> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (子) <span>span (孙)</span> </p> <p>p (child) <span>span (孙)</span> </p> </div> </body> </html>
效果：
注意到，<span>作为“孙子”(后代)并没有被遍历
当然，children()也可以使用“过滤”来筛选遍历对象，例如：
$(document).ready(function(){ $("div").children("p.1"); });
2.3.2find()
find()方法返回被选元素的后代元素，一路向下直到最后一个后代：
使用方法：
find(params)：params(参数)可以是：“过滤”元素名字”、“*”代表所有后代
注意：find()的params不能为空！！
<!DOCTYPE html> <html> <head> <style> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("div").find("*").css({"color":"red","border":"2px solid red"});` `//所有后代 }); </script> </head> <body> <div class="descendants" style="width:500px;">div (当前元素) <p>p (子) <span>span (孙)</span> </p> <p>p (child) <span>span (孙)</span> </p> </div> </body> </html>
效果：
2.4同胞的遍历
同胞：“拥有相同的父元素”
遍历同胞有：“七种方法”、“三大类”
第一大类就一种方法：
- siblings()：返回被选元素的所有同胞元素(上下两个方向)
第二大类三种方法：
- next()：向下遍历，返回下面的第一个同胞
- nextAll()：向下遍历，返回下面的所有同胞
- nextUntil(endposition)：向下遍历，返回一个当前位置到endposition边界内的所有同胞
第三大类三种方法：
- prev()：向上遍历，返回上面的第一个同胞
- prevAll()：向上遍历，返回上面的所有同胞
- prevUntil(startposition)：向上遍历，返回startposition到当前位置边界内的所有同胞
2.4.1sibilings()
sibilings返回被选元素的所有同胞：
<!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("h2").siblings().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
效果：
2.4.2next()、nextAll()、nextUntil()
这三种方法用来向下遍历，分别返回：“第一个”、“所有”、“当前位置到endposition边界内”的同胞
使用next：
<!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("h2").next().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
效果：
使用nextAll：
$(document).ready(function(){ $("h2").nextAll(); });
效果：
使用nextUntil：
$(document).ready(function(){ $("h2").nextUntil("h6"); });
效果：
2.4.3prev()、prevAll()、prevUntil()
这三种方法用来向上遍历，分别返回：“第一个”、“所有”、“startposition到当前位置边界内”的同胞
使用prev()：
<!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("h2").prev().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (父) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
效果：
使用prevAll()：
$(document).ready(function(){ $("h2").prevAll(); });
效果：
使用prevUntil()：
$(document).ready(function(){ $("h2").nextUntil("h6"); });
效果：
2.5遍历的过滤
对于遍历的过滤，前面浅略的提过一下，下面我们来说一下更为详细的“过滤”：
三个最基本的过滤方法：“first()”、“last()”、“eq()”，它们允许基于其在一组中的位置来筛选
两个匹配某项标准的方法：“filter()”、“not()”
- first()：返回被选元素的首个元素
- last()：返回被选元素的最后一个元素
- eq()：返回被选元素中带有指定索引号的元素
- filter()：规定一个标准，只返回匹配这个标准的元素
- not()：返回所有不匹配的所有元素，not()与filter()作用相反
2.5.1first()、last()
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("div p").first().css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <div> <p>这是 div 中的一个段落。</p> </div> <div> <p>这是 div 中的另一个段落。</p> </div> <p>这也是段落。</p> </body> </html>
效果：
将上面的“.first()”改为：“.last()”之后：
$(document).ready(function(){ $("div p").last().css("background-color","yellow"); });
效果：
2.5.2eq()
eq返回相对一个带有指定索引号的元素，索引号从“0”开始！
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").eq(0).css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭 (index 0)。</p> <p>唐老鸭 (index 1)。</p> <p>我住在 Duckburg (index 2)。</p> <p>我最好的朋友是米老鼠 (index 3)。</p> </body> </html>
效果：
注意：在这里的“(index0)”、“(index1)”、“(index2)”、“(index3)”没有实际作用，只是起到一个区分作用，用来方便我们区分！！并不是<p>中有一个属性叫：“index”！
2.5.3filter()、not()
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("p").filter(".intro").css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭。</p> <p class="intro">我住在 Duckburg。</p> <p class="intro">我爱 Duckburg。</p> <p>我最好的朋友是 Mickey。</p> </body> </html>
效果：
将：“filter”改为“not”后：
$(document).ready(function(){ $("p").not(".intro"); });
效果：
