jQ的四類基本選擇器


jQuery的四種選擇器

jQ選擇器與css選擇器本質上相差不大,但是在使用容易混淆格式或屬性

1.基礎選擇器

$('#id名')

$('.類名')

$('.類名1 .類名2')

$('標簽名.類名')

2.層級選擇器
1.子代:> children

$('基礎選擇器1>基礎選擇器2')//,代表選中1的子代2

2.后代: 空格

$('基礎選擇器1 基礎選擇器2')//空格,代表選中所有1的后代2

兩者還可以通過下標來選中元素

$('基礎選擇器1 基礎選擇器2')[2]//注意是下標,這里代表第三個元素2

3.過濾選擇器

eq匹配一個給定索引值的元素

1.原生方法

通過$(':nth-child(n)') //這里的n不是下標,直接代表第幾個

2.jQ方法

同過$(':eq(n)')//這里的n代表的下標,當前元素 = 第(n-1)個,從0開始計數

同時jQ方法還可以通過奇偶數批量選擇元素

$('eg:odd')

$('eg:even')

4.篩選選擇器

括號的參數參數除了基礎選擇器之外還可以用過濾選擇器eq,比如:

$("#box").children("div:eq(n)")

1. .children()

不輸入參數是全選,輸入參數可以選擇指定的元素,

2. .find()

傳入參數*可以找到所有的后代元素

也可以獲得指定的后代元素

3. .siblings()

獲得所有兄弟元素,除了自己,在實際的使用中可以結合排他思想,比如選用sibilings方法設置其他元素,然后設置自己,大幅節約代碼

傳入參數可以獲得指定的兄弟元素

4. .prev()/.next()

獲得上一個或下一個兄弟元素

5. .prevAll()/.nextAll()

獲得前方或者后方的所有兄弟元素

6. .parent()/.parents()

.parent() 這個方法用來獲得所有父級元素

.parents() 在加了s后表示獲取所有上級元素,一直到document

這里聯系一下parentNode和parentElement,他們主要區別是,前者最高可以讀取到Document,而parentElement只能讀取到html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM