jQuery選擇器

1、Write Less, Do More.Lession02 jQuery選擇器1. 常用CSS選擇器選擇器語法示例標(biāo)簽選擇器E CSS規(guī)則規(guī)則tdfont-size:14px;ID選擇器#IDCSS規(guī)則規(guī)則#headerfont-size:14px;類選擇器E.classNameCSS規(guī)則規(guī)則.dreamfont-size:14px;群組選擇器E1,E2,E3CSS規(guī)則規(guī)則td,p,div,amargin:0px;后代選擇器E FCSS規(guī)則規(guī)則#link acolor:red;通配選擇符*CSS規(guī)則*font-size:14px;2.jQuery基本選擇器選擇器jQuery返回標(biāo)簽選擇器Ele

2、ment$(“tagName”)單個(gè)元素ID選擇器#id$(“#ID”)集合元素類選擇器.class$(“.demo”)集合元素群組選擇器Selector1,selector2$(“div,span,p,myClass”)集合元素通配選擇符$(“*”)集合元素01基本選擇器基本選擇器.html3.層次選擇器選擇器jQuery返回$ ( “ a n c e s t o r descendant ”)$(“div span”)選取選取div中所有的中所有的span集合元素$(“parent child”)$(“div span”)選取選取div元素下名元素下名為為span的子元素的子元素集合元素$

3、(“prev + next”)$(“.one + div”)選取選取class為為.one的的下一個(gè)下一個(gè)div元素元素集合元素$(“.one + div”)$(“.one”).next(“div”)$(“prev siblings”)$(“#twodiv”)選取選取id為為two的元素的元素后面所有后面所有div兄弟元素兄弟元素集合元素$(“#prevdiv”)$(“#prev”).nextAll(“div”)02層次選擇器層次選擇器.html4.基本過濾選擇器過濾器jQuery返回:frist$(“div:first”)選取所有選取所有元素中第一個(gè)元素中第一個(gè)元元素素單個(gè)元素:last$(

4、“div:last”)選取所有選取所有元素中最后一個(gè)元素中最后一個(gè)單個(gè)元素:not(selector)$(“input:not(.myClass)”)選取選取class不是不是myClass的的元素元素集合元素:even$(“input:even”)選取索引是偶數(shù)的選取索引是偶數(shù)的元素元素(索索引從引從0開始開始)集合元素:odd$(“input:odd”)選取索引是奇數(shù)的選取索引是奇數(shù)的元素元素(索索引從引從0開始開始)集合元素:eq(index)$(“input:eq(1)”)選取索引等于選取索引等于1的的元素元素單個(gè)元素:gt(index)$(“input:gt(1)”)選取索引大于選取

5、索引大于1的的元素元素集合元素:lt(index)$(“input:lt(4)”)選取索引小于選取索引小于4的的元素元素集合元素:header$(“:header”)選取所有標(biāo)題元素選取所有標(biāo)題元素集合元素:animated$(“div:animated”)選取正在執(zhí)行動(dòng)畫的元素集合元素03基本過濾選擇器基本過濾選擇器5. 內(nèi)容過濾選擇器過濾器過濾器jQuery返回返回:contains(text)$(“div:contains(我)”)選取含有文本“我”的元素集合元素集合元素:empty$(“div:empty”)選取不包含子元素（文本元素）的空元素集合元素集合元素:has(selector

6、)$(“div:has(p)”)選取含有 元素的元素集合元素集合元素:parent$(“div:parent”)選取擁有子元素選取擁有子元素(包括文本包括文本元素元素)的的元素元素集合元素集合元素04內(nèi)容過濾選擇器內(nèi)容過濾選擇器.html6.屬性過濾選擇器過濾器jQuery返回attribute$(“divid”)選取所有擁有選取所有擁有id屬性的元素屬性的元素集合元素attribute=value#(“divtitle=test”)選取元素屬性選取元素屬性title值為值為test的的元素元素集合元素attribute!=value$(“divtitle!=test”)選取元素屬性選取元素屬

7、性title值不為值不為test（注意：沒有（注意：沒有title屬性的元素也會(huì)被選取屬性的元素也會(huì)被選?。┘显豠ttribute=value$(“div=test”)選取屬性選取屬性title值為值為test開頭的開頭的div元素元素集合元素attribute$=value$(“div$=test”)選取屬性選取屬性title值為值為test結(jié)尾的結(jié)尾的div元素元素集合元素attribute*=value$(“div*=test”)選取屬性選取屬性title值中包含值中包含test的的div元素元素集合元素selectorselector2selectorN$(“dividtitle$

8、=test”)選取擁有id屬性，且title屬性值以test結(jié)尾的所有div元素集合元素05屬性選擇器屬性選擇器.html7.子元素過濾選擇器過濾器jQuery返回:nth-child(index/even/odd/equation):eq(index)只匹配一個(gè)元素，而只匹配一個(gè)元素，而:nth-child將為每一個(gè)父元將為每一個(gè)父元素匹配子元素，并且素匹配子元素，并且:nth-child(index)下標(biāo)從下標(biāo)從1開始，而開始，而:eq(index)是從是從0開始開始:nth-child(even) 選取每個(gè)父元素下的索引值是偶數(shù)的元素選取每個(gè)父元素下的索引值是偶數(shù)的元素:nth-chil

9、d(odd) 選取每個(gè)父元素下的索引值是奇數(shù)的元素選取每個(gè)父元素下的索引值是奇數(shù)的元素:nth-child(3n)選取每個(gè)父元素下的索引值是選取每個(gè)父元素下的索引值是3的倍數(shù)的元的倍數(shù)的元素素集合元素:first-child:frist只返回單個(gè)元素，而只返回單個(gè)元素，而:first-child選擇符將為每一父元選擇符將為每一父元素匹配第一個(gè)子元素。素匹配第一個(gè)子元素。例如例如$(“ul li:first-child”);選取每個(gè)選取每個(gè)中的第一個(gè)中的第一個(gè)元元素素注意注意$(“ul li :first-child”);選取每個(gè)選取每個(gè)中的每一個(gè)中的每一個(gè)元素中元素中的第一個(gè)子元素的第一個(gè)子元

10、素注意第二條語句注意第二條語句li和和:first-child之間有空格意義完全不一樣之間有空格意義完全不一樣了了集合元素:last-child:last只返回單個(gè)元素而只返回單個(gè)元素而:last-child選擇器將為每個(gè)父元素匹選擇器將為每個(gè)父元素匹配最后一個(gè)子元素配最后一個(gè)子元素例如例如$(“ul li:last-child”);選擇每個(gè)選擇每個(gè)中最后一個(gè)中最后一個(gè)元素元素集合元素:only-child$(“ul li:only-child”)在中選取是唯一子元素的元素。06子元素過濾選擇器子元素過濾選擇器.html8.表單對(duì)象屬性過濾選擇器過濾器jQuery返回:enabled$(“#f

11、orm1 :enabled”)選取選取id為為form1 的表的表單內(nèi)所有可用的元素單內(nèi)所有可用的元素集合元素:disabled$(“#form1 :disabled”)選取選取id為為form2的表的表單內(nèi)所有不可用的元素單內(nèi)所有不可用的元素集合元素:checked$(“input:checked”)選取所有被選中的選取所有被選中的元素元素集合元素:selected$(“select :selected”)選取所有被選中的選項(xiàng)元素下拉列表集合元素07表單對(duì)象屬性過濾選擇器表單對(duì)象屬性過濾選擇器.html9.表單選擇器過濾器jQuery返回:input$ ( “ : i n p u t ” ) 選 取 所 有選 取 所 有和和集合元素:text$(“:text”)選取所有單行文本框選取所有單行文本框集合元素:password$(“:password”) 選取所有密碼框選取所有密碼框集合元素:radio$(“:radio”)選取所有單選框選取所有單選框集合元素:checkbox$(“:checkbox”)選取所有復(fù)選框選取所有復(fù)選框:submit$(“:submit”)選取所有提交按鈕