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