JQuery(三)---【使用JQuery动态设置浏览器窗口尺寸、JQuery的遍历】

零.前言

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");
});

效果：