jQuery（九）：节点遍历
2024-04-08 21:33:39
一、遍历子元素
children()方法可以用来获取元素的所有子元素，语法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 遍历子节点var $body=$("body").children();// 输出2 只考虑img和ul元素，不考虑ul里面的li元素
alert("长度:"+$body.length);});</script>
</head>
<body><img src="ad.jpg" alt="美梦成真系列抽奖" /><ul><li><a href="#">小米的MI 2手机</a></li><span class="hot">火爆销售中</span><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul>
</body>
</html>效果：
二、遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素，语法如下：
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 遍历子节点//var $body=$("body").children();// 输出2 只考虑img和ul元素，不考虑ul里面的li元素//alert("长度:"+$body.length);// 获取同辈节点// 第三个li标签的背景色改变
$("li:eq(1)").next().css("background-color","green");// 第一个li标签的背景色改变
$("li:eq(1)").prev().css("background-color","#F06");});</script>
</head>
<body><img src="ad.jpg" alt="美梦成真系列抽奖" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul>
</body>
</html>效果：
siblings()示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 遍历子节点//var $body=$("body").children();// 输出2 只考虑img和ul元素，不考虑ul里面的li元素//alert("长度:"+$body.length);// 获取同辈节点// 第三个li标签的背景色改变//$("li:eq(1)").next().css("background-color","green");// 第一个li标签的背景色改变//$("li:eq(1)").prev().css("background-color","#F06");// 除了第二个li标签，其它li标签的背景色都改变
$("li:eq(1)").siblings().css("background-color","green");});</script>
</head>
<body><img src="ad.jpg" alt="美梦成真系列抽奖" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul>
</body>
</html>效果：
三、遍历前辈元素
jQuery中可以遍历前辈元素，方法如下：
- parent()：获取元素的父级元素。
- parents()：获取元素的祖先元素。
parent()获取父级元素示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 遍历子节点//var $body=$("body").children();// 输出2 只考虑img和ul元素，不考虑ul里面的li元素//alert("长度:"+$body.length);// 获取同辈节点// 第三个li标签的背景色改变//$("li:eq(1)").next().css("background-color","green");// 第一个li标签的背景色改变//$("li:eq(1)").prev().css("background-color","#F06");// 除了第二个li标签，其它li标签的背景色都改变//$("li:eq(1)").siblings().css("background-color","green");// 获取前辈元素// 父级ul改变背景色
$("li:eq(1)").parent().css("background-color","green");});</script>
</head>
<body><img src="ad.jpg" alt="美梦成真系列抽奖" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul>
</body>
</html>效果：
parents()祖先元素示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 遍历子节点//var $body=$("body").children();// 输出2 只考虑img和ul元素，不考虑ul里面的li元素//alert("长度:"+$body.length);// 获取同辈节点// 第三个li标签的背景色改变//$("li:eq(1)").next().css("background-color","green");// 第一个li标签的背景色改变//$("li:eq(1)").prev().css("background-color","#F06");// 除了第二个li标签，其它li标签的背景色都改变//$("li:eq(1)").siblings().css("background-color","green");// 获取前辈元素// 父级ul改变背景色//$("li:eq(1)").parent().css("background-color","green");// 祖先级元素 整个body元素改变背景色
$("li:eq(1)").parents().css("background-color","green");});</script>
</head>
<body><img src="ad.jpg" alt="美梦成真系列抽奖" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul>
</body>
</html>效果：
四、其他方法
1、jQuery遍历-each()
以每一个匹配的元素作为上下文来执行一个函数，例如：
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历其他方法演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){$("input[type='button']").click(function(){// 遍历每一个li元素，弹出li元素的text值
$("li").each(function(){alert($(this).text());});});});</script>
</head>
<body><img src="ad.jpg" alt="1" /><img src="ad.jpg" alt="2" /><img src="ad.jpg" alt="3" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul><input type="button" value="点击按钮" />
</body>
</html>效果：
示例2：i的含义
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历其他方法演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){/* $("input[type='button']").click(function(){// 遍历每一个li元素，弹出li元素的text值$("li").each(function(){alert($(this).text());});}); */// i表示图片的索引值，从0开始
$("img").each(function(i){this.alt="test"+i+".jpg";console.log(this.alt);});});</script>
</head>
<body><img src="ad.jpg" alt="1" /><img src="ad.jpg" alt="2" /><img src="ad.jpg" alt="3" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul><input type="button" value="点击按钮" />
</body>
</html>效果：
2、查找方法-find()
搜索所有与指定表达式匹配的元素，例如：
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>节点遍历其他方法演示示例</title><style>.hot{color: #ff0000;}a{color: #000000;text-decoration: none;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){/* $("input[type='button']").click(function(){// 遍历每一个li元素，弹出li元素的text值$("li").each(function(){alert($(this).text());});}); */// i表示图片的索引值，从0开始/* $("img").each(function(i){this.alt="test"+i+".jpg";console.log(this.alt);}); */// 查找方法
$("li").find("span").css("color","green");});</script>
</head>
<body><img src="ad.jpg" alt="1" /><img src="ad.jpg" alt="2" /><img src="ad.jpg" alt="3" /><ul><li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li><li><a href="#">苹果iPad mini</a></li><li><a href="#">三星GALAXY III</a></li><li><a href="#">苹果iPhone 5s</a></li></ul><input type="button" value="点击按钮" />
</body>
</html>效果：
转载于:https://www.cnblogs.com/dotnet261010/p/9736169.html
jQuery（九）：节点遍历相关推荐
- jQuery 7 节点遍历
jQuery提供了非常好的方法去遍历节点 : next("过滤元素"):用于获取节点之后紧临的第一个同辈元素.如:$(".myclass").next(&quo ...
- 【笔记】jQuery源码（节点遍历）
前言 内容主要是跟着慕课网上的jQuery源码解析系列课程以及自己的实践+理解来写的,可能会有错误,欢迎指出^_^. 节点遍历 遍历的接口可以分为4个类型: 祖先 同胞兄弟 后代 过滤 所以这个章节的 ...
- Jquery 里的节点遍历(next(),perv(),nextAll(),prevAll())
1.节点遍历 <div> <ul> <li>111</li> <li>222</li> <li>333</li ...
- 从零开始学习jQuery (九) jQuery工具函数
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jquery 元素节点操作 - 创建节点、插入节点、删除节点
jquery的节点操作说明 前面的篇章对于jquery的元素操作大部分是使用html()的方式来操作,这种直接使用字符串创建的方式也是性能最高的. 使用html()操作节点 首先编写一个div包含一个 ...
- matlab九节点网络仿真问题,三机九节点电力系统仿真matlab.docx
电力系统仿真作业 三机九节点电力系统 暂态仿真 学院:能源与动力工程学院 专业:电力系统及其自动化 学号: 姓名:于永生 导师: 授课教师: 目录 TOC \o "1-3" \h ...
- JQuery-学习笔记05【高级——JQuery动画和遍历】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
最新文章
- Make Them Equal 埃氏筛法（1200）
- Executor框架、ThreadPoolExecutor、3种常见的线程池
- JAVA Java多线程与并发库
- kafka 集群_kafka 集群及原理
- 【BZOJ1497】【codevs1789】最大获利，网络流之最大权闭合子图
- 搭建PHP官方框架zend framework 2（LINUX）
- Java之品优购课程讲义_day05（4）
- 手动 将exe加入到系统启动服务、卸载服务的方法
- Javaweb实现在线预览word文件
- Vmware 可用的激活码
- 《遥感原理与应用》孙家抦版知识点总结（含简答题）——第一章
- 【历史上的今天】2 月 17 日：谷歌收购 Blogger；英伟达创始人出生；微软发布 Windows 2000
- 程序员面试指南 - 自我介绍
- java 地牢猎手,地牢猎手5新手必看速成攻略
- 嵌入式Linux入门-手把手教你初始化SDRAM(附代码)
- 四、Mosquitto 高级应用之用户配置
- List集合关于Stream的操作
- 解决http请求下无法开启麦克风问题
- 基于BenchmarkSQL的Oracle数据库tpcc性能测试
- rj45插座尺寸图_RJ45、RJ11 插座系列产品技术参数(中英文)