jquery選擇器練習(xí)_第1頁(yè)
jquery選擇器練習(xí)_第2頁(yè)
jquery選擇器練習(xí)_第3頁(yè)
jquery選擇器練習(xí)_第4頁(yè)
jquery選擇器練習(xí)_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、1 點(diǎn)擊自增無(wú)限循環(huán)小病毒用編輯工具打開(kāi)文件無(wú)法停止沒(méi)有出口死循環(huán)<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><script>for(i=1;i=i+1;i+)alert(i);</script></body></html>2 jquery基本過(guò)濾選擇器基本過(guò)濾選擇器 First：獲取第一個(gè)元素 Last ：獲取最后元素Ev

2、en ：匹配所有索引值為偶數(shù)的元素，從0開(kāi)始計(jì)數(shù)Odd： 匹配所有所有索引值為奇數(shù)的元素，從0開(kāi)始計(jì)數(shù)Eq（index） 匹配一個(gè)給定索引值的元素 Lt（index）匹配所有小于給定索引值的元素Gt（index） 匹配所有大于戈丁索引值的元素No（selector）去除所有與給定選擇器匹配的元素Header 匹配如h1 h2 h3 之類的標(biāo)題元素框架<html> <head> <title>基本過(guò)濾選擇器</title> <meta charset="utf-8"/> <style>div width

3、: 100px;height : 100px;border : 1px solid black;float : left;.one width : 30px;height : 50px;border : 1px solid red;background : pink;float : left; </style> </head> <body><h1>基本過(guò)濾選擇器</h1><input type="button" id="btn1" value="選擇器1" />&

4、lt;input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input type="button" id="btn4" value="選擇器4" /><input type="button" id="btn5" v

5、alue="選擇器5" /><input type="button" id="btn6" value="選擇器6" /><input type="button" id="btn7" value="選擇器7" /><input type="button" id="btn8" value="選擇器8" /><input type="button

6、" id="btn9" value="選擇器9" /><input type="button" id="btn10" value="選擇器10" /><br><br><br><h3>這些都是div元素</h3><div><div class="one"></div><div class="one"></div>

7、</div><div><div class="one"></div></div><div><div class="one"></div><div class="one"></div><div class="one"></div></div><div></div> </body></html>選擇器案例<htm

8、l> <head> <title>基本過(guò)濾選擇器</title> <meta charset="utf-8"/> <script src="js/jquery.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 30px;height : 50px;border : 1px solid red;backgrou

9、nd : pink;float : left; </style> </head> <body><h1>基本過(guò)濾選擇器</h1><input type="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="

10、btn3" value="選擇器3" /><input type="button" id="btn4" value="選擇器4" /><input type="button" id="btn5" value="選擇器5" /><input type="button" id="btn6" value="選擇器6" /><input type=

11、"button" id="btn7" value="選擇器7" /><input type="button" id="btn8" value="選擇器8" /><input type="button" id="btn9" value="選擇器9" /><br><br><br><h3>這些都是div元素</h3><div&g

12、t;<div class="one"></div><div class="one"></div></div><div><div class="one"></div></div><div><div class="one"></div><div class="one"></div><div class="one&quo

13、t;></div></div><div></div><script>/* * 過(guò)濾選擇器: * * 使用":"符號(hào)用法 * * ":"和選擇器是一體的(不是分離的) * * 基本過(guò)濾選擇器: * * 選擇器 - ":first" - "first()" - 獲取第一個(gè)元素 */ / 獲取第一個(gè)元素，最外面最大的div變色 $("#btn1").click(function()$("div:first").css

14、("background","green"); ); / 獲取最后個(gè)元素，最后一個(gè)div變色 $("#btn2").click(function()$("div:last").css("background","yellow"); ); / 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù) $("#btn3").click(function()$("div:even").css("background","ye

15、llow"); ); / 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù) $("#btn4").click(function()$("div:odd").css("background","yellow"); ); / 匹配一個(gè)給定索引值的元素 $("#btn5").click(function()/ 查找到的是第幾個(gè)? 從0開(kāi)始算 eq（0）$("div:eq(2)").css("background","yellow");

16、); / 匹配所有大于給定索引值的元素，從第三個(gè)開(kāi)始算 $("#btn6").click(function()$("div:gt(2)").css("background","yellow"); ); / 匹配所有小于給定索引值的元素 $("#btn7").click(function()$("div:lt(2)").css("background","yellow"); ); / 去除所有與給定選擇器匹配的元素，就里面的小div不變其

17、他都變 $("#btn8").click(function()/ 不是特別的常用$("div:not('.one')").css("background","yellow"); ); / 匹配如 h1, h2, h3之類的標(biāo)題元素，匹配標(biāo)題 $("#btn9").click(function()/ :header的寫(xiě)法是固定寫(xiě)法 - 不常用$(":header").css("background","yellow");

18、);</script> </body></html>3 內(nèi)容過(guò)濾器Contains（text）包含了指定的文本Empty 沒(méi)有文本，也沒(méi)有子節(jié)點(diǎn)Parent 有文本或者子節(jié)點(diǎn)Has（selector）有負(fù)責(zé)selector要求后代的元素框架<html> <head> <title>內(nèi)容過(guò)濾選擇器</title> <meta charset="utf-8"/> <script src="./js/jquery-1.4.3.js"></scrip

19、t> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 30px;height : 50px;border : 1px solid red;background : pink;float : left; </style> </head> <body><input type="button" id="btn1" value="選擇器1" />

20、<input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input type="button" id="btn4" value="選擇器4" /><br><br><div>this is div element.<

21、;div class="one"></div><div class="one"></div></div><div>this is div.</div><div>this is element.<div class="one"></div></div><div></div> </body></html>選擇器運(yùn)用<html> <head> &

22、lt;title>內(nèi)容過(guò)濾選擇器</title> <meta charset="utf-8"/> <script src="js/jquery.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 30px;height : 50px;border : 1px solid red;background : pink;float : le

23、ft; </style> </head> <body><input type="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input

24、 type="button" id="btn4" value="選擇器4" /><br><br><div>this is div element.<div class="one"></div><div class="one"></div></div><div>this is div.</div><div>this is element.<div clas

25、s="one" style="height: 150px;"><div class="one" style="height: 100px;"></div></div></div><div></div><script>/ 匹配包含給定文本的元素，文本中含有div的變色$("#btn1").click(function()/ 文本中包含"div"的div元素$("div:conta

26、ins('div')").css("background","blue"););/ 匹配所有不包含子元素或者文本的空元素，里面是空的$("#btn2").click(function()$("div:empty").css("background","yellow"););/ 匹配含有子元素或者文本的元素，最外面大的變色$("#btn3").click(function()$("div:parent").css

27、("background","yellow"););/ 匹配包含選擇器所匹配的元素的元素（爹），上面的變色$("#btn4").click(function()$("div:has('.one')").css("background","yellow"););</script> </body></html>4 可見(jiàn)選擇器Visible ：匹配所有的可見(jiàn)元素Hidden： 匹配所有不可見(jiàn)元素，或者type為hidden的元素框

28、架<html> <head> <title>可見(jiàn)性過(guò)濾選擇器</title> <meta charset="utf-8"/> <script src="./js/jquery-1.4.3.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 100px;height : 100px;border : 1px

29、 solid red;float : left;display : none; </style> </head> <body><input type="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><br><br><div></div><div>&

30、lt;/div><div class="one"></div> </body></html>框架案例<html> <head> <title>可見(jiàn)性過(guò)濾選擇器</title> <meta charset="utf-8"/> <script src="js/jquery.js"></script> <style>div width : 100px;height : 100px;border

31、 : 1px solid black;float : left;.one width : 100px;height : 100px;border : 1px solid red;float : left;display : none; </style> </head> <body><input type="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value

32、="選擇器2" /><br><br><div></div><div></div><div class="one"></div><script>/ 三個(gè)div元素 - 2個(gè)顯示1個(gè)隱藏/ 匹配所有的可見(jiàn)元素$("#btn1").click(function()$("div:visible").css("background","yellow"););/ 匹配所有不可

33、見(jiàn)元素，或者type為hidden的元素$("#btn2").click(function()/ 先將隱藏的div元素,顯示出來(lái),再改變背景顏色$("div:hidden").show(3000).css("background","pink");/ 鏈?zhǔn)讲僮?- jQuery所有的方法都返回jQuery對(duì)象);</script> </body></html>5 屬性選擇器框架<html> <head> <title>屬性過(guò)濾選擇器</t

34、itle> <meta charset="utf-8"/> <script src="./js/jquery-1.4.3.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 100px;height : 100px;border : 1px solid red;float : left;display : none; </style>

35、 </head> <body><input type="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input type="button

36、" id="btn4" value="選擇器4" /><input type="button" id="btn5" value="選擇器5" /><input type="button" id="btn6" value="選擇器6" /><input type="button" id="btn7" value="選擇器7" />

37、;<br><br><div id="div1" title="test"></div><div title="tesst"></div><div title="teest"></div><div title="testt"></div><div></div> </body></html>框架案例<html> <h

38、ead> <title>屬性過(guò)濾選擇器</title> <meta charset="utf-8"/> <script src="js/jquery.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 100px;height : 100px;border : 1px solid red;float : left;disp

39、lay : none; </style> </head> <body><input type="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" />&

40、lt;input type="button" id="btn4" value="選擇器4" /><input type="button" id="btn5" value="選擇器5" /><input type="button" id="btn6" value="選擇器6" /><input type="button" id="btn7" v

41、alue="選擇器7" /><br><br><div id="div1" title="test"></div><div title="tesst"></div><div title="teest"></div><div title="testt"></div><div></div><script>/ 匹配包含給定屬

42、性的元素$("#btn1").click(function()/ 定位的是具有title屬性的div元素$("divtitle").css("background","yellow"););/ 匹配給定的屬性是某個(gè)特定值的元素$("#btn2").click(function()$("divtitle='test'").css("background","yellow"););/ 匹配所有不含有指定的屬性，或者屬性不等于

43、特定值的元素$("#btn3").click(function()/ 定位具有title屬性值不等于test的 - 包含沒(méi)有title屬性的元素$("divtitle!='test'").css("background","yellow"););/ 匹配給定的屬性是以某些值開(kāi)始的元素$("#btn4").click(function()$("divtitle='tes'").css("background","ye

44、llow"););/ 匹配給定的屬性是以某些值結(jié)尾的元素$("#btn5").click(function()$("divtitle$='est'").css("background","yellow"););/ 匹配給定的屬性是以包含某些值的元素$("#btn6").click(function()$("divtitle*='es'").css("background","yellow");)

45、;/ 復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用$("#btn7").click(function()/ 多個(gè)屬性過(guò)濾選擇器并列使用 - 交集$("dividtitle*='es'").css("background","yellow"););</script> </body></html>6子元素框架選擇器框架<html> <head> <title>子元素過(guò)濾選擇器</title> <meta charse

46、t="utf-8"/> <script src="./js/jquery-1.4.3.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 30px;height : 30px;border : 1px solid red;float : left; </style> </head> <body><input type

47、="button" id="btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input type="button" id="btn4" value="選擇

48、器4" /><br><br><div id="div1"><div class="one"></div><div class="one"></div><div class="one"></div></div><div id="div2"><div class="one"></div></div>

49、<div id="div3"><div class="one"></div><div class="one"></div></div><div id="div4"></div> </body></html>框架案例<html> <head> <title>子元素過(guò)濾選擇器</title> <meta charset="utf-8&qu

50、ot;/> <script src="js/jquery.js"></script> <style>div width : 100px;height : 100px;border : 1px solid black;float : left;.one width : 30px;height : 30px;border : 1px solid red;float : left; </style> </head> <body><input type="button" id=&

51、quot;btn1" value="選擇器1" /><input type="button" id="btn2" value="選擇器2" /><input type="button" id="btn3" value="選擇器3" /><input type="button" id="btn4" value="選擇器4" /><br>

52、<br><div id="div1"><div class="one"></div><div class="one"></div><div class="one"></div></div><div id="div2"><div class="one"></div></div><div id="div3&qu

53、ot;><div class="one"></div><div class="one"></div></div><div id="div4"></div><script>/ 匹配第一個(gè)子元素，三個(gè)都變化$("#btn1").click(function()$("div:first-child").css("background","yellow"););/

54、 匹配最后一個(gè)子元素，三個(gè)小div都變化$("#btn2").click(function()$("div:last-child").css("background","yellow"););/ 匹配其父元素下的第N個(gè)子或奇偶元素，大的是偶不算$("#btn3").click(function()/ :nth-child()選擇器，是從 1 開(kāi)始$("div:nth-child(2)").css("background","yellow"););/ 如果某個(gè)元素是父元素中唯一的子元素，獨(dú)生子變色$("#btn4").click(function()$("div:only-child").css("background","yellow"););</scrip

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論