JQuery学习之路Part8：家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】

电玩女神 2023-07-13 03:09 15阅读 0赞

# 一、向上寻找 #

### 获取被选元素的直接父元素 ###

语法：`parent()`  
例：

$(document).ready(function(){
        
    	$("span").parent();
    });

### 获取被选元素的所有祖先元素 ###

语法：`parents()`  
一路向上直到文档的根元素 (`<html>`)

例一：  
返回所有 `<span>` 元素的所有祖先

$(document).ready(function(){
        
    	$("span").parents();
    });

例二：  
返回所有 `<span>` 元素的所有祖先 并且它们须是 `<ul>` 元素

$(document).ready(function(){
        
    	$("span").parents("ul");
    });

### 获取介于两个给定元素之间的所有祖先元素 ###

语法：`parentsUntil()`  
例：  
查找span标签的祖先元素 直到div标签

$(document).ready(function(){
        
    	$("span").parentsUntil("div");
    });

--------------------

# 二、向下寻找 #

### 获取被选元素的后代元素 ###

**一路向下直到最后一个后代**  
语法：`find()`  
相当于 $(“ul li”)(查找全部子孙)

例一：  
返回 `<div>` 的所有后代

$(document).ready(function(){
        
    	$("div").find("*");
    });

例二：  
返回属于 `<div>` 后代的所有 `<span>` 元素

$(document).ready(function(){
        
    	$("div").find("span");
    });

### 获取被选元素的所有直接子元素 ###

注意：是**直接**子元素  
语法：`children()`  
相当于 $(“ul>li”)(只查找儿子)  
例一：  
返回每个`<div>`元素的所有直接子元素

$(document).ready(function(){
        
    	$("div").children();
    });

例二：  
返回类名为 “1” 的所有`<p>`元素 并且它们是`<div>`的直接子元素

$(document).ready(function(){
        
    	$("div").children("p.1");
    });

--------------------

# 三、向周围寻找 #

### 获取被选元素的所有同胞元素(兄弟) ###

语法：`siblings()`

例一：  
返回`<h2>`的所有同胞元素

$(document).ready(function(){
        
    $("h2").siblings();
    });

例二：  
返回属于`<h2>`的同胞元素的所有`<p>`元素

$(document).ready(function(){
        
    $("h2").siblings("p");
    });

## 向前获取 ★ ##

### 获取被选元素的上一个兄弟元素 ###

语法：`prev()`

例：

$(document).ready(function(){
        
    	 $("h2").prev();
    });

### 获取被选元素的所有前方的兄弟元素 ###

语法：`prevAll()`

例：

$(document).ready(function(){
        
    	$("h2").prevAll();
    });

### 获取介于两个给定参数之间的所有前方的兄弟元素 ###

语法：`prevUntil()`

例：  
返回介于`<h1>`与`<h6>`元素之间的所有同胞元素

$(document).ready(function(){
        
    	$("h1").prevUntil("h6");
    });

## 向后获取 ★ ##

### 获取被选元素的下一个兄弟元素 ###

语法：`next()`

例：

$(document).ready(function(){
        
    	$("h2").next();
    });

### 获取被选元素的所有跟随的兄弟元素 ###

语法：`nextAll()`

例：

$(document).ready(function(){
        
    	$("h2").nextAll();
    });

### 获取介于两个给定参数之间的所有跟随的兄弟元素 ###

语法：`nextUntil()`

例：  
返回介于`<h1>`与`<h6>`元素之间的所有同胞元素

$(document).ready(function(){
        
    	$("h1").nextUntil("h6");
    });

--------------------

# 四、绝对位置寻找 #

### 获取被选元素的首个元素 ###

语法：`first()`

例：  
选取首个`<div>`元素内部的第一个`<p>`元素

$(document).ready(function(){
        
    	$("div p").first();
    });

### 获取被选元素的最后一个元素 ###

语法：`last()`

例：  
选择最后一个`<div>`元素中的最后一个`<p>`元素

$(document).ready(function(){
        
    	$("div p").last();
    });

### 获取被选元素中带有指定索引号的元素 ###

语法：`eq()`

例：  
选取第二个`<p>`元素（索引为 1）

$(document).ready(function(){
        
    	$("p").eq(1);
    });

##### 获取下标数字 #####

语法：`index()`  
例：  
获取第一个li标签的下标

$("li").eq(0).index()

### 规定一个标准 不匹配这个标准的元素会被从集合中删除 ###

语法：`filter()`  
**匹配的元素会被获取**  
与 not() 相反

例：  
返回带有类名 “apple” 的所有`<p>`元素

$(document).ready(function(){
        
    	$("p").filter(".apple");
    });

### 获取不匹配标准的所有元素 ###

语法：`not()`  
与 filter() 相反  
例：  
返回不带有类名 “orange” 的所有`<p>`元素

$(document).ready(function(){
        
    	$("p").not(".orange");
    });

--------------------

JQuery学习之路Part8：家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HJ27 查找兄弟单词

相关多路查找树

相关 Jquery的父，子，兄弟节点查找方法

相关多路查找树

相关 JQuery学习之路Part8：家族树操作(查找祖先、后代、兄弟同胞、绝对查找)【完结】

相关多路查找树

相关 JQUERY的父，子，兄弟节点查找方法

相关 [编程题]查找兄弟单词

相关华为OJ-查找兄弟单词

相关 B树学习笔记之B树的查找