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>

效果:

注意

可以看到使用innerWitdthinnerHeight的大小都基于widthheight的基础上加了两个内边距的长度

原因很简单,因为内边距分为:“上下左右”四个方向,因此要加两个内边距

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

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802470.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React中的函数组件和类组件的区别

React 中的函数组件和类组件是两种不同的组件形式&#xff0c;它们之间有一些区别&#xff1a; 1、定义方式: 函数组件是一个普通的 JavaScript 函数&#xff0c;以函数的形式定义组件&#xff0c;例如&#xff1a; function FunctionComponent() {return <div>Hello,…

HTML5标签(网页编程)

一、常用标签 HTML5&#xff08;或HTML&#xff09;中有很多常用的标签&#xff0c;这些标签用于构建网页的结构和内容。以下是一些常用的HTML5标签&#xff1a; 1. 标题标签 <h1> 到 <h6>&#xff1a;定义六个级别的标题&#xff0c;<h1> 级别最高&#…

React - 你知道在React组件的哪个阶段发送Ajax最合适吗

难度级别:中级及以上 提问概率:65% 如果求职者被问到了这个问题,那么只是单纯的回答在哪个阶段发送Ajax请求恐怕是不够全面的。最好是先详细描述React组件都有哪些生命周期,最后再回过头来点题作答,为什么应该在这个阶段发送Ajax请求。那…

智慧校园预付费水电表控制系统

在智慧校园建设中&#xff0c;预付费水电表控制系统成为了不可或缺的一部分&#xff0c;它采用了先进的信息技术手段确保校园水电资源的高效管理和使用。这种系统通过智能化、信息化的手段&#xff0c;不仅优化了能源管理&#xff0c;还大幅提升了校园管理的现代化水平。本文将…

FPGA(Verilog)实现uart传输协议传输数据(含仿真)

目录 实现功能&#xff1a; 1.接收uart串行数据&#xff0c;输出并行数据(1byte)。 2.输入并行数据(1byte)&#xff0c;输出uart串行数据。 3.完成uart传输的1次环回。 uart协议的1帧数据传输 模块封装-port设置 Verilog代码实现 1.uart接收模块:接收串行数据,输出并行数…

​SCP收容物000

注 &#xff1a;本文是特别版&#xff0c;本文只供开玩笑 ,与steve_gqq_MC合作。 --------------------------------------------------------------------------------------------------------------------------------- Ittm # ŚČР-000 -----------------------------…

Android Q Download文件存储

11 以上 存放 Download 目录中 只能通过uri 进行读取 且只能APP 安装后存放的文件 才有访问权限 APP 卸载之后 数据库中权限会被移除 无法再通过文件名称进行查询 这边通过比较描述字段进行判断是否下载过文件 11 以上APP进行卸载后在安装下载 会出现重复文件 不知是否还有其他…

开源区块链系统/技术 总结(欢迎补充,最新)

1. FISCO BCOS FISCO BCOS 2.0 技术文档 — FISCO BCOS 2.0 v2.9.0 文档https://fisco-bcos-documentation.readthedocs.io/ 2. ChainMaker&#xff08;长安链&#xff09; 文档导航 — chainmaker-docs v2.3.2 documentationhttps://docs.chainmaker.org.cn/v2.3.2/html/in…

力扣经典150题第十一题:H指数

目录 计算研究者的 H 指数问题描述示例 解决方案排序 线性扫描 复杂度分析测试示例总结与展望结语 计算研究者的 H 指数 在本文中&#xff0c;我们将讨论如何计算研究者的 H 指数。H 指数是衡量研究者学术影响力的一种指标&#xff0c;它代表了一个研究者至少发表了几篇论文&…

行走的爬虫机器:所有可用 CSS 样式,区分可继承与不可继承。爬取自 MDN 文档!

可继承 -moz-image-region 非标准-moz-user-input 非标准 已废弃-webkit-border-before 非标准-webkit-overflow-scrolling 非标准-webkit-tap-highlight-color 非标准-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width-webkit-…

蓝桥杯-【二分】求阶乘

思路:对于有几个0&#xff0c;10一定会是5的整数倍&#xff0c;2的因子数一定比5的多&#xff0c;所以只要算5的个数即可&#xff0c; 30%&#xff0c;每个n都去算 #include <bits/stdc.h> using namespace std; #define ll long long ll check(ll n) { …

Java事件处理机制

一、介绍 java事件处理是采取“委派事件模型”。当事件发生时&#xff0c;产生事件的对象&#xff0c;会把此“信息”传递给"事件的监听者"处理&#xff0c;这里所说的"信息"实际上就是java.awt.event事件类库里某个类所创建的对象&#xff0c;把它称为&q…

以XX大学学生公寓为例的安科瑞远程抄表与配电能效系统解决方案【AcrelEMS-EDU校园综合能效管理】

建设背景 随着我国经济的高速发展&#xff0c;建筑能耗特别是国家机关办公建筑和大型公共建筑高耗能的问题日益突出。学校作为大型公共机构建筑的重要组成部分之一&#xff0c;其特点是占地面积大、建筑分布广、数量多、类型多样、用能情况复杂&#xff1b; 高校用能普遍问题…

【linux】拓展知识-linux图形界面(GUI 程序)、X11介绍

linux图形界面 Linux 本身是没有图形化界面的&#xff0c;linux只是一个基于命令行的操作系统&#xff0c;所谓的图形化界面系统只不过中 Linux 下的应用程序。没有图形界面linux还是linux&#xff0c;很多装linux的WEB服务器就根本不装X服务器。 这一点和 Windows 不一样。W…

wordpress全站开发指南-面向开发者及深度用户(全中文实操)--wordpress是什么

WordPress简介 WordPress是一个开源的内容管理系统&#xff08;CMS&#xff09;&#xff0c;广泛用于创建和管理网站。它最初是作为一个博客平台开始的&#xff0c;但现在已经发展成为一个功能强大的网站建设工具&#xff0c;可以用于创建各种类型的网站&#xff0c;包括个人博…

Linux C柔性数组(零长数组)

零长数组&#xff0c;大小为0&#xff0c;一般用在结构体中&#xff08;网络通信&#xff0c;省流&#xff09;&#xff0c;节省空间&#xff0c;方便善后&#xff08;相对于指针类型&#xff09;&#xff0c;我们通过具体例子进行理解。 常规定长数组 #include <stdio.h&…

【机器学习】深入解析机器学习基础

在本篇深入探讨中&#xff0c;我们将揭开机器学习背后的基础原理&#xff0c;这不仅包括其数学框架&#xff0c;更涵盖了从实际应用到理论探索的全方位视角。机器学习作为数据科学的重要分支&#xff0c;其力量来源于算法的能力&#xff0c;这些算法能够从数据中学习并做出预测…

CentOS下部署ftp服务

要在linux部署ftp服务首先需要安装vsftpd服务 yum install vsftpd -y 安装完成后需要启动vsftpd服务 systemctl start vsftpd 为了能够访问ftp的端口&#xff0c;需要在防火墙中开启ftp的端口21&#xff0c;否则在使用ftp连接的时候会报错No route to host. 执行如下命令为f…

纯纯python实现梯度下降、随机梯度下降

最近面试有要求手撕SGD&#xff0c;这里顺便就把梯度下降、随机梯度下降、批次梯度下降给写出来了 有几个注意点&#xff1a; 1.求梯度时注意label[i]和pred[i]不要搞反&#xff0c;否则会导致模型发散 2.如果跑了几千个epoch&#xff0c;还是没有收敛&#xff0c;可能是学习率…

基于逻辑回归和支持向量机的前馈网络进行乳腺癌组织病理学图像分类

CNN&#xff08;卷积神经网络&#xff09;通过使用反向传播方法来学习特征&#xff0c;这种方法需要大量的训练数据&#xff0c;并且存在梯度消失问题&#xff0c;从而恶化了特征学习。 CNN卷积神经网络 CNN由一个多层神经网络组成&#xff0c;该网络从标记的训练数据集中学习…