$(document).ready(function(){});
$(document(){});簡寫
//jQuery等待加載 只需等待網(wǎng)頁中的DOM結(jié)構(gòu)加載完畢，才能執(zhí)行包裹的代碼，效率更高
window.onload = function(){};? //javaScript等待加載，必須等待網(wǎng)頁加載完畢（包括圖片）才能執(zhí)行的包裹代碼
一、基本選擇器
1.ID選擇器
使用公式： $("#id")
使用示例： $("#box")? //獲取id屬性為box的元素
介紹：ID選擇器#id就是利用DOM元素的id屬性值來篩選匹配的元素，并以iQuery包裝集的形式返回給對(duì)象。
2.元素選擇器
使用公式：$（"element"）
使用示例：$（“div”） //獲取所有的元素
介紹：元素選擇器是根據(jù)元素名稱匹配相應(yīng)的元素。元素選擇器指向的是DOM元素的標(biāo)記名，也就是說元素選擇器是根據(jù)元素的標(biāo)記名選擇的。
3.類名選擇器
使用公式：$（".class"）
使用示例：$（".box"） //獲取class屬性值為box的所有元素
介紹：類選擇器是通過元素?fù)碛械腃SS類的名稱查找匹配的DOM元素。在一個(gè)頁面中，一個(gè)元素可以有多個(gè)CSS類，一個(gè)CSS類又可以匹配多個(gè)元素，如果有元素中有一個(gè)匹配類的名稱就可以被類選擇器選取到。簡單地說類名選擇器就是以元素具有的CSS類名稱查找匹配的元素。
4.復(fù)合選擇器
使用公式：$("selector1,selector2,......,selectorN")
使用示例：$("div,#btn")? ? //要查詢文檔中的全部的<div>元素和id屬性為btn的元素
selector1:一個(gè)有效的選擇器，可以是ID選擇器、元素選擇器或類名選擇器等
selector2:另一個(gè)有效的選擇器，可以是ID選擇器、元素選擇器或類名選擇器等
selectorN:（可選擇）任意多個(gè)選擇器，可以是ID選擇器、元素選擇器或類名選擇器等
介紹： 復(fù)合選擇器將多個(gè)選擇器（可以是ID選擇器、元素選擇器或是類名選擇器）組合在一起，兩個(gè)選擇器之間以逗號(hào)","分隔，只要符合其中的任何一個(gè)篩選條件就會(huì)被匹配，返回的是一個(gè)集合形式的jQuery包裝集，利用jQuery索引器可以取得集合中的jQuery對(duì)象。
注意：多種匹配條件的選擇器并不是匹配同時(shí)滿足這幾個(gè)選擇器的匹配條件的元素，而是將每個(gè)匹配的元素合并后一起返回。
5.通配符選擇器
? $（" * "） //取得頁面上所有的DOM元素集合的jQuery包裝集
二、層次選擇器
1.ancestor descendant選擇器
使用公式：$（"ancestor descendant"）
使用示例：$（" ul li"） //匹配ul元素下的全部li元素
ancestor是指任何有效的選擇器。
descendant是用以匹配元素的選擇器，并且ancestor所指定元素后代元素。
ancestor descendant選擇器中ancestor代表祖先，descendant代表子孫，用于在給定的祖先元素下匹配所有的后代元素
2.parent>child選擇器
?使用公式：$（" parent>child"）
?使用示例：$（" form>input"） //匹配表單中所有的子元素input
?parent是指任何有效的選擇器
?child使用以匹配元素的選擇器，并且它是parent元素的子元素
? 介紹：parent>child選擇器中的parent代表父元素，child代表子元素，用于在給定的父元素下匹配所有的子元素，使用該選擇器只能選擇器父元素的子元素
3.prev+next選擇器
使用公式：$（" prev+next"）
使用示例：$（"div+img"） // 匹配<div>標(biāo)簽后的<img>標(biāo)記
prev是指任何有效的選擇器
next是一個(gè)有效選擇器并緊接著prev選擇器
介紹：pev+next選擇器用于匹配所有緊接在prev元素后的next元素，其中，prev和next是兩個(gè)相同級(jí)別的元素
4.prev~siblings選擇器
使用公式：$（"prev~siblings"）
prev是指任何有效的選擇器
介紹：prev~siblings選擇器用于匹配prev元素之后的所有siblings元素，其中prev和siblings是個(gè)相同輩元素
三、過濾選擇器
1.簡單過濾器
簡單過濾器是指冒號(hào)開頭的，通常用于實(shí)現(xiàn)簡單過濾效果的過濾器
：frist
? ? ? ? ? ?說明：匹配找到第一個(gè)元素，它是與選擇器結(jié)合使用的
? ? ? ? ? ? 示例：$(" tr：frist ") ?//匹配表格的第一行
：last
????????????說明：匹配找到最后一個(gè)元素，它是與選擇器結(jié)合使用的
? ? ? ? ? ? 示例：$(" tr：last ") ?//匹配表格的最后一行
：even
? ? ? ? ? ? 說明：匹配所有索引值為偶數(shù)的元素，索引值從0開始計(jì)算
? ? ? ? ? ?示例：$(" tr：even") ?//匹配索引為偶數(shù)一行
:odd
? ? ? ? ? ? ? 說明：匹配所有索引值為奇數(shù)的元素，索引值從0開始計(jì)數(shù)
? ? ? ? ? ? ? 示例：$("tr:odd") ? ? ? //匹配索引值為奇數(shù)的行
:eq(index)
?? ??? ??? ??? ?說明：匹配一個(gè)給定索引值的元素
?? ??? ??? ??? ?示例：$("div:eq(1)") ? ? ?//匹配第二個(gè)div元素
:gt(index)
?? ??? ??? ??? ?說明：匹配所有大于給定索引值的元素
?? ??? ??? ??? ?示例：$("span:gt(0)") ? ? ? //匹配索引大于0的span元素（注：大于0,而不包括0)
:lt(index)
?? ??? ??? ??? ?說明：匹配所有小于給定索引值的元素
?? ??? ??? ??? ?示例：$("div:lt(2)") ? ? //匹配索引小于2的div元素（注：小于2,而不包括2)
:header
?? ??? ??? ??? ?說明：匹配h1,h2,h3......之類的標(biāo)題元素
?? ??? ??? ??? ?示例：$(".cls:header") ? ? ?//匹配全部類名為cls的標(biāo)題元素，如果":"前不寫則匹配所有的標(biāo)題元素
:not(selector)
?? ??? ??? ??? ?說明：去除所有給定選擇器匹配的元素
?? ??? ??? ??? ?示例：$("input:not(:checked)") ? ? ? ? //匹配沒有被選中的input元素
animated
?? ??? ??? ??? ?說明：匹配所有正在執(zhí)行動(dòng)畫效果的元素
?? ??? ??? ??? ?示例：$("div:animated") ? ? ? ? ?//匹配正在執(zhí)行的動(dòng)畫的div元素
2.內(nèi)容過濾器
?? ??? ??? ?內(nèi)容過濾器就是通過DOM元素包含的文本內(nèi)容以及是否含有匹配的元素進(jìn)行篩選
:contains(text)
?? ??? ??? ??? ?說明：匹配包含給定文本的元素
?? ??? ??? ??? ?示例：$("li:contains('word')") ? ? ?//匹配含有"word"文本內(nèi)容的元素
:empty
?? ??? ??? ??? ?說明：匹配所有不包含子元素或者文本的空元素
?? ??? ??? ??? ?示例：$("td:empty") ? ? ? ?//匹配不包含子元素或者文本的單元格
:has(selector)
?? ??? ??? ??? ?說明：匹配含有選擇器所匹配元素的元素
?? ??? ??? ??? ?示例：$("td:has(p)") ? ? ? ? ? //匹配表格的單元格中還有<p>標(biāo)記的單元格
:parent
?? ??? ??? ??? ?說明：匹配含有子元素或者文本的元素
?? ??? ??? ??? ?示例：$("td:parent") ? ? ?//匹配不為空的單元格，即在該單元格中還包括子元素或則文本
3.可見性過濾器
?? ??? ??? ?元素的可見狀態(tài)有兩種，分別是隱藏狀態(tài)和顯示狀態(tài)?？梢娦赃^濾器就是利用元素的可見狀態(tài)匹配元素的
:visible
?? ??? ??? ??? ?說明：匹配所有可見元素
:hidden
?? ??? ??? ??? ?說明：匹配所有不可見元素
?? ??? ??? ??? ?注意：在應(yīng)用:hidden過濾器時(shí)，display屬性是none以及input元素的type屬性為hidden的元素都會(huì)被匹配識(shí)別
4.表單對(duì)象的屬性過濾器
?? ??? ??? ?表單對(duì)象的屬性過濾器通過表單元素的狀態(tài)屬性（例如：選中、不可用等狀態(tài)）匹配元素
:checked
?? ??? ??? ??? ?說明：匹配所有選中的被選中元素
?? ??? ??? ??? ?示例：$("input:checked") ? ? ? ? ? ?//匹配所有被選中的input元素
:disabled
?? ??? ??? ??? ?說明：匹配所有不可用元素
?? ??? ??? ??? ?示例：$("input:disenabled") ? ? ? ? ? //匹配所有不可用input元素
:enabled
?? ??? ??? ??? ?說明：匹配所有可用的元素
?? ??? ??? ??? ?示例：$("input:enabled") ? ? ? ? //匹配所有可用的input元素
:selected
?? ??? ??? ??? ?說明：匹配所有選中的option元素
?? ??? ??? ??? ?示例：$("select option:selected") ? ? ? ? ? ?//匹配所有被選中的選項(xiàng)元素
5.子元素過濾器
?? ??? ??? ?子元素選擇器就是篩選給定某個(gè)元素的子元素，具體的過濾條件由選擇器的種類而定
:first-child
?? ??? ??? ??? ?說明：匹配所有給定元素的第一個(gè)子元素
?? ??? ??? ??? ?示例：$("ul ?li:first-child") ? ? ? ? ? ?//匹配ul元素中的第一個(gè)子元素li
:last-child
?? ??? ??? ??? ?說明：匹配所有給定元素的最后一個(gè)子元素
?? ??? ??? ??? ?示例：$("ul ?li:last-child") ? ? ? ? ? ?//匹配ul元素中的最后一個(gè)子元素li
:only-child
?? ??? ??? ??? ?說明：如果某個(gè)元素是它父元素中唯一的子元素，那么將會(huì)被匹配，如果父元素中含有其他元素，則不會(huì)被匹配
?? ??? ??? ??? ?示例：$("ul ?li:only-child") ? ? ? ? ? ?//匹配只含有一個(gè)li元素的ul元素中的li
:nth-child(index/even/odd/equation)
?? ??? ??? ??? ?說明：匹配可每個(gè)父元素下的第index個(gè)子或奇偶元素，index從1開始，而不是從0開始
?? ??? ??? ??? ?示例：$("ul li :nth-child(even)") ? ? ? ? ? //匹配ul中索引值為偶數(shù)的li元素
?? ??? ??? ??? ?$("ul li:nth-child(3)") ? ? ? ? ? ? ?//匹配ul中第3個(gè)li元素
四、屬性選擇器
?? ??? ?屬性選擇器就是通過元素的屬性作為過濾條件進(jìn)行篩選對(duì)象
?? ??? ?[attribute]
?? ??? ??? ?說明：匹配包含給定屬性的元素
?? ??? ??? ?示例：$("div[name]") ? ? ? //匹配包含有name屬性的div元素
?? ??? ?[attribute=value]
?? ??? ??? ?說明：匹配屬性值為value的元素
?? ??? ??? ?示例：$("div[name='test']") ? ? ? ? ? //匹配name屬性是test的div元素
?? ??? ?[attribute!=value]
?? ??? ??? ?說明：匹配屬性值不等于value的元素
?? ??? ??? ?示例：$("div[name!='test']") ? ? ? ? //匹配name屬性不是test的div元素
?? ??? ?[attribute*=value]
?? ??? ??? ?說明：匹配屬性值含有value的元素
?? ??? ??? ?示例：$("div[name*="test"]") ? ? ? ? //匹配name屬性值中含有test值的div元素
?? ??? ?[attribute^=value]
?? ??? ??? ?說明：匹配屬性值以value開始的元素
?? ??? ??? ?示例：$("div[name^='test']") ? ? ? ? //匹配name屬性以test開頭的div元素
?? ??? ?[attribute$=value]
?? ??? ??? ?說明：匹配屬性值以value結(jié)束的元素
?? ??? ??? ?示例：$("div[name$='test']") ? ? ? ? //匹配name屬性以test結(jié)尾的div元素
?? ??? ?[selector1][selector2][selectorN]
?? ??? ??? ?說明：復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
?? ??? ??? ?示例：$("div[id][name^='test']") ? ? ? ? ? ?//匹配具有id屬性并且name屬性是以test開頭的div元素
? ? 五、表單選擇器
表單選擇器是匹配經(jīng)常在表單內(nèi)出現(xiàn)的元素。但是匹配的元素不一定在表單中
:input
?? ??? ??? ?說明：匹配所有的input元素
?? ??? ??? ?示例：
? ? ? ? ? ? ? ? ?$(":input") ? ? ? ?//匹配所有的input元素
? ? ? ? ? ? ? ? ?$("form :input") ? ? ? ? //匹配<form>標(biāo)記中的所有input元素，需要注意，在form和冒號(hào)之間有一個(gè)空格
:button
?? ??? ??? ?說明：匹配所有的普通按鈕，即type="button"的input元素
?? ??? ??? ?示例：$(".button") ? ? ? ? ? ? //匹配所有普通按鈕
:checkbox
?? ??? ??? ?說明：匹配所有的復(fù)選框
?? ??? ??? ?示例：$(":checkbox") ? ? ? ? ? //匹配所有的復(fù)選框
:file
?? ??? ??? ?說明：匹配所有的文件域
?? ??? ??? ?示例：$(":file") ? ? ? ? ? ? //匹配所有的文件域
:hidden
?? ??? ??? ?說明：匹配所有的不可見元素，或者type為hidden的元素
?? ??? ??? ?示例：$(":hidden") ? ? ? ? //匹配所有的隱藏域
:image
?? ??? ??? ?說明：匹配所有的圖像域
?? ??? ??? ?示例：$(":image") ? ? ? ? ? ?//匹配所有的圖像域
:password
?? ??? ??? ?說明：匹配所有的密碼域
?? ??? ??? ?示例：$(":password") ? ? ? ? ? ?//匹配所有的密碼域
:radio
?? ??? ??? ?說明：匹配所有的單選按鈕
?? ??? ??? ?示例：$(":radio") ? ? ? ? ? ?//匹配所有的單選按鈕
:reset
?? ??? ??? ?說明：匹配所有的重置按鈕，即type="reset"的input元素
?? ??? ??? ?示例：$(":reset") ? ? ? ? ?//匹配所有的重置按鈕
:submit
?? ??? ??? ?說明：匹配所有的提交按鈕，即type="submit"的input元素
?? ??? ??? ?示例：$(":submit") ? ? ? ? ? ?//匹配所有的提交按鈕
:text
?? ??? ??? ?說明：匹配所有的單行文本框
?? ??? ??? ?示例：$(".text") ? ? ? ? ? //匹配所有的單行文本框
選擇器中注意事項(xiàng)
?1.選擇器中含有特殊符號(hào)的注意事項(xiàng)
?? ??? ??? ?含有"."、"#"、"{"、"}"等特殊字符：根據(jù)W3C規(guī)定，屬性值中是不能包含這些特殊字符的，但在實(shí)際的項(xiàng)目中偶爾會(huì)遇到這種表達(dá)式中含有"#"和"}"等特殊字符的情況。這時(shí)，如果按照普通方法去處理的話就會(huì)出現(xiàn)錯(cuò)誤，解決這類錯(cuò)誤的方法是使用轉(zhuǎn)義符號(hào)將其轉(zhuǎn)義。
<div id="li#db">liaidb</div>
<div id="lidb(1)">lilovedb</div>
如果按照普通方式來獲取，例如：
$("#li#db");
$("#lilovedb(1)");
這樣是不能正確獲取到元素的，正確的寫法如下：
$("#li\\#db");
$("#lilovedb\\(1\\)");
?2.屬性選擇器的@符號(hào)問題：
在jQuery升級(jí)版本過程中，jQuery在1.3.1版本中徹底放棄了1.1.0版本遺留的@符號(hào)，假如我們使用1.3.1以上的版本，那么不需要在屬性前添加@符號(hào)
$("div[@name="lidb"]");
正確寫法是將@符號(hào)去掉，即改為如下形式：
$("div[name="lidb"]");
?? ??? ?選擇器中空格的注意事項(xiàng)
?? ??? ??? ?在實(shí)際應(yīng)用當(dāng)中，選擇器中含有空格也是不容忽視的，多一個(gè)空格或則少一個(gè)空格也會(huì)得到截然不同的結(jié)果。
? ? <div class="name">
? ? ? ? <div style="display: none;">小李</div>
? ? ? ? <div style="display: none;">小王</div>
? ? ? ? <div style="display: none;">小明</div>
? ? ? ? <div style="display: none;" class=name>小張</div>
? ? </div>
? ? <div style="display: none;" class=name>小玉</div>
? ? <div style="display: none;" class=name>小劉</div>
? ? 使用如下的jQuery選擇器分別獲取它們
? ? <script type="text/javascript">
? ? ? ? var $a=$(".name :hidden");
? ? ? ? var $b=$(".name:hidden");
? ? ? ? console.log($a)
? ? ? ? console.log($b)
? ? </script>
