【Java 进阶篇】JQuery 遍历:发现元素的魔法之旅

在这里插入图片描述

欢迎来到 JQuery 的奇妙世界,一个充满活力和灵感的地方。在这个世界里,我们将一起探讨 JQuery 的遍历功能,这是一个让你轻松发现和操作网页元素的神奇工具。无需太多前端经验,只要有一颗探险的心,你就能在 JQuery 遍历中找到属于你的宝藏。

前言

在 Web 开发中,我们常常需要在页面中找到特定的元素,然后对它们进行操作。这就是 JQuery 遍历的用武之地。遍历不仅仅是寻找元素,更是发现元素之美的一种方式。在这篇博客中,我们将深入研究 JQuery 遍历的方方面面,让你在前端的道路上越走越远。

遍历基础

在 JQuery 中,遍历主要通过选择器和遍历方法实现。首先,我们来看一下基础的选择器。

1. 元素选择器

元素选择器是最简单的一种选择器,通过元素的标签名选择对应的元素。比如,选择所有的段落元素可以这样写:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery 元素选择器示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */p {margin: 10px;padding: 10px;background-color: #f0f0f0;border: 1px solid #ddd;}</style><script>$(document).ready(function() {// 选取所有段落元素并修改它们的样式$("p").css("color", "blue");});</script>
</head>
<body><p>这是第一个段落。</p><p>这是第二个段落。</p><p>这是第三个段落。</p>
</body>
</html>

在这个例子中,$("p") 就是一个元素选择器,它选取了页面中所有的 <p> 元素,并通过 css() 方法修改它们的文字颜色。

2. 类选择器

类选择器通过元素的类名来选择对应的元素。比如,选择所有具有 highlight 类的元素:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery 类选择器示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.highlight {background-color: yellow;}</style><script>$(document).ready(function() {// 选取所有具有 highlight 类的元素并修改它们的样式$(".highlight").css("font-weight", "bold");});</script>
</head>
<body><p class="highlight">这是一个高亮的段落。</p><p>这是另一个普通的段落。</p><p class="highlight">这是又一个高亮的段落。</p>
</body>
</html>

在这个例子中,.highlight 就是一个类选择器,它选取了页面中所有具有 highlight 类的元素,并通过 css() 方法修改它们的文字加粗样式。

3. ID 选择器

ID 选择器通过元素的唯一 ID 来选择对应的元素。比如,选择具有 unique ID 的元素:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery ID 选择器示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */#unique {color: green;}</style><script>$(document).ready(function() {// 选取具有 unique ID 的元素并修改它的样式$("#unique").text("这是一个有趣的元素").css("font-size", "18px");});</script>
</head>
<body><p>这是一个普通的段落。</p><!-- 具有 unique ID 的元素 --><p id="unique"></p><p>这是另一个普通的段落。</p>
</body>
</html>

在这个例子中,#unique 就是一个 ID 选择器,它选取了页面中具有 unique ID 的元素,并通过 text() 方法修改了它的文字内容,同时通过 css() 方法修改了文字颜色和字体大小。

这些基础的选择器让我们能够准确地选取页面上的元素,但有时候我们需要更灵活的方式来定位元素。这时就需要使用 JQuery 的遍历方法。

遍历方法

JQuery 提供了多种遍历方法,让你能够轻松地在文档中移动和操作元素。下面我们来介绍几个常用的遍历方法。

1. each() 方法

each() 方法用于遍历匹配元素集合中的每一个元素,对每个元素执行指定的函数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery each() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.item {margin: 5px;padding: 10px;border: 1px solid #ddd;}</style><script>$(document).ready(function() {// 选取所有具有 item 类的元素,并对每个元素执行函数$(".item").each(function(index, element) {// 在每个元素后面添加索引号$(element).text("这是第" + (index + 1) + "个元素");});});</script>
</head>
<body><!-- 具有 item 类的元素 --><div class="item"></div><div class="item"></div><div class="item"></div>
</body>
</html>

在这个例子中,.item 是一个类选择器,选取了页面中所有具有 item 类的元素。通过 each() 方法,对每一个元素执行了一个函数,给每个元素添加了一个文字内容,内容包含了元素的索引号。

2. filter() 方法

filter() 方法用于从匹配的元素集合中筛选出符合条件的元素,返回一个新的集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery filter() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.item {margin: 5px;padding: 10px;border: 1px solid #ddd;}.highlight {background-color: yellow;}</style><script>$(document).ready(function() {// 选取所有具有 item 类的元素,并筛选出具有 highlight 类的元素$(".item").filter(".highlight").text("这是被筛选出来的元素");});</script>
</head>
<body><!-- 具有 item 类的元素 --><div class="item"></div><!-- 具有 item 类和 highlight 类的元素 --><div class="item highlight"></div><!-- 具有 item 类的元素 --><div class="item"></div>
</body>
</html>

在这个例子中,.item 是一个类选择器,选取了页面中所有具有 item 类的元素。通过 filter() 方法,筛选出了具有 highlight 类的元素,然后给这些元素添加了一个文字内容。

3. find() 方法

find() 方法用于查找匹配元素集合中每个元素的后代元素,返回一个新的集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery find() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.parent {margin: 5px;padding: 10px;border: 1px solid #ddd;}.child {background-color: #f0f0f0;}</style><script>$(document).ready(function() {// 选取所有具有 parent 类的元素,并查找它们的子元素$(".parent").find(".child").text("这是子元素");});</script>
</head>
<body><!-- 具有 parent 类的元素 --><div class="parent"><!-- 具有 child 类的子元素 --><div class="child"></div></div><!-- 具有 parent 类的元素 --><div class="parent"><!-- 具有 child 类的子元素 --><div class="child"></div></div><!-- 具有 parent 类的元素 --><div class="parent"><!-- 具有 child 类的子元素 --><div class="child"></div></div>
</body>
</html>

在这个例子中,.parent 是一个类选择器,选取了页面中所有具有 parent 类的元素。通过 find() 方法,查找了这些元素的子元素,具有 child 类的子元素,然后给这些子元素添加了一个文字内容。

4. first()last() 方法

first()last() 方法用于分别选择匹配元素集合中的第一个和最后一个元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery first() 和 last() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.item {margin: 5px;padding: 10px;border: 1px solid #ddd;}</style><script>$(document).ready(function() {// 选取所有具有 item 类的元素,并选择它们的第一个和最后一个元素$(".item").first().text("这是第一个元素");$(".item").last().text("这是最后一个元素");});</script>
</head>
<body><!-- 具有 item 类的元素 --><div class="item"></div><div class="item"></div><div class="item"></div>
</body>
</html>

在这个例子中,.item 是一个类选择器,选取了页面中所有具有 item 类的元素。通过 first() 方法选择了这些元素的第一个元素,并给它添加了一个文字内容;通过 last() 方法选择了这些元素的最后一个元素,并给它添加了一个不同的文字内容。

复杂的遍历

有时候,我们需要进行更复杂的遍历,涉及到父元素、兄弟元素等。下面,我们将介绍一些涉及到多层级遍历的方法。

1. parent() 方法

parent() 方法用于获得匹配元素集合中每个元素的父元素,返回一个新的集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery parent() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.child {margin: 5px;padding: 10px;border: 1px solid #ddd;}.parent {background-color: #f0f0f0;}</style><script>$(document).ready(function() {// 选取所有具有 child 类的元素,并获取它们的父元素$(".child").parent().addClass("parent").text("这是父元素");});</script>
</head>
<body><!-- 具有 child 类的元素 --><div class="child"></div><!-- 具有 child 类的元素 --><div class="child"></div><!-- 具有 child 类的元素 --><div class="child"></div>
</body>
</html>

在这个例子中,.child 是一个类选择器,选取了页面中所有具有 child 类的元素。通过 parent() 方法,获取了这些元素的父元素,并给父元素添加了一个类名和文字内容。

2. siblings() 方法

siblings() 方法用于获取匹配元素集合中每个元素的兄弟元素,返回一个新的集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery siblings() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.item {margin: 5px;padding: 10px;border: 1px solid #ddd;}.highlight {background-color: yellow;}</style><script>$(document).ready(function() {// 选取具有 item 类的元素,并获取它们的兄弟元素$(".item").siblings().addClass("highlight").text("这是兄弟元素");});</script>
</head>
<body><!-- 具有 item 类的元素 --><div class="item"></div><!-- 具有 item 类的元素 --><div class="item"></div><!-- 具有 item 类的元素 --><div class="item"></div>
</body>
</html>

在这个例子中,.item 是一个类选择器,选取了页面中所有具有 item 类的元素。通过 siblings() 方法,获取了这些元素的兄弟元素,并给兄弟元素添加了一个类名和文字内容。

遍历的艺术

JQuery 的遍历方法就像艺术家的画笔,让你能够在页面上自由地漫游,发现元素的美丽和奥秘。通过简单而强大的选择器和遍历方法,你可以轻松地定位、修改和操作页面上的任何元素。

3. children() 方法

children() 方法用于获取匹配元素集合中每个元素的子元素,返回一个新的集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery children() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.parent {margin: 5px;padding: 10px;border: 1px solid #ddd;}.child {background-color: #f0f0f0;}</style><script>$(document).ready(function() {// 选取具有 parent 类的元素,并获取它们的子元素$(".parent").children().addClass("child").text("这是子元素");});</script>
</head>
<body><!-- 具有 parent 类的元素 --><div class="parent"><!-- 子元素 --><div></div><!-- 子元素 --><div></div><!-- 子元素 --><div></div></div><!-- 具有 parent 类的元素 --><div class="parent"><!-- 子元素 --><div></div><!-- 子元素 --><div></div><!-- 子元素 --><div></div></div>
</body>
</html>

在这个例子中,.parent 是一个类选择器,选取了页面中所有具有 parent 类的元素。通过 children() 方法,获取了这些元素的子元素,并给子元素添加了一个类名和文字内容。

4. prev()next() 方法

prev()next() 方法分别用于选择匹配元素集合中每个元素的前一个兄弟元素和后一个兄弟元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery prev() 和 next() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script><style>/* 添加一些样式,让页面更有趣 */.item {margin: 5px;padding: 10px;border: 1px solid #ddd;}.highlight {background-color: yellow;}</style><script>$(document).ready(function() {// 选取具有 item 类的元素,并选择它们的前一个和后一个兄弟元素$(".item").prev().addClass("highlight").text("这是前一个兄弟元素");$(".item").next().addClass("highlight").text("这是后一个兄弟元素");});</script>
</head>
<body><!-- 具有 item 类的元素 --><div class="item"></div><!-- 具有 item 类的元素 --><div class="item"></div><!-- 具有 item 类的元素 --><div class="item"></div>
</body>
</html>

在这个例子中,.item 是一个类选择器,选取了页面中所有具有 item 类的元素。通过 prev() 方法选择了这些元素的前一个兄弟元素,并通过 next() 方法选择了这些元素的后一个兄弟元素,然后给它们添加了一个类名和文字内容。

5. closest() 方法

closest() 方法用于获取匹配元素集合中每个元素的祖先元素,从当前元素开始沿 DOM 树向上遍历,返回最先匹配给定选择器的祖先元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JQuery closest() 方法示例</title><script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>/* 添加一些样式,让页面更有趣 */.child {margin: 5px;padding: 10px;border: 1px solid #ddd;}.parent {background-color: #f0f0f0;}</style><script>$(document).ready(function() {// 选取具有 child 类的元素,并获取它们的最近的具有 parent 类的祖先元素$(".child").closest(".parent").addClass("highlight").text("这是最近的祖先元素");});</script>
</head>
<body><!-- 具有 parent 类的元素 --><div class="parent"><!-- 具有 child 类的元素 --><div class="child"></div><!-- 具有 child 类的元素 --><div class="child"></div><!-- 具有 child 类的元素 --><div class="child"></div></div>
</body>
</html>

在这个例子中,.child 是一个类选择器,选取了页面中所有具有 child 类的元素。通过 closest(".parent") 方法,获取了这些元素最近的具有 parent 类的祖先元素,并给这个祖先元素添加了一个类名和文字内容。

总结

通过本文的介绍,你已经对 JQuery 的遍历方法有了一个深入的了解。从基础的选择器到各种强大的遍历方法,你可以根据需要轻松地操作页面上的元素,实现丰富的交互效果。记住,JQuery 的力量在于它的简洁和灵活,让前端开发变得更加愉快和高效。

无论是 each() 方法的循环,还是 find() 方法的查找,每一个遍历方法都是你在前端探险中的得力助手。愿你在遍历元素的旅程中,发现更多有趣的功能和技巧,成为一位真正的前端大师。

愿你的代码如画笔一般,精妙而流畅,为用户带来愉悦的体验。继续探索,不断学习,让你的前端之路越走越宽广。前方还有更多的元素等待你的发现,一起加油吧!

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

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

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

相关文章

智能家居小程序

1、设备 系统板&#xff1a;STM32F103C8T6 温湿度传感器&#xff1a;DHT11 光照度传感器&#xff1a; BH1750 WIFI模块&#xff1a;ESP8266-015 蜂鸣器&#xff1a; 立创EDC画板子&#xff0c;然后微立创下单

【数据结构】希尔排序(最小增量排序)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵 希望大佬指点一二 如果文章对你有帮助…

java springboot在当前测试类中添加临时属性 不影响application和其他范围

目前 我们的属性基本都写在 application.yml 里面了 但是 如果 我们只是想做一下临时变量的测试 有没有办法实现呢&#xff1f; 显然是有的 这里 我们还是先在application.yml中去写一个 test属性 下面加个prop 然后 我们尝试在测试类中 获取一下这个属性 直接用 Value 读取…

C语言——求1/1-1/2+1/3-......+1/99-1/100的值

#include<stdio.h> int main() {int i 1;double sum 0;int flage 1;for(i 1;i < 100; i){sumflage*1.0/i;flage -flage; //正负号}printf("%lf\n",sum);return 0; }

通过制作llama_cpp的docker镜像在内网离线部署运行大模型

对于机器在内网&#xff0c;无法连接互联网的服务器来说&#xff0c;想要部署体验开源的大模型&#xff0c;需要拷贝各种依赖文件进行环境搭建难度较大&#xff0c;本文介绍如何通过制作docker镜像的方式&#xff0c;通过llama.cpp实现量化大模型的快速内网部署体验。 一、llam…

11.12字符串i转另一字符串

字符串i转为另一字符串 dp[i][j]是把字符串1&#xff08;长度为i&#xff09;转为字符串2&#xff08;长度为J)的操作的最少次数 如果第一个串的第i位和第二个串的第j位字符相等&#xff0c;那么dp[i][j]就等于dp[i-1][j-1]&#xff0c;即第i和第j位不需要转换&#xff0c;那…

场景图形管理-多视图多窗口渲染示例(4)

多视图多窗口渲染示例的代码如程序清单8-6所示 // 多视图多窗口渲染示例 void compositeViewer_8_6(const string &strDataFolder) {// 创建一个CompositeViewer对象osg::ref_ptr<osgViewer::CompositeViewer> viewer new osgViewer::CompositeViewer();// 创建两个…

【文件包含】任意文件包含的理解

谈谈任意文件包含的理解 1.漏洞描述 攻击者可以利用任意文件包含漏洞&#xff0c;读取文件&#xff0c;执行代码&#xff0c;对服务器造成危害。程序开发人员通常会把可重复使用函数或语句写到单个文件中&#xff0c;形成“封装”。在使用某个功能的时候&#xff0c;直接调用此…

Outlook关闭过去事件的提醒

Outlook关闭过去事件的提醒 故障现象 最近Outlook中推出的新功能让我们可以选择自动关闭过去事件的提醒。 目前这个功能暂时只向当月通道的Office 365 订阅者发布。 这些用户升级到1810版本后&#xff0c;可以在不想收到已发生事件提醒的时候通过下面的步骤自动忽略过去事件…

day22_mysql

今日内容 零、 复习昨日 一、MySQL 一、约束 1.1 约束 是什么? 约束,即限制,就是通过设置约束,可以限制对数据表数据的插入,删除,更新 怎么做? 约束设置的语法,大部分是 create table 表名( 字段 数据类型(长度) 约束, 字段 数据类型(长度) 约束 );1.1 数据类型 其实数据类型…

65.Undertow代替Tomcat

SpringBoot中我们既可以使用Tomcat作为Http服务&#xff0c;也可以用Undertow来代替。Undertow在高并发业务场景中&#xff0c;性能优于Tomcat。所以&#xff0c;如果我们的系统是高并发请求&#xff0c;不妨使用一下Undertow&#xff0c;你会发现你的系统性能会得到很大的提升…

在Spring Boot中使用进程内缓存和Cache注解

在Spring Boot中使用内缓存的时候需要预先知道什么是内缓存&#xff0c;使用内缓存的好处。 什么是内缓存 内缓存&#xff08;也称为进程内缓存或本地缓存&#xff09;是指将数据存储在应用程序的内存中&#xff0c;以便在需要时快速访问和检索数据&#xff0c;而无需每次都从…

cmmlu数据处理

cmmlu数据处理 数据处理数据地址代码解析数据处理 from glob import glob import pandas as pd from tqdm import tqdmtrain_data_path_list = glob("test/*") val_data_path_list = glob("dev/*") tran_data = pd.<

Jmeter控制RPS

一、前言 ​ RPS (Request Per Second)一般用来衡量服务端的吞吐量&#xff0c;相比于并发模式&#xff0c;更适合用来摸底服务端的性能。我们可以通过使用 JMeter 的常数吞吐量定时器来限制每个线程的RPS。对于RPS&#xff0c;我们可以把他理解为我们的TPS&#xff0c;我们就不…

解决Github上的README无法显示图片

首先感谢博主的思路&#xff1a;思路 最近写了点东西提交到git 发现本地能查看md里的图片用的相对路径&#xff0c;提交到github就看不见&#xff0c;并且发现不只是我自己的仓库看不见&#xff0c;其他人的我也看不见。那就有问题了 解决&#xff1a;正常使用相对路径&…

使用Tauri开发桌面应用

本文是对视频 Tauri入门教程[1]的学习与记录 Tauri官网[2] 对 node版本有要求 创建项目及目录介绍: 项目的目录结构如下 可以安装推荐的插件 执行npm run tauri build出错,根据 https://github.com/tauri-apps/tauri/issues/7430 执行 yarn add -D tauri-apps/cli && y…

C#Winform 打开文件浏览器

private void button1_Click(object sender, EventArgs e) {var f new OpenFileDialog();//f.Multiselect true; //多选if (f.ShowDialog() DialogResult.OK) {String filepath f.FileName;//G:\新建文件夹\新建文本文档.txtString filename f.SafeFileName;//新建文本文档…

设计模式 -- 工厂模式(Factory Pattern)

工厂模式&#xff1a;属于 创建型模 式&#xff0c;最常用的设计模式之一&#xff0c;提供了一种创建对象的最佳方式。 介绍 意图&#xff1a;定义一个创建对象的接口&#xff0c;让其子类自己决定实例化哪一个工厂类&#xff0c;工厂模式使其创建过程延迟到子类进行。主要解决…

设计模式:模板模式

目录 一、定义 二、场景 业务场景 Java源码中的应用 三、例子 四、优缺点 优点 缺点 一、定义 模板模式又叫模板方法模式&#xff0c;是指定义一个算法的骨架&#xff0c;也就是执行的步骤模板&#xff0c;然后由子类去实现其中一个或几个步骤。属于行为型设计模式。 二…