建議學(xué)習(xí)時(shí)長(zhǎng)： 30分鐘
學(xué)習(xí)方式：深入

學(xué)習(xí)目標(biāo)

• 知道如何用 jQuery 選取元素。
• 知道在選取元素的元素上過(guò)濾和添加元素。

詳細(xì)介紹

用選擇器選取元素

$(選擇器 [, 父元素])

如：

$('#save-btn');// 所有 id 為 save-btn 的
$('.btn', $('form'));// form 元素下類名包含 btn 的元素
$('.box h2.title'); // 所有類名包含 box 的元素下的類名包含 title 的 h2

jQuery 支持的選擇器包括：

• CSS 1-3 定義的選擇器。
• jQuery 自定義的選擇器。

注意：
對(duì)于 jQuery 自定義的選擇器，為了性能，先用 CSS 定義的選擇器選，再?gòu)慕Y(jié)果集中篩選時(shí)用 jQuery 自定義的選擇器。如：

// 不推薦
$('.form:visible');
$('.form :selected');
$('.list:eq(3)');
// 推薦
$('.form').filter(':visible');
$('.form').find(':selected');
$('.list').eq(3);

一些有用的選擇器

表單類

• :checked 選中的單選和復(fù)選按鈕
• :selected 選中的 <option> 元素
• :disabled ji用的表單元素

是否可見(jiàn)

• :visible 可見(jiàn)元素
• :hidden 不可見(jiàn)元素

內(nèi)容過(guò)濾

• :contains(文本) 如： $("div:contains('John')")
• :empty 沒(méi)有子元素或沒(méi)有文本內(nèi)容的元素
• :has(選擇器) 有指定子元素的元素

其他

• :not(選擇器) 不滿足指定選擇器的元素
• :animated 正在做動(dòng)畫(huà)的元素
• :eq(下標(biāo)值) 在兄弟節(jié)點(diǎn)中的位置等于下標(biāo)值的的元素。下標(biāo)從 0 開(kāi)始。
• :gt(下標(biāo)值) 在兄弟節(jié)點(diǎn)中的位置大于下標(biāo)值的的元素。下標(biāo)從 0 開(kāi)始。
• :lt(下標(biāo)值) 與 :gt 相反。

選擇器中包含元字符的處理

選擇器的元字符有：!"#$%&'()*+,./:;<=>?@[\]^{|}~。

選擇器中如果要使用選擇器的元字符，必須用 \ 來(lái)轉(zhuǎn)義。如：選擇 id 為 foo.bar 的元素，要使用 $("#foo\\.bar")。如果使用 $("#foo.bar")，則選擇的是 id 為 foo 并且有 bar 的類名的元素。

從層級(jí)中選取元素

從父元素和祖系元素中找

• .closest([選擇器])
• .parent([選擇器])
• .parents([選擇器])
• .offsetParent() 找最近的父級(jí)定位元素（position 不為 static 的元素）

從子元素中下找

• .find([選擇器])
• .children([選擇器])
• .contents() 元素下的內(nèi)容：包括文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)。常常也用來(lái)做選取 iframe 的內(nèi)容，如

$('#frameDemo').contents().find('a');
// 等效與
$('#frameDemo')[0].contentWindow.$('a');

從兄弟元素中找

• .siblings(選擇器)
• .prev()
• .prevAll()
• .next()
• .nextAll()

過(guò)濾掉不滿足條件的元素

• .filter(選擇器|函數(shù)) 如:

$(".btn")
  .filter(function(index) {
    return index > 2 && $(this).is(':visible');
});

選中集合中添加元素

• add

自定義選擇器

例如

$.extend($.expr[':'], {
    notEmpty: function(el,index, meta, stack) {
    // element- DOM元素
    // index - 堆棧中當(dāng)前遍歷的索引值
    // meta - 關(guān)于你的選擇器的數(shù)據(jù)元
    // stack - 用于遍歷所有元素的堆棧
        return $(el).val() !== "";
    }
});
$(':text:notEmpty') //所有值不為空的輸入框