菜单 搜索
首页 前端知识 JQuery(三)---【使用JQuery动态设置浏览器窗口尺寸、JQuery的遍历】

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

2024-05-06 09:05:31 前端知识 前端哥 552 502 我要收藏

零.前言

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

效果：

转载请注明出处或者链接地址：https://www.qianduange.cn//article/7167.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Blocked opening '' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. 报错

2024-05-10 13:05:47

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML CSS JavaScript 520情人节代码制作

2024-05-10 08:05:57

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

WebView加载不出Html5网页的解决方法，android studio 拾色器，ViewPager高度问题

2024-05-10 08:05:41

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

HTML5中SVG与Canvas绘图技术的比较及选择依据

2024-05-10 08:05:10

大家推荐的文章
1

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
2

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
3

UE4.27支持HTML5

2024-05-07 13:05:261000
4

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
5

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
6

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
7

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
8

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
9

移动端css布局大全

2024-02-06 15:02:421000
10

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！