jQuery -- 光陰似箭（四）：jQuery 遍歷

来源:https://www.cnblogs.com/ChengWenHao/archive/2018/11/13/JQueryPart4.html
-Advertisement-
Play Games

jQuery -- 知識點回顧篇（四）：jQuery 遍歷 通過 jQuery 遍歷，您能夠從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進行遍歷。 1. 向上遍歷 DOM 樹，查找元素的祖先。 parent() 方法，pa ...


jQuery -- 知識點回顧篇（四）：jQuery 遍歷

通過 jQuery 遍歷，您能夠從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進行遍歷。

1. 向上遍歷 DOM 樹，查找元素的祖先。

　　parent() 方法，parents() 方法，parentsUntil() 方法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){ 
            //parent() 方法返回被選元素的直接父元素。該方法只會向上一級對 DOM 樹進行遍歷。
            //parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)。
            //parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。
            $("#btn_parent").click(function(){
                $("#myDiv3").parent().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_parents").click(function(){
                $("#myDiv3").parents().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_parentsUntil").click(function(){
                $("#myDiv3").parentsUntil("body").css({"color":"red","border":"3px solid red"});
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_parent">parent</button><br/>
    <button type="button" id="btn_parents">parents</button><br/>
    <button type="button" id="btn_parentsUntil">parentsUntil</button><br/>
    <div id="myDiv1" style="width:210px;height:90px;padding: 10px;border:2px solid blue;">
        <div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >
            <div id="myDiv3" style="width:70px;height:30px;padding: 10px;border:2px solid yellow;" >
            </div>
        </div>
    </div>   
</body>
</html>

　　

　　

 

 2. 向下遍歷 DOM 樹，查找元素的後代。children() 方法，find() 方法。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){ 
            //children() 方法返回被選元素的所有直接子元素。該方法只會向下一級對 DOM 樹進行遍歷。
            //find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
            $("#btn_children1").click(function(){
                $("#myDiv1").children().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_children2").click(function(){
                $("#myDiv1").children("div.class1").css({"color":"red","border":"3px solid red"});
            });
            $("#btn_find1").click(function(){
                $("#myDiv1").find("div").css({"color":"red","border":"3px solid red"});
            });
            $("#btn_find2").click(function(){
                $("#myDiv1").find("*").css({"color":"red","border":"3px solid red"});
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_children1">children</button><br/>
    <button type="button" id="btn_children2">children_class1</button><br/>
    <button type="button" id="btn_find1">findDiv</button><br/>
    <button type="button" id="btn_find2">find*</button><br/>
    <div id="myDiv1" style="width:210px;height:140px;padding: 10px;border:2px solid blue;">
        <div id="myDiv2" style="width:140px;height:60px;padding: 10px;border:2px solid green;" >
            <div id="myDiv3" style="width:70px;height:40px;padding: 10px;border:2px solid yellow;" >
                <p id="myP1" style="width:50px;height:20px;padding: 3px;border:2px solid black;" >
                </p>
            </div>
        </div>
        <div Class="class1" style="width:140px;height:30px;padding: 10px;border:2px solid green;" >
        </div>
    </div>   
</body>
</html>

 

 

 

 3. 遍歷元素的同胞元素：siblings() 方法，next() 方法，nextAll() 方法，nextUntil() 方法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){ 
            //children() 方法返回被選元素的所有直接子元素。該方法只會向下一級對 DOM 樹進行遍歷。
            //find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。
            $("#btn_siblings").click(function(){
                $("#myDiv21").siblings().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_next").click(function(){
                $("#myDiv21").next().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_nextAll").click(function(){
                $("#myDiv21").nextAll().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_nextUntil").click(function(){
                $("#myDiv21").nextUntil("h5").css({"color":"red","border":"3px solid red"});
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_siblings">siblings</button><br/>
    <button type="button" id="btn_next">next</button><br/>
    <button type="button" id="btn_nextAll">nextAll</button><br/>
    <button type="button" id="btn_nextUntil">nextUntil</button><br/>
    <div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
        <div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <h5>Hello</h5>
        <div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
    </div>   
</body>
</html>

 

 

 4. 過濾方法：基於其在一組元素中的位置來選擇一個特定的元素。

　　　　first() 方法，last() 方法，eq() 方法，filter() 方法，not() 方法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){ 
            //first() 方法返回被選元素的首個元素。
            //last() 方法返回被選元素的最後一個元素。
            //eq() 方法返回被選元素中帶有指定索引號的元素。
            //filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
            //not() 方法返回不匹配標準的所有元素。
            $("#btn_first").click(function(){
                $("#myDiv1 div").first().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_last").click(function(){
                $("#myDiv1 div").last().css({"color":"red","border":"3px solid red"});
            });
            $("#btn_eq").click(function(){
                $("#myDiv1 div").eq(2).css({"color":"red","border":"3px solid red"});
            });
            $("#btn_filter").click(function(){
                $("#myDiv1 *").filter("h5").css({"color":"red","border":"3px solid red"});
            });
            $("#btn_not").click(function(){
                $("#myDiv1 *").not("h5").css({"color":"red","border":"3px solid red"});
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btn_first">first</button>
    <button type="button" id="btn_last">last</button>
    <button type="button" id="btn_eq">eq</button>
    <button type="button" id="btn_filter">filter</button>
    <button type="button" id="btn_not">not</button>
    <div id="myDiv1" style="width:210px;height:190px;padding: 10px;border:2px solid blue;">
        <div id="myDiv21" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv22" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <div id="myDiv23" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
        <h5>Hello</h5>
        <div id="myDiv24" style="width:140px;height:20px;padding: 5px;border:2px solid green;" >
        </div>
    </div>   
</body>
</html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Oracle資料庫新裝之後出現的監聽程式無法正常啟動和運行（Oracle-12514）
    修改安裝目錄下的配置文件 比如：F:\app\admin-PC\product\11.2.0\dbhome_1\network\admin\ 修改這個目錄下的listener.ora和tnsnames.ora ********************************************* ...
  • MySQL8.0初體驗
    MySQL8.0的官方社區開源版出來有段時間了，而percona的8.0版本還沒有正式對外發佈（已發佈測試版），一直以來也沒安裝體驗下這個號稱質的飛躍的版本，今天正好有些時間就下了安裝體驗體驗。 一、MySQL8.0下載 下載地址：https://dev.mysql.com/get/Download ...
  • 漫畫資料庫_基礎和設計資料庫
    資料庫 1,簡單說，資料庫就是可以共用數據，防止數據的不一致和重覆。其實簡簡的兩句話包含了好多好多東西。一點點學習吧。 2,最簡單的概念也記錄一下吧：一條數據叫做記錄，各個項目稱為欄位，確定數據的列叫主鍵，使用表格處理數據，基於數學運算（並，差，交，笛卡爾積，投影，選擇，連接，除）來處理數據。 並： ...
  • 學習安卓開發[2] - 在Activity中托管Fragment
    在上一篇 學習安卓開發[1] 程式結構、Activity生命周期及頁面通信 中，學習了Activity的一些基礎應用，基於這些知識，可以構建一些簡單的APP了，但這還遠遠不夠，本節會學習如何使用Activity托管Fragment的方式來進行開發 [TOC] 為什麼需要Fragment 單純使用Ac ...
  • iOS 12.1 跳轉頁面時 tabBar閃動
    最新iOS 12.1系統，self.hidesBottomBarWhenPushed = YES，tabBar發生閃動 設置為不透明就行了。[[UITabBar appearance] setTranslucent:NO]; ...
  • 自動生成支付寶自定義收款碼
    之前看到一篇關於xposed 介紹， 發現用xposed 可以用手機做很多好玩的東西。就研究用這個做了一個可以自動生成收款的碼的程式。僅個人學習使用， 通過hook 支付寶函數， 可以調用支付寶生成個人收款二維碼url 地址。 把地址回傳給自己的應用程式。 ...
  • android找不到aar包
    轉載請標明出處，維權必究：https://www.cnblogs.com/tangZH/p/9939663.html 在做項目的時候引入aar包，編譯的時候卻提示錯誤（這個錯誤大概說的是.......模塊B>模塊C......有點忘了），其實大概可以看出是由於多個模塊重覆依賴造成的，下麵具體講講：主 ...
  • js調用百度地圖介面繪製任意多邊形並獲取每個點的經緯度等
    來自：https://blog.csdn.net/u013239236/article/details/52213977 侵刪 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類