轉自：http://cuiqingcai.com/2529.html
之前在用jQuery，不過有時候用著用著一些用法發現并沒有用到過，比較陌生，現在重新梳理一下，把易忽略的知識點總結一下，長期更新。
參考梳理來源：
慕課網
有時需要精確的選擇任意多個指定的元素，類似于從文具盒中挑選出多根自已喜歡的筆，就需要調用sele1,sele2,seleN選擇器，它的調用格式如下：
$(“sele1,sele2,seleN”)
其中參數sele1、sele2到seleN為有效選擇器，每個選擇器之間用“，”號隔開，它們可以是之前提及的各種類型選擇器，如$(“#id”)、$(“.class”)、$(“selector”)選擇器等。
例如，通過選擇器獲取其中的任意兩個元素，并將它們顯示的內容設為相同，如圖所示：
在瀏覽器中顯示的效果：
雖然頁面中添加了三個元素，但是通過使用$(“div,p”)選擇器方式獲取了其中的<div>和<p>元素，并設置它們顯示的內容。
俗話說“遠親不如近鄰”，而通過prev + next選擇器就可以查找與“prev”元素緊鄰的下一個“next”元素，格式如下：
$(“prev + next”)
其中參數prev為任何有效的選擇器，參數“next”為另外一個有效選擇器，它們之間的“+”表示一種上下的層次關系，也就是說，“prev”元素最緊鄰的下一個元素由“next”選擇器返回的并且只返回唯的一個元素。
例如，使用prev + next選擇器，獲取<p>元素最近鄰的下一個元素，如下圖所示：
在瀏覽器中顯示的效果：
與上一節中介紹的prev + next層次選擇器相同，prev ~ siblings選擇器也是查找prev 元素之后的相鄰元素，但前者只獲取第一個相鄰的元素，而后者則獲取prev 元素后面全部相鄰的元素，它的調用格式如下：
$(“prev ~ siblings”)
其中參數prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關系，表明siblings選擇器獲取的元素都是prev元素之后的同輩元素。
例如，使用prev ~ next選擇器，獲取<p>元素后面相鄰的全部元素，并設置它們在頁面中顯示的內容，如下圖所示：
在瀏覽器中顯示的效果：
可以看出，調用$("p~span")選擇器代碼，獲取了<p>元素下面兩個(全部)的<span>元素，該元素不包含<p>元素上面的元素和不屬于同輩范圍的元素。
與上一節介紹的:eq(index)選擇器按索引查找元素相比，有時候我們可能希望按照文本內容來查找一個或多個元素，那么使用:contains(text)選擇器會更加方便， 它的功能是選擇包含指定字符串的全部元素，它通常與其他元素結合使用，獲取包含“text”字符串內容的全部元素對象。其中參數text表示頁面中的文字。
例如:
在瀏覽器中顯示的效果：
從圖中可以看出，調用li:contains('土豪')代碼，可以很方便地獲取<li>中包含‘土豪’字符內容的全部元素，并且只要與選擇的元素中或子元素中包含該字符內容，就可以被選中。
注意：li:contains('土豪') 土豪為什么必須加單引號呢？因為它是一個字符串，而不是一個變量，所以不加單或雙引號的話是會報錯的。
除了在上一小節介紹的使用包含的字符串內容過濾元素之外，還可以使用包含的元素名稱來過濾，:has(selector)過濾選擇器的功能是獲取選擇器中包含指定元素名稱的全部元素，其中selector參數就是包含的元素名稱，是被包含元素。
例如：獲取指定包含某個元素名的全部<li>元素，并改變它們顯示文字的顏色，如下圖所示：
在瀏覽器中顯示的效果：
可以看出，通過使用$("li:has('p')")選擇器代碼，獲取了包含<p>元素的全部<li>元素，并通過CSS方法改變了這些元素在頁面中顯示的文字樣式。
:hidden過濾選擇器的功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。
例如，調用:hidden選擇器獲取不可見的<p>元素，并將該元素的內容顯示在<div>元素中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，先調用$("p:hidden")代碼獲取隱藏的<p>元素，并調用該元素的html()方法獲取該元素中的內容，最后將該內容顯示在<div>元素中。
與上一節的:hidden過濾選擇器相反，:visible過濾選擇器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設置為“none”，那么，都可以通過該選擇器獲取。
例如，使用:visible選擇器獲取可見的<p>元素，并將該元素的內容顯示在<div>元素中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，調用$("p:visible")選擇器代碼，獲取那個可見的<p>元素，并調用html()方法獲取該元素的內容，最后將該內容顯示在<div>元素中。
如何獲取表單全部元素？:input表單選擇器可以實現，它的功能是返回全部的表單元素，不僅包括所有<input>標記的表單元素，而且還包括<textarea>、<select> 和 <button>標記的表單元素，因此，它選擇的表單元素是最廣的。
如下圖所示，使用:input表單選擇器獲取表單元素，并向這些元素增加一個CSS樣式類別，修改它們在頁面中顯示的邊框顏色。
在瀏覽器中顯示的效果：
可以看出，通過調用$(“#frmTest :input”)表單選擇器代碼獲取了表單中的全部元素，并使用addClass()方法修改它們在頁面中顯示的邊框顏色。addClass()方法的功能是為元素添加指定的樣式類別名稱，它的更多使用將會在后續章節中進行詳細介紹。
:text表單文本選擇器可以獲取表單中全部單行的文本輸入框元素，單行的文本輸入框就像一個不換行的字條工具，使用非常廣泛。
例如，在表單中添加多個元素，使用:text選擇器獲取單行的文本輸入框元素，并修改字的邊框顏色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過:text表單選擇器只獲取單行的文本輸入框元素，對于<textarea>區域文本、按鈕元素無效。
如果想要獲取密碼輸入文本框，可以使用:password選擇器，它的功能是獲取表單中全部的密碼輸入文本框元素。
例如，在表單中添加多個輸入框元素，使用:password獲取密碼輸入文本框元素，并修改它的邊框顏色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，在多個文本輸入框中，使用:password選擇器只能獲取表單中的密碼輸入文本框，并使用addClass()方法改變它的邊框顏色。
表單中的單選按鈕常用于多項數據中僅選擇其一，而使用:radio選擇器可輕松獲取表單中的全部單選按鈕元素。
例如，在表單中添加多種類型的表單元素，使用:radio選擇器獲取并隱藏這些元素中的全部單選按鈕元素，如下圖所示：
hide()方法的功能是隱藏指定的元素。
在瀏覽器中顯示的效果：
以上是:radio選擇器的效果。
表單中的復選框常用于多項數據的選擇，使用:checkbox選擇器可以快速定位并獲取表單中的復選框元素。
例如，在表單中增加多個不同類型的元素，使用:checkbox選擇器獲取其中的全部復選框元素，并將它們全部設為選中狀態，如下圖所示：
在瀏覽器中顯示的效果：
這樣便實現了選中 checkbox 的效果，做全選的時候比較方便。
通常情況下，一個表單中只允許有一個“type”屬性值為“submit”的提交按鈕，使用:submit選擇器可獲取表單中的這個提交按鈕元素。
例如，在表單中添加多個不同類型的按鈕，使用:submit選擇器獲取其中的提交按鈕，并使用attr()方法修改按鈕顯示的文本內容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:submit選擇器從三種類型按鈕中獲取了提交按鈕，并使用attr()方法將該按鈕顯示的文字修改為“點我就提交了”。
表單中包含許多類型的按鈕，而使用:button選擇器能獲取且只能獲取“type”屬性值為“button”的<input>和<button>這兩類普通按鈕元素。
例如，在表單中添加多種類型的按鈕元素，使用:button選擇器獲取其中的普通按鈕元素，并修改它們的邊框色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:button選擇器只能獲取兩種類型的普通按鈕，且修改了它們的邊框顏色，并未獲取表單中的“提交按鈕”。
有一些元素存在選中狀態，如復選框、單選按鈕元素，選中時“checked”屬性值為“checked”，調用:checked可以獲取處于選中狀態的全部元素。
例如，在表單中添加多個復選框和單選按鈕，其中有一些元素處于選中狀態，使用:checked獲取并隱藏處于選中狀態的元素，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:checked選擇器可以獲取處于選中狀態的元素，并調用hide()方法將它們進行隱藏。
與:checked選擇器相比，:selected選擇器只能獲取<select>下拉列表框中全部處于選中狀態的<option>選項元素。
例如，在一個添加多個<option>選項的下拉列表框中，使用:selected選擇器修改處于選中狀態的內容值，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用:selected選擇器獲取處于選中狀態的<option>元素，并調用text()方法修改這些選中狀態元素顯示的內容。text()方法的功能是獲取或設置元素的文本內容，該方法在后續將有詳細的介紹。
通過上面章節的學習，我們知道使用:first過濾選擇器可以獲取指定父元素中的首個子元素，但該選擇器返回的只有一個元素，并不是一個集合，而使用:first-child子元素過濾選擇器則可以獲取每個父元素中返回的首個子元素，它是一個集合，常用多個集合數據的選擇處理。
如下圖，如果想把頁面中每個ul中的第一個li獲取到，并改變其顏色。則可以使用
: first-child
在瀏覽器中顯示的效果：
通過$("li:first-child")選擇器代碼，獲取了兩個<ul>父元素中的第一個<li>元素，并使用css()方法修改了它們在頁面中顯示的文字顏色。
replaceWith()和replaceAll()方法都可以用于替換元素或元素中的內容，但它們調用時，內容和被替換元素所在的位置不同，分別為如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)
參數selector為被替換的元素，content為替換的內容。
例如，調用replaceWith()方法將頁面中<span>元素替換成一段HTML字符串，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用replaceWith()方法替換類別名為“green”的<span>元素，替換之后，舊元素完全由新替換的元素所取代。
wrap()和wrapInner()方法都可以進行元素的包裹，但前者用于包裹元素本身，后者則用于包裹元素中的內容，它們的調用格式分別為：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
參數selector為被包裹的元素，wrapper參數為包裹元素的格式。
例如，調用wrap()方法，將<span>用<div>元素包裹起來，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，紅色區域的<span>元素被藍色邊框的<div>元素通過wrap()方法包裹起來
remove()方法刪除所選元素本身和子元素，該方法可以通過添加過濾參數指定需要刪除的某些元素，而empty()方法則只刪除所選元素的子元素。
例如，調用remove()方法刪除<span>元素中類別名為“red”的，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用remove(".red")方法只是把<span>元素中類別名為“red”的這部分元素給刪除了。
hover()方法的功能是當鼠標移到所選元素上時，執行方法中的第一個函數，鼠標移出時，執行方法中的第二個函數，實現事件的切實效果，調用格式如下：
$(selector).hover(over，out);
over參數為移到所選元素上觸發的函數，out參數為移出元素時觸發的函數。
例如，當鼠標移到<div>元素上時，元素中的字體變成金黃色，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，使用hover()方法執行兩個函數，當鼠標移在元素上時調用addClass()方法增加一個樣式，移出時，調用removeClass()方法移除該樣式。
toggle()方法可以在元素的click事件中綁定兩個或兩個以上的函數，同時，它還可以實現元素的隱藏與顯示的切換，綁定多個函數的調用格式如下：
$(selector).toggle(fun1(),fun2(),funN(),...)
其中，fun1，fun2就是多個函數的名稱
例如，使用toggle()方法，當每次點擊<div>元素時，顯示不同內容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，每次點擊<div>元素時，都依次執行toggle()方法綁定的函數，當執行到最后一個函數時，再次點擊將又返回執行第一個函數。
注意：toggle()方法支持目前主流穩定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。
one()方法可以綁定元素任何有效的事件，但這種方法綁定的事件只會觸發一次，它的調用格式如下：
$(selector).one(event,[data],fun)
參數event為事件名稱，data為觸發事件時攜帶的數據，fun為觸發該事件時執行的函數。
例如，使用one方法綁定<div>元素的單擊事件，在事件執行的函數中，累計執行的次數，并將該次數顯示在頁面中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用了one()方法綁定<div>元素的單擊事件，因為事件函數只能執行一次，執行完成后，無論如何單擊，都不再觸發。
調用animate()方法不僅可以制作簡單漸漸變大的動畫效果，而且還能制作移動位置的動畫，在移動位置之前，必須將被移元素的“position”屬性值設為“absolute”或“relative”，否則，該元素移動不了。
例如，調用animate()方法先將圖片向右移動90px，然后，再將圖片寬度與高度分別增加30px，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，圖片先向右移動了“90px”，然后，移動成功后，再在原來的基礎之上以動畫的效果增大30px，增加成功后，顯示“執行完成！”的字樣。
新聞熱點
疑難解答
