jQuery的篩選器

2021-10-05 12:09:35 字數 2199 閱讀 4457

1<

/li>

2<

/li>

3<

/li>

4<

/li>

"li5"

>

5<

/li>

6<

/li>

7<

/li>

8<

/li>

<

/ul>

"./jquery.min.js"

>

<

/script>

// 什麼是jquery的篩選器

// 在通過選擇器,獲取到標籤物件的基礎上,再來進行篩選,選擇出符合條件的標籤物件

// 篩選器一定是在選擇器的基礎上使用

// 為了鏈式程式設計方便

// 篩選器的執行結果,也一定是乙個偽陣列

// 獲取ul中,所有子級li標籤$(

'ul>li');

// li標籤偽陣列中,第乙個標籤物件,也是偽陣列

console.

log($(

'ul>li').

first()

);// li標籤偽陣列中,最後乙個標籤物件,也是偽陣列

console.

log($(

'ul>li').

last()

);// li標籤偽陣列中,按照索引下標獲取

console.

log($(

'ul>li').

eq(2)

);// 當前標籤的上乙個兄弟標籤

// $('ul>li').eq(2) 索引是2的第三個標籤

// $('ul>li').eq(2).prev() 索引是2的第三個標籤的上乙個兄弟標籤,也就是索引是1的第二個標籤

console.

log($(

'ul>li').

eq(2)

.prev()

);// 當前標籤的下乙個兄弟標籤

// $('ul>li').eq(2) 索引是2的第三個標籤

// $('ul>li').eq(2).next() 索引是2的第三個標籤的下乙個兄弟標籤,也就是索引是3的第四個標籤

console.

log($(

'ul>li').

eq(2)

.next()

);// 當前標籤之前的所有兄弟標籤

// $('ul>li').eq(2) 索引是2的第三個標籤

// $('ul>li').eq(2).prevall() 索引是2之前的所有標籤

console.

log($(

'ul>li').

eq(2)

.prevall()

);// 當前標籤之後的所有兄弟標籤

// $('ul>li').eq(2) 索引是2的第三個標籤

// $('ul>li').eq(2).nextall() 索引是2之後的所有標籤

console.

log($(

'ul>li').

eq(2)

.nextall()

);// 當前標籤的所有兄弟標籤,不管前後

// $('ul>li').eq(2) 索引是2的第三個標籤

// $('ul>li').eq(2).siblings() 除索引是2的所有兄弟標籤

console.

log($(

'ul>li').

eq(2)

.siblings()

);// 當前標籤的直接父級標籤

console.

log($(

'ul>li').

eq(2)

.parent()

);// 當前標籤的所有父級標籤

console.

log($(

'ul>li').

eq(2)

.parents()

);// 根據條件來查詢jquery,標籤偽陣列中符合的標籤

// $('ul').find(條件)

// 在ul標籤中,find定義的條件來查詢

// 在爹中,按照條件找兒子

console.

log($(

'ul').

find

('[name="li5"]'))

;<

/script>

jQuery的篩選器

首先了解一下 jquery 是乙個前端類庫 方法庫,工具庫 有人把 js 裡面各種 dom 操作都給你封裝好了 獲取 dom 元素 操作元素的 類名 操作元素的 屬性 操作元素的 樣式 元素 動畫 jquery 是乙個類庫 方法庫 jquery 裡面 95 以上都是方法 使用的時候,別忘了寫 jqu...

jQuery基本篩選器

jquery基本篩選器,是js中沒有的乙個功能。可以批量選 擇或在一批元素中特定選擇乙個元素,一般與選擇器配合使用,非常方便。first 選擇符合條件的元素中的第乙個元素。html div div div jquery 選中第乙個div div first text 第乙個div last 選中符合...

jquery篩選器方法

篩選方法可以進行鏈式篩選 li first 元素集合中的第乙個 li last 元素集合中的最後乙個 div next div的下乙個兄弟元素 div prev div的上乙個兄弟元素 div nextall div後面的所有兄弟元素 div prevall div前面的所有兄弟元素 div par...