jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函數(shù)，它的功能是獲得（）中指定的標(biāo)簽元素。如示例中$(“p”)會得到一組P標(biāo)簽元素,其中“p”表示CSS中的標(biāo)簽選擇器。$()中的()不一定是指定元素，也可能是函數(shù)。
在jQuery中?$()方法等價(jià)于jQuery()方法,前者比較常用，是后者的簡寫。一般只有在$()與其它語言沖突時(shí)才會使用jQuery()方法。
基礎(chǔ)選擇器
#id 選擇器(使用身份證號來找人)
jquery能使用CSS選擇器來操作網(wǎng)頁中的標(biāo)簽元素。如果你想要通過一個(gè)id號去查找一個(gè)元素，就可以使用如下格式的選擇器：
$("#my_id")
其中#my_id表示根據(jù)id選擇器獲取頁面中指定的標(biāo)簽元素，且返回唯一一個(gè)元素。
例如：
在瀏覽器中顯示的效果：
element 選擇器(尋找鉛筆)
在文具盒中，有鉛筆、鋼筆和水彩筆，類似于頁面中的<div>、<span>各個(gè)元素，雖然同屬于一個(gè)容器，但有各自的功能，jQuery中可以根據(jù)元素名查找元素，格式如下：
$(“element”)
其中element就是元素的名稱，也就是工具盒中的筆的名稱，找到水彩筆，我們就可畫畫了，通過元素名找到元素就可以對它進(jìn)行操作了。
如下圖所示：在頁面中，根據(jù)元素名找到了一個(gè)元素，并將它顯示的字體加粗。
在瀏覽器中顯示的效果：
從上面圖中可以看出，根據(jù)元素的名稱可以查找到該元素，并調(diào)用css()方法將設(shè)置該元素內(nèi)容中文字顯示的樣式。
此外，css()方法的功能是設(shè)置或獲取元素的某項(xiàng)樣式屬性，它的更多功能我們將在后續(xù)的章節(jié)中有詳細(xì)的介紹。
.class 選擇器(尋找紅色鉛筆)
我們在上一小節(jié)介紹了通過使用元素名稱查詢元素的方法，其實(shí)，還可以通過元素的類別屬性查找元素，就好比在文具盒中要找一個(gè)“紅色”鉛筆一樣，根據(jù)元素的某個(gè)特征進(jìn)行查找，它的調(diào)用格式如下：
$(“.class”)
其中.class參數(shù)表示元素的CSS類別(類選擇器)名稱。
例如，在頁面中，通過class選擇器獲取某個(gè)元素，并顯示該元素的class類別名稱，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過class選擇器的方式獲取元素，并調(diào)用元素的attr()方法獲取元素的類別名稱，并將名稱顯示在頁面中。
* 選擇器(取走全部鉛筆)
有一個(gè)非常“牛”的選擇器，“*”號選擇器，它的功能是獲取頁面中的全部元素，“全部”啊!包括<head>、<body>、<script>這些元素，相當(dāng)于可以取走你文具盒中的所有鉛筆,格式為：
$(“*”)
選擇器中的參數(shù)就一個(gè)“*”，既沒有“#”號，也沒有“.”號。?由于該選擇器的特殊性，它常與其他元素組合使用，表示獲取其他元素中的全部子元素。
如下圖所示：?使用*選擇器，獲取div中的所有子元素并設(shè)置三個(gè)子元素顯示相同的內(nèi)容。
在瀏覽器中顯示的效果：
由于三個(gè)元素都包含在<div>元素中，因此，它們都是<div>元素的子元素，那么，就可以使用$(“div *”)的方式獲取<div>元素中的這三個(gè)子元素，并使用html()方法來設(shè)置它們顯示的內(nèi)容。
實(shí)踐證明，由于使用*選擇器獲取的是全部元素，因此，有些瀏覽器將會比較緩慢，這個(gè)選擇器也需要謹(jǐn)慎使用。
sele1,sele2,seleN選擇器
有時(shí)需要精確的選擇任意多個(gè)指定的元素，類似于從文具盒中挑選出多根自已喜歡的筆，就需要調(diào)用sele1,sele2,seleN選擇器，它的調(diào)用格式如下：
$(“sele1,sele2,seleN”)
其中參數(shù)sele1、sele2到seleN為有效選擇器，每個(gè)選擇器之間用“，”號隔開，它們可以是之前提及的各種類型選擇器，如$(“#id”)、$(“.class”)、$(“selector”)選擇器等。
例如，通過選擇器獲取其中的任意兩個(gè)元素，并將它們顯示的內(nèi)容設(shè)為相同，如圖所示：
在瀏覽器中顯示的效果：
雖然頁面中添加了三個(gè)元素，但是通過使用$(“div,p”)選擇器方式獲取了其中的<div>和<p>元素，并設(shè)置它們顯示的內(nèi)容。
ance desc選擇器
本節(jié)開始，我們將介紹層次性選擇器。
在實(shí)際應(yīng)用開發(fā)中，常常是多個(gè)元素嵌套在一起，形成復(fù)雜的層次關(guān)系，通過層次選擇器，可以快速定位某一層次的一個(gè)或多個(gè)元素，ance desc選擇器就是其中之一，它的調(diào)用格式如下：
$("ance desc")
其中ance desc是使用空格隔開的兩個(gè)參數(shù)。ance參數(shù)（ancestor祖先的簡寫）表示父元素；desc參數(shù)（descendant后代的簡寫）表示后代元素，即包括子元素、孫元素等等。兩個(gè)參數(shù)都可以通過選擇器來獲取。比如家族姓氏“div”，家族幾代人里，都有名字里帶“span”的，就可以用這個(gè)ance desc選擇器把這幾個(gè)人給定位出來。
例如，使用層次選擇器，獲取<div>元素中的全部<span>元素，并設(shè)置它們顯示的內(nèi)容，在如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用層次選擇器$("div span")獲取了在<div>元素中的兩個(gè)元素，一個(gè)是<p>元素中的子元素，另一個(gè)是<p>元素外的同級元素，但它們都是在一個(gè)<div>元素下，也就是說在一個(gè)“家族”下。
parent > child選擇器
與上一節(jié)介紹的ance desc選擇器相比，parent > child選擇器的范圍要小些，它所選擇的目標(biāo)是子集元素，相當(dāng)于一個(gè)家庭中的子輩們，但不包括孫輩，它的調(diào)用格式如下：
$(“parent > child”)
child參數(shù)獲取的元素都是parent選擇器的子元素，它們之間通過“>”符號來表示一種層次關(guān)系。
如圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用$("div>span")選擇器代碼，獲取的是<div>“家庭中”全部“子輩”<span>元素，不包括“孫輩”<span>元素和“家庭外”的<span>元素。
prev + next選擇器
俗話說“遠(yuǎn)親不如近鄰”，而通過prev + next選擇器就可以查找與“prev”元素緊鄰的下一個(gè)“next”元素，格式如下：
$(“prev + next”)
其中參數(shù)prev為任何有效的選擇器，參數(shù)“next”為另外一個(gè)有效選擇器，它們之間的“+”表示一種上下的層次關(guān)系，也就是說，“prev”元素最緊鄰的下一個(gè)元素由“next”選擇器返回的并且只返回唯的一個(gè)元素。
例如，使用prev + next選擇器，獲取<p>元素最近鄰的下一個(gè)元素，如下圖所示：
在瀏覽器中顯示的效果：
prev ~ siblings選擇器
與上面中介紹的prev + next層次選擇器相同，prev ~ siblings選擇器也是查找prev 元素之后的相鄰元素，但前者只獲取第一個(gè)相鄰的元素，而后者則獲取prev 元素后面全部相鄰的元素，它的調(diào)用格式如下：
$(“prev ~ siblings”)
其中參數(shù)prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關(guān)系，表明siblings選擇器獲取的元素都是prev元素之后的同輩元素。
例如，使用prev ~ next選擇器，獲取<p>元素后面相鄰的全部元素，并設(shè)置它們在頁面中顯示的內(nèi)容，如下圖所示：
在瀏覽器中顯示的效果：
可以看出，調(diào)用$("p~span")選擇器代碼，獲取了<p>元素下面兩個(gè)(全部)的<span>元素，該元素不包含<p>元素上面的元素和不屬于同輩范圍的元素。
過濾選擇器
:first過濾選擇器
下面介紹過濾選擇器，該類型的選擇器是根據(jù)某過濾規(guī)則進(jìn)行元素的匹配，書寫時(shí)以“：”號開頭,通常用于查找集合元素中的某一位置的單個(gè)元素。
在jQuery中，如果想得到一組相同標(biāo)簽元素中的第1個(gè)元素該怎樣做呢？
在下面的示例代碼中你可能注意到我們會使用
?$(“l(fā)i:first”)
注意：書寫時(shí)以“：”號開頭。
運(yùn)行結(jié)果：
?
使用li:first過濾選擇器可以很方便地獲取ul列表中的第一個(gè)li元素.
:first過濾選擇器的功能是獲取第一個(gè)元素，常常與其它選擇器一起使用，獲取指定的一組元素中的第一個(gè)元素。
使用li:last過濾選擇器可以很方便地獲取ul列表中的第一個(gè)li元素.
:eq(index)過濾選擇器
如果想從一組標(biāo)簽元素?cái)?shù)組中，靈活選擇任意的一個(gè)標(biāo)簽元素，我們可以使用
:eq(index)
其中參數(shù)index表示索引號（即：一個(gè)整數(shù)），它從0開始，如果index的值為3，表示選擇的是第4個(gè)元素。例如：
在瀏覽器中顯示的效果：
從圖中可以看出，通過調(diào)用$("li:eq(3)")過濾選擇器代碼，獲取了第4個(gè)<li>元素，并使用css()方法設(shè)置了該元素在頁面中顯示的文字樣式。
:contains(text)過濾選擇器
與上面介紹的:eq(index)選擇器按索引查找元素相比，有時(shí)候我們可能希望按照文本內(nèi)容來查找一個(gè)或多個(gè)元素，那么使用:contains(text)選擇器會更加方便， 它的功能是選擇包含指定字符串的全部元素，它通常與其他元素結(jié)合使用，獲取包含“text”字符串內(nèi)容的全部元素對象。其中參數(shù)text表示頁面中的文字。
例如:
在瀏覽器中顯示的效果：
從圖中可以看出，調(diào)用li:contains('土豪')代碼，可以很方便地獲取<li>中包含‘土豪’字符內(nèi)容的全部元素，并且只要與選擇的元素中或子元素中包含該字符內(nèi)容，就可以被選中。
注意：li:contains('土豪')?土豪為什么必須加單引號呢？因?yàn)樗且粋€(gè)字符串，而不是一個(gè)變量，所以不加單或雙引號的話是會報(bào)錯(cuò)的。
:has(selector)過濾選擇器
除了在上面介紹的使用包含的字符串內(nèi)容過濾元素之外，還可以使用包含的元素名稱來過濾，:has(selector)過濾選擇器的功能是獲取選擇器中包含指定元素名稱的全部元素，其中selector參數(shù)就是包含的元素名稱，是被包含元素。
例如：獲取指定包含某個(gè)元素名的全部<li>元素，并改變它們顯示文字的顏色，如下圖所示：
在瀏覽器中顯示的效果：
可以看出，通過使用$("li:has('p')")選擇器代碼，獲取了包含<p>元素的全部<li>元素，并通過css方法改變了這些元素在頁面中顯示的文字樣式。
:hidden過濾選擇器
:hidden過濾選擇器的功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。
例如，調(diào)用:hidden選擇器獲取不可見的<p>元素，并將該元素的內(nèi)容顯示在<div>元素中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，先調(diào)用$("p:hidden")代碼獲取隱藏的<p>元素，并調(diào)用該元素的html()方法獲取該元素中的內(nèi)容，最后將該內(nèi)容顯示在<div>元素中。
:visible過濾選擇器
與上面的:hidden過濾選擇器相反，:visible過濾選擇器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設(shè)置為“none”，那么，都可以通過該選擇器獲取。
例如，使用:visible選擇器獲取可見的<p>元素，并將該元素的內(nèi)容顯示在<div>元素中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，調(diào)用$("p:visible")選擇器代碼，獲取那個(gè)可見的<p>元素，并調(diào)用html()方法獲取該元素的內(nèi)容，最后將該內(nèi)容顯示在<div>元素中。
[attribute=value]屬性選擇器
屬性作為DOM元素的一個(gè)重要特征，也可以用于選擇器中，從本節(jié)開始將介紹通過元素屬性獲取元素的選擇器，[attribute=value]屬性選擇器的功能是獲取與屬性名和屬性值完全相同的全部元素，其中[]是專用于屬性選擇器的括號符，參數(shù)attribute表示屬性名稱，value參數(shù)表示屬性值。
例如，使用[attribute=value]屬性選擇器，獲取指定屬性名和對應(yīng)值的全部<li>元素，并設(shè)置它們顯示的文字顏色，如圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用$("li[title='我最愛']")屬性選擇器代碼，獲取了2個(gè)<li>元素，并調(diào)用css()方法設(shè)置它們在頁面中顯示的文字顏色，另外，屬性值中的‘’單引號可以不寫，由于屬性名與屬性值是等號，因此，它們之間不是包含關(guān)系，而是完全相同。
[attribute!=value]屬性選擇器
與上面介紹的[attribute=value]屬性選擇器正好相反，[attribute!=value]屬性選擇器的功能是獲取不包含屬性名，或者與屬性名和屬性值不相同的全部元素，其中[]是專用于屬性選擇器的括號符，參數(shù)attribute表示屬性名稱，value參數(shù)表示屬性值。
例如，使用[attribute!=value]屬性選擇器，獲取指定不包含屬性名，或與屬性名和對應(yīng)值不同的全部<li>元素，并設(shè)置它們顯示的文字顏色，如圖所示：
在瀏覽器中顯示的效果：
可以看出，使用$("li[title!='我最愛']")屬性選擇器代碼，獲取了3個(gè)<li>元素，其中一個(gè)是不包含title屬性名，另外兩個(gè)的title屬性值不等于“我最愛”，獲取元素后并調(diào)用css()方法設(shè)置這些元素在頁面中顯示的文字顏色。
[attribute*=value]屬性選擇器
介紹一個(gè)功能更為強(qiáng)大的屬性選擇器[attribute*=value]，它可以獲取屬性值中包含指定內(nèi)容的全部元素，其中[]是專用于屬性選擇器的括號符，參數(shù)attribute表示屬性名稱，value參數(shù)表示對應(yīng)的屬性值。
例如，使用[attribute*=value]屬性選擇器，獲取屬性值中包含某一指定內(nèi)容的全部<li>元素，并設(shè)置它們顯示的文字顏色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用$("li[title*='最']")屬性選擇器代碼，獲取了3個(gè)<li>元素，這些元素的title屬性值中都包含了“最”字符，獲取這些元素后并調(diào)用css()方法設(shè)置這些元素在頁面中顯示的文字顏色。
:first-child子元素過濾選擇器
通過上面的學(xué)習(xí)，我們知道使用:first過濾選擇器可以獲取指定父元素中的首個(gè)子元素，但該選擇器返回的只有一個(gè)元素，并不是一個(gè)集合，而使用:first-child子元素過濾選擇器則可以獲取每個(gè)父元素中返回的首個(gè)子元素，它是一個(gè)集合，常用多個(gè)集合數(shù)據(jù)的選擇處理。
如下圖，如果想把頁面中每個(gè)ul中的第一個(gè)li獲取到，并改變其顏色。則可使用: first-child
在瀏覽器中顯示的效果：
通過$("li:first-child")選擇器代碼，獲取了兩個(gè)<ul>父元素中的第一個(gè)<li>元素，并使用css()方法修改了它們在頁面中顯示的文字顏色。
:last-child子元素過濾選擇器
與:first-child子元素過濾選擇器功能相反，:last-child子元素過濾選擇器的功能是獲取每個(gè)父元素中返回的最后一個(gè)子元素，它也是一個(gè)集合，常用多個(gè)集合數(shù)據(jù)的選擇處理。
例如，使用:last-child子元素過濾選擇器，修改“蔬菜”和“水果”中最后一個(gè)顯示的文字顏色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過$("li:last-child")選擇器代碼，獲取了兩個(gè)<ul>父元素中的最后一個(gè)<li>元素，并使用css()方法修改了它們在頁面中顯示的文字顏色。
表單選擇器
:input表單選擇器
如何獲取表單全部元素？:input表單選擇器可以實(shí)現(xiàn)，它的功能是返回全部的表單元素，不僅包括所有<input>標(biāo)記的表單元素，而且還包括<textarea>、<select> 和 <button>標(biāo)記的表單元素，因此，它選擇的表單元素是最廣的。
如下圖所示，使用:input表單選擇器獲取表單元素，并向這些元素增加一個(gè)CSS樣式類別，修改它們在頁面中顯示的邊框顏色。
在瀏覽器中顯示的效果：
可以看出，通過調(diào)用$("#frmTest :input")表單選擇器代碼獲取了表單中的全部元素，并使用addClass()方法修改它們在頁面中顯示的邊框顏色。addClass()方法的功能是為元素添加指定的樣式類別名稱。
:text表單文本選擇器
:text表單文本選擇器可以獲取表單中全部單行的文本輸入框元素，單行的文本輸入框就像一個(gè)不換行的字條工具，使用非常廣泛。
例如，在表單中添加多個(gè)元素，使用:text選擇器獲取單行的文本輸入框元素，并修改字的邊框顏色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過:text表單選擇器只獲取單行的文本輸入框元素，對于<textarea>區(qū)域文本、按鈕元素?zé)o效。
:password表單密碼選擇器
如果想要獲取密碼輸入文本框，可以使用:password選擇器，它的功能是獲取表單中全部的密碼輸入文本框元素。
例如，在表單中添加多個(gè)輸入框元素，使用:password獲取密碼輸入文本框元素，并修改它的邊框顏色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，在多個(gè)文本輸入框中，使用:password選擇器只能獲取表單中的密碼輸入文本框，并使用addClass()方法改變它的邊框顏色。
:radio單選按鈕選擇器
表單中的單選按鈕常用于多項(xiàng)數(shù)據(jù)中僅選擇其一，而使用:radio選擇器可輕松獲取表單中的全部單選按鈕元素。
例如，在表單中添加多種類型的表單元素，使用:radio選擇器獲取并隱藏這些元素中的全部單選按鈕元素，如下圖所示：
hide()方法的功能是隱藏指定的元素。
在瀏覽器中顯示的效果：
:checkbox復(fù)選框選擇器
表單中的復(fù)選框常用于多項(xiàng)數(shù)據(jù)的選擇，使用:checkbox選擇器可以快速定位并獲取表單中的復(fù)選框元素。
例如，在表單中增加多個(gè)不同類型的元素，使用:checkbox選擇器獲取其中的全部復(fù)選框元素，并將它們?nèi)吭O(shè)為選中狀態(tài)，如下圖所示：
在瀏覽器中顯示的效果：
:submit提交按鈕選擇器
通常情況下，一個(gè)表單中只允許有一個(gè)“type”屬性值為“submit”的提交按鈕，使用:submit選擇器可獲取表單中的這個(gè)提交按鈕元素。
例如，在表單中添加多個(gè)不同類型的按鈕，使用:submit選擇器獲取其中的提交按鈕，并使用attr()方法修改按鈕顯示的文本內(nèi)容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:submit選擇器從三種類型按鈕中獲取了提交按鈕，并使用attr()方法將該按鈕顯示的文字修改為“點(diǎn)我就提交了”。
:image圖像域選擇器
當(dāng)一個(gè)<input>元素的“type”屬性值設(shè)為“image”時(shí)，該元素就是一個(gè)圖像域，使用:image選擇器可以快速獲取該類全部元素。例如，在表單中添加兩種類型的圖像元素，使用:image選擇器獲取其中的一種圖像元素，并改變該元素的邊框樣式，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:image選擇器只能獲取<input>圖像域，而不能獲取<img>格式的圖像元素。
:button表單按鈕選擇器
表單中包含許多類型的按鈕，而使用:button選擇器能獲取且只能獲取“type”屬性值為“button”的<input>和<button>這兩類普通按鈕元素。
例如，在表單中添加多種類型的按鈕元素，使用:button選擇器獲取其中的普通按鈕元素，并修改它們的邊框色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:button選擇器只能獲取兩種類型的普通按鈕，且修改了它們的邊框顏色，并未獲取表單中的“提交按鈕”。
:checked選中狀態(tài)選擇器
有一些元素存在選中狀態(tài)，如復(fù)選框、單選按鈕元素，選中時(shí)“checked”屬性值為“checked”，調(diào)用:checked可以獲取處于選中狀態(tài)的全部元素。
例如，在表單中添加多個(gè)復(fù)選框和單選按鈕，其中有一些元素處于選中狀態(tài)，使用:checked獲取并隱藏處于選中狀態(tài)的元素，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:checked選擇器可以獲取處于選中狀態(tài)的元素，并調(diào)用hide()方法將它們進(jìn)行隱藏。
:selected選中狀態(tài)選擇器
與:checked選擇器相比，:selected選擇器只能獲取<select>下拉列表框中全部處于選中狀態(tài)的<option>選項(xiàng)元素。
例如，在一個(gè)添加多個(gè)<option>選項(xiàng)的下拉列表框中，使用:selected選擇器修改處于選中狀態(tài)的內(nèi)容值，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:selected選擇器獲取處于選中狀態(tài)的<option>元素，并調(diào)用text()方法修改這些選中狀態(tài)元素顯示的內(nèi)容。text()方法的功能是獲取或設(shè)置元素的文本內(nèi)容，該方法在后續(xù)將有詳細(xì)的介紹。
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机上的延时摄影如何用？
- 下一篇： jQuery学习笔记（二）—— 操作DO