jQuery-Selectors(選擇器)的使用(一、基本篇)
來源：程序員人生 發布時間：2014-05-11 16:48:28 閱讀次數：3699次
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實例方式進行講述，以簡單，全面為基礎，不會涉及很深，我的學習方法：先入門，后進階！
本系列文章分為：基本篇、層次篇、簡單篇、內容篇、可見性篇、屬性篇、子元素篇、表單篇、表單對象屬性篇共9篇文章。
您對本系列文章有任何建議或意見請發送到郵箱：sjzlgt@qq.com
由于是第一次寫技術性系列文章，難免會出錯或代碼BUG，歡迎指出，在此謝過！
您可以到jQuery官網來學習更多的有關jQuery知識。
版權所有：白夜 博客 轉載請保留出處和版權信息！ |
1. #id用法定義：根據給定的ID匹配一個元素。
返回值：Element
參數：id (String) : 用于搜索的，通過元素的 id 屬性中給定的值
實例：將ID為"div_red"的DIV的邊框改為紅色
代碼：$("#div_red").css("border","red 2px solid"); //點擊按鈕一將執行這句代碼DIV ID="div_red"
擴展：#id中的id可以是頁面任何元素的id,如input,btuuon,div,table,span等等
2. element用法定義：根據給定的元素名匹配所有元素。
返回值：Array<Element>
參數：element (String) : 一個用于搜索的元素。指向 DOM 節點的標簽名。
實例：將頁面<P>標記內的文字顏色改為紅色
代碼：$("p").css("color","red"); //點擊按鈕二將執行這句代碼P標記1 ID="p1"
P標記2 無ID
擴展：參數值可以是頁面任何元素，如div,button,div,table,tr,td,p,h1,span,input
3. .class用法定義：根據給定的類（樣式名稱）匹配元素。
返回值：Array<Element>
參數：class (String) 一個用以搜索的類（樣式名稱）。一個元素可以有多個類（樣式名稱），只要有一個符合就能被匹配到。
實例：將頁面所有引用了".red_test"樣式的元素背景顏色改為藍色
代碼：$(".red_test").css("background-color","blue"); //點擊按鈕三將執行這句代碼DIV ID="div_red_1" calss="red_test"
DIV ID="div_red_2" 無class
SPAN ID="span_red_1" calss="red_test" 擴展：可以看一下jQuery官網上Selectors/.class的實例。
4. *用法
定義：匹配所有元素 多用于結合上下文來搜索。
返回值：Array<Element>
實例：查看頁所有元素的數量
代碼：$("*").length; //點擊按鈕四將執行這句代碼
擴展：可以看一下jQuery官網上Selectors/*的實例。
5. selector1,selector2,selectorN用法定義：將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器，并將匹配到的元素合并到一個結果內。
返回值：Array<Element>
參數：selector1 (Selector) : 一個有效的選擇器 selector2 (Selector) : 另一個有效的選擇器 selectorN (Selector) : (可選) 任意多個有效選擇器
實例：將頁面上所有引用名稱為"li_test"樣式的<Li>元素和ID為"li_red"的<Li>元素的邊框改為綠色，寬度為5px
代碼：$(".red_test,#btn_5").css("border","5px solid Green"); //點擊按鈕五將執行這句代碼 - Li class="li_test"
- Li id="li_red"
- Li
- Li class="li_test"
- Li
- Li
您可以下載這個文件：download
感謝 シ上官メGT 提醒我文章中的第5個實例與源碼中第5個實例不一樣，我在此解釋一下：原本發現的文章與源碼是一致的，但園子里的這個顯示博文內容的頁面中P標記太多，導致點擊第5個實例中的按鈕時，會使頁面上所有P標記全部加上粗粗的邊框，很難看，所以我把文章中的P標記改為了Li標記，由于我的粗心，忘記改源碼了，在此深表歉意。雖然兩個實例不一樣，但說明的問題是一樣的，讀者參考哪一個都可以。
提供與發表文章一致的源文件下載：download
文章導讀：
jQuery-Selectors(選擇器)的使用(一、基本篇)
jQuery-Selectors(選擇器)的使用(二、層次篇)
jQuery-Selectors(選擇器)的使用(三、簡單篇)
jQuery-Selectors(選擇器)的使用(四-五、內容篇&可見性篇)
jQuery-Selectors(選擇器)的使用(六、屬性篇)
jQuery-Selectors(選擇器)的使用(七、子元素篇)
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
