【JavaWeb】85：jQuery的各類選擇器

今天是劉小愛自學Java的第85天。

感謝你的觀看，謝謝你。

話很少說，開始今天的學習：

選擇器的做用是什麼？

能夠快速準確地定位咱們所須要的標籤。

剛學CSS的時候，以爲CSS選擇器也太多了吧，當時就想要不不學了吧，就只學了基本選擇器。

到了jQuery，仍是要學各類選擇器。

果真，你如今所欠下來的，未來都得還回來。

1、基本選擇器

初學jQuery有個很是使人苦惱的地方：時常會把jQuery語法和js語法搞混。

事實上它們之間的語法有必定的類似度，但基本都不是同樣的。

就好比說點擊事件(匿名函數註冊)：

• js語法：js.onclick=function(){}。
• jQuery語法：jQuery.click(function(){})。

通俗一點理解就是：

• js對象對應的是 屬性， 給屬性賦值。
• jQuery對象對應的是 方法， 給方法一個參數。

CSS中基本選擇器有3種，在jQuery中比CSS還多一種，依次分析：

爲了觀看更直接，將每一個選擇器和一個按鈕綁定，經過觸發點擊事件完成對應的操做，語法上面就已經作了說明。

①id選擇器

格式爲：$("#myId01")。

經過它能夠操做對應id的標籤。

②類選擇器

格式爲：$(".divClass")。

經過它能夠操做對應類名的標籤。

jQuery語法的簡潔之處就是在於此：若是是使用js語法，獲得的元素爲一個數組，因此要使用for循環依次賦值。

事實上jQuery對象自己就是一個js數組，至關於將for循環遍歷賦值這個步驟簡化了。

咱們作一個對比：

③標籤選擇器

格式爲：$("div")。

經過它能夠操做對應標籤名的標籤，其效果和類選擇器很類似。

④全選選擇器

格式爲：$("*")。這是jQuery中多於CSS的地方。

經過它能夠操做全部標籤，在數據庫中：「*」也表明了查詢全部元素的意思。

2、層級選擇器

層級選擇器一共有4種，逐一說明：

①層級選擇器：ancestor descendant

格式爲：$("body div")，選擇器之間用空格隔開。

ancestor是祖先，descendant是子孫，這個的意思就是選擇body標籤中的全部div標籤。

②層級選擇器：parent > child

格式爲：$("body>div")，選擇器之間用大於號隔開。

parent是父母，child是子女，這個的意思就是body標籤中的下一級div標籤。

• 祖先是有不少代的，對應多級子標籤。

• 父母只有一代，對應下一級子標籤。

③層級選擇器：prev+next

格式爲：$("#DivId01+div")，選擇器之間用加號隔開。

prev：上一個，id選擇器，id爲DivId01。

next：下一個。因此是id爲DivId01的下一個Div標籤。

④層級選擇器：prev~siblings

格式爲：$("#DivId01~div")，選擇器之間用~隔開。

prev：上一個，規則同上。

siblings：兄弟姐妹的意思，可是在這裏只是弟弟妹妹。

也就是id爲DivId01的後面全部Div標籤。

值得注意的是：這兩種都是同級之間操做的，不涉及到它們的子標籤。

3、屬性選擇器

在標籤中是有各類各樣的屬性的，好比style屬性，name屬性，value屬性，title屬性…等等。

能夠經過屬性查找到對應的標籤。

attribute，屬性的意思，可簡寫爲attr。由於太多了，就沒有選全。

①屬性選擇器：[attribute]

格式爲：$("div[name]")，這裏也就是div標籤裏的name屬性。

②屬性選擇器：[attribute=value]

格式爲：$("div[name='twoName']")，這裏也就是div標籤裏的name屬性值爲「twoName」。

③屬性選擇器：[attribute!=value]

格式爲：$("div[name!='twoName']")，除去name值爲twoName之外的全部div標籤。

④屬性選擇器：[attribute^=value]

格式爲：$("div[name^='t']")，這裏也就是div標籤裏的name屬性值以「t」開頭。

⑤屬性選擇器：[attribute$=value]

格式爲：$("div[name$='e']")，這裏也就是div標籤裏的name屬性值以「e」結尾。

⑥屬性選擇器：[attribute=value]*

格式爲：$("div[name*='four']")，這裏也就是div標籤裏的name屬性值包含‘four’。

⑦屬性選擇器：[attrSel1][attrSel2][attrSelN]

也就是多個屬性選擇器相結合。

格式爲：$("div[id='oneId'][name*='Name']")，前面是id選擇器爲「oneId」的div標籤，後面是name屬性值包含Name。

4、基本篩選器

一共太多種了，就不一一說明了，說幾種常見的：

HTML中有不少個div標籤，其每一個標籤對應一個索引，從0索引位開始。

①過濾選擇器：:first

格式：$("div:first")。也就是指0索引位的div標籤。

②過濾選擇器：:last

格式：$("div:last")。也就是指最後一個索引位的div標籤。

③過濾選擇器：:not

格式：$("div:not(#oneId)")。

#oneId即指id爲oneId的標籤，前面有一個not就是表示除了該標籤外其它的全部標籤。

④過濾選擇器：:even

格式：$("div:even")。也就是指偶數索引位的div標籤。

⑤過濾選擇器：:odd

格式：$("div:odd")。也就是指奇數索引位的div標籤。

⑥過濾選擇器：:gt(索引位)

格式：$("div:gt(2)")。也就是指索引位大於2的div標籤。

⑦過濾選擇器：:lt(索引位)

格式：$("div:lt(2)")。也就是指索引位小於2的div標籤。

沒有寫全，還有：

• :eq(索引位)，等於對應索引位的標籤。

• :header，$(":header")選取文檔中全部的標題（也就是h標籤）

• :animated，$(":animated")選取文檔中執行動畫的元素。

5、表單對象屬性選擇器

表單標籤，前段時間專門學習過，其基本屬性就不贅述了。

學幾個表單對象屬性，首先看一個頁面：

須要達到以下效果：

①可用元素

點擊該按鈕，能選取可用元素，同時給文本框賦值。

②不可用元素

要求規則同①。

③多選框選中元素

點擊該按鈕，能選取多選框中已經被選中的元素，同時將選中的值在控制檯上打印。

④下拉框選中元素

點擊該按鈕，能選取下拉框中已經被選中的元素，同時將選中的值在控制檯上打印。

如何達到這些要求？就須要對應的選擇器了：

①表單對象屬性選擇器：可用元素

格式：$("input:enabled")。即選中全部可用的input標籤。

②表單對象屬性選擇器：不可用元素

格式：$("input:disabled")。即選中全部不可用的input標籤。

其中上述兩種選擇器中：

使用val方法能夠給對應元素賦值。

例子都是文本框，其實按鈕也有可用不可用之分。

③表單對象屬性選擇器：選中元素

格式：$("input:checked")。即匹配全部被選中的元素 。

例子中是多選框，其實單選框，下拉框也均可以使用該選擇器。

• 使用each()方法能夠遍歷多個元素。
• 使用attr("屬性名")也能夠獲取對應屬性值。

④表單對象屬性選擇器：下拉框選中元素

格式：$("select option:selected")。即匹配全部被選中的元素 。

例子中是多選框，其實單選框，下拉框也均可以使用該選擇器。

• 使用each()方法能夠遍歷多個元素。
• 使用attr("屬性名")也能夠獲取對應屬性值。

6、總結

選擇器之間是能夠疊加使用的。好比層級選擇器中能夠包含基本選擇器。

jQuery中的選擇器實在是太多了，經過網絡查詢到jQuery對應裏的選擇器：

遇到不會的就能夠查看下文檔，講解也很詳細，還有案例分析。

最後

謝謝你的觀看。

若是能夠的話，麻煩幫忙點個贊，謝謝你。

本文使用 mdnice 排版