jQuery—向下遍历（children和find方法）

最新推荐文章于 2024-04-26 15:49:21 发布
最新推荐文章于 2024-04-26 15:49:21 发布
阅读量1.8k 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42036616/article/details/81976121
版权

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="traverseText.js
"></script>
</head>
<style>
    #container{
        width: 425px;
        height: 250px;
        border:10px solid cornflowerblue;
    }
    
    #wrapper{
        width: 305px;
        height: 145px;
        margin-top: 15px;
        margin-left: 15px;
        border: 6px solid forestgreen;
    }
    
    ul{
        width: 175px;
        height: 65px;
        margin-top: 15px;
        margin-left: 15px;
        border: 2px solid firebrick;
    }
</style>
<body>
      <div id="container">容器
           <div id="wrapper">承载列表
               <ul id="content">
                   <li>法师</li>
                   <li>德鲁伊</li>
                   <li>潜行者</li>
               </ul>
           </div>
      </div><br/><br/>
      <button id="childBtn1">child子元素</button>
      <button id="childBtn2">child孙元素</button>
      <button id="findBtn">find孙元素</button>
</body>
</html>

JS代码：

$(document).ready(function () {
   
   $("#childBtn1").click(function () {
       $("#container").children().css({border:"8px solid black"});
   });
   $("#childBtn2").click(function () {
       $("#container").children("ul").css({border:"8px solid black"});
   });
   $("#findBtn").click(function () {
       $("#container").find("ul").css({border:"8px solid blueviolet"});
   });
}); 
//向下遍历时，children（）方法只能访问子元素，括号内只能添加子元素，添加其他没用
//而find（）方法可以访问孙元素以及更下一级元素

效果：

 

何迟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery遍历之children()方法
qq_37036642的博客
08-03 3505
jQuery遍历之children()方法 jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系） 理解节点查找关系： 1 代码
jQuery对DOM元素的向下遍历
bug_404的博客
09-12 366
这个章节主要学jquery中向下遍历：可以使用children（）和find（）方法 具体实现如下： hello world #div1{ width:500px; height:200px; border:3px solid coral; } #div2{ width:400px; height:150px; margin-
Stream总结
qq_42394862的博客
10-03 165
stream
JDK1.8新特性Stream流式操作，简化遍历操作
Thinkingcao的专栏
09-18 1万+
一. 前言 随着Java的发展，越来越多的企业开始使用JDK1.8 版本。JDK1.8 是自 JDK1.5之后最重要的版本，这个版本包含语言、编译器、库、工具、JVM等方面的十多个新特性。本次文章将着重学习Stream。 Stream 是JDK1.8 中处理集合的关键抽象概念，Lambda 和 Stream 是JDK1.8新增的函数式编程最有亮点的特性了，它可以指定你希望对集合进行的操作，可以执行非常复杂的查找、过滤和映射数据等操作。使用Stream API 对集合数据进行操
jQuery遍历节点的方法
zhang20040217的博客
04-26 399
3、**.parentsUntil()**：获取元素的所有祖先元素，直到遇到匹配的选择器为止。11、**.prevUntil()**：获取元素之前的所有同胞元素，直到遇到匹配的选择器为止。8、**.nextUntil()**：获取元素之后的所有同胞元素，直到遇到匹配的选择器为止。2、**.parents()**：获取元素的所有祖先元素，直到（但不包括）DOM树的顶部。12、**.find()**：获取元素的后代元素，根据提供的选择器进行过滤。10、**.prevAll()**：获取元素之前的所有同胞元素。
jQuery中.find()方法？
热门推荐
墓亦龍的博客
03-30 3万+
.find()方法？1、定义及用法：返回被选元素的后代元素，后代是子、孙、曾孙，依此类推。                          $(selector) .find(filter)  ; 参数必选，可为元素、jQuery对象或选择器表达式。                                                                 若要返回所有的后代...
jQuery获取button上的值
跑码场
11-02 1万+
jQuery获取button上的值 jQuery获取第一个子元素 获取第一个元素： $(“#getfirst”).find(“ul li:first-child”) 或$(“#getfirst”).find(“ul li”).get(0) 或$(“#getfirst”).find(“ul li”).first()
jquery中find的基本用法和功能
蜗牛驿站
02-21 1万+
find的功能是：搜索find后面的元素，来执行指定操作。 例如 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;   &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;bod
jQuery find和children方法使用
10-28
在JavaScript的DOM操作中，jQuery库提供了一系列便捷的方法来帮助开发者高效地操作DOM元素，其中`find`和`children`是两个常用的子元素查询方法。本文将详细解析这两个方法的使用，以及它们在实际开发中的应用场景。...
jQuery中children()方法用法实例
12-03
这个方法不包括后代元素，只针对一级子节点进行操作，这一点与`find()`方法不同，`find()`可以遍历所有子孙元素。 `children()`方法的基本语法如下： ```javascript $(selector).children(expr) ``` 在这里，`...
jQuery循环遍历子节点并获取值的方法
10-22
在Web开发中，jQuery是一个非常强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。本篇文章将详细讲解如何使用jQuery...对于jQuery遍历算法和技巧，可以参考相关的jQuery专题，以深入学习和掌握。
jQuery常见的遍历DOM操作详解
10-18
向下遍历DOM时，有两个重要的方法：`children()`和`find()`。`children()`返回所有直接子元素，而`find()`则可以选取任意层级的后代元素。例如，如果有一个`<div>`，`children()`会返回其中的所有一级子元素，如`<p>...
jQuery遍历DOM元素与节点方法详解
10-22
以下是对jQuery遍历DOM元素与节点方法的详细解释： **一、向上遍历（祖先元素）** 1. `$(selector).parent([filter])`：返回匹配的元素的直接父元素。如果提供了过滤器`filter`，则只返回符合该过滤条件的父元素。...
jquery each() children()
qq_37672347的博客
09-18 1770
1、each() 方法规定为每个匹配元素规定运行的函数。 $("button").click(function(){ $("li").each(function(){ alert($(this).text())// 输出所有的li元素 }); }); 2、eq() 3、children() children 查找直接的子元素，不会跨层级 <!DOCTYPE ht...
jQuery遍历find()方法
qq_43742368的博客
05-26 503
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="../jquery-1.10.2.min.js"></script> <script type="text/javas
html find id,jQuery find("#id")与find(".class")实例分析与比较
weixin_42297846的博客
06-16 2932
JQuery find()方法是用来查找某个或某些元素，find()参数可以是元素的id，也可以是元素的class类名，但两者得到的结果是不一样的，本文将详细介绍find()方法的使用方法。jQuery find()方法HTML实例代码子元素p1子元素p2子元素p3子元素p4子元素p5子元素p6子元素p1子元素p2子元素p3子元素p4子元素p5子元素p6$(function(){$("#btn...
jQuery遍历之向下遍历（children方法和find方法）
飞翔的仙女杀手的博客
05-15 538
jQuery遍历向下遍历，利用children和find方法能更好的进行元素的控制
VIM向上搜索和向下搜索
BorisCao的博客
06-20 1万+
概述 在VIM中，搜索分向上搜索和向下搜索两个方向，用:/表示向下搜索，用:?表示向上搜索。 命令一 :/keyword ，向下搜索，如果到底了，VIM会自动从头开始。 :?keyword ，向上搜索，如果到头了，VIM会自动从底部开始。 搜索之后，按n命令，可以自动跳到下一个匹配的位置。 命令二 针对光标停留处的特定的单词，可以使用快捷键进行向上和向下的搜索，而且是vim的全词搜索。 Shift + 8，即*键，直接对光标停留处的单词进行向下搜索； Shift + 3，即#键，直接对光标停留处的单词进
jquery层级查找方式
黄彪博客
12-04 1811
下面使用jquery的层级查找方式   $(document).ready( function(){ /*第一种方式层级查找,查找的是a标签对象——选择器*/ $('.thumb-hover a:has(img)').each(function(){ alert($(this).attr("pid")); }); /*第三种
jquery遍历节点
最新发布
06-13
jQuery是一个流行的JavaScript库，它简化了DOM（文档对象模型）操作和事件处理。在jQuery中，遍历节点主要通过选择器（selectors）来选取HTML元素，并提供一系列的方法来操作这些元素。这里有几个常见的方法： 1. `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值