jquery選擇器練習_第1頁
jquery選擇器練習_第2頁
jquery選擇器練習_第3頁
jquery選擇器練習_第4頁
jquery選擇器練習_第5頁
已閱讀5頁，還剩14頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、1 點擊自增無限循環小病毒用編輯工具打開文件無法停止沒有出口死循環<!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基本過濾選擇器基本過濾選擇器 First：獲取第一個元素 Last ：獲取最后元素Ev

2、en ：匹配所有索引值為偶數的元素，從0開始計數Odd： 匹配所有所有索引值為奇數的元素，從0開始計數Eq（index） 匹配一個給定索引值的元素 Lt（index）匹配所有小于給定索引值的元素Gt（index） 匹配所有大于戈丁索引值的元素No（selector）去除所有與給定選擇器匹配的元素Header 匹配如h1 h2 h3 之類的標題元素框架<html> <head> <title>基本過濾選擇器</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>基本過濾選擇器</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>基本過濾選擇器</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>基本過濾選擇器</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>/* * 過濾選擇器: * * 使用":"符號用法 * * ":"和選擇器是一體的(不是分離的) * * 基本過濾選擇器: * * 選擇器 - ":first" - "first()" - 獲取第一個元素 */ / 獲取第一個元素，最外面最大的div變色 $("#btn1").click(function()$("div:first").css

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

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

16、); / 匹配所有大于給定索引值的元素，從第三個開始算 $("#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之類的標題元素，匹配標題 $("#btn9").click(function()/ :header的寫法是固定寫法 - 不常用$(":header").css("background","yellow");

18、);</script> </body></html>3 內容過濾器Contains（text）包含了指定的文本Empty 沒有文本，也沒有子節點Parent 有文本或者子節點Has（selector）有負責selector要求后代的元素框架<html> <head> <title>內容過濾選擇器</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>選擇器運用<html> <head> &

22、lt;title>內容過濾選擇器</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 可見選擇器Visible ：匹配所有的可見元素Hidden： 匹配所有不可見元素，或者type為hidden的元素框

28、架<html> <head> <title>可見性過濾選擇器</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>可見性過濾選擇器</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>/ 三個div元素 - 2個顯示1個隱藏/ 匹配所有的可見元素$("#btn1").click(function()$("div:visible").css("background","yellow"););/ 匹配所有不可

33、見元素，或者type為hidden的元素$("#btn2").click(function()/ 先將隱藏的div元素,顯示出來,再改變背景顏色$("div:hidden").show(3000).css("background","pink");/ 鏈式操作 - jQuery所有的方法都返回jQuery對象);</script> </body></html>5 屬性選擇器框架<html> <head> <title>屬性過濾選擇器</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>屬性過濾選擇器</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"););/ 匹配給定的屬性是某個特定值的元素$("#btn2").click(function()$("divtitle='test'").css("background","yellow"););/ 匹配所有不含有指定的屬性，或者屬性不等于

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

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

45、;/ 復合屬性選擇器，需要同時滿足多個條件時使用$("#btn7").click(function()/ 多個屬性過濾選擇器并列使用 - 交集$("dividtitle*='es'").css("background","yellow"););</script> </body></html>6子元素框架選擇器框架<html> <head> <title>子元素過濾選擇器</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>子元素過濾選擇器</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>/ 匹配第一個子元素，三個都變化$("#btn1").click(function()$("div:first-child").css("background","yellow"););/

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

溫馨提示

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

評論

0/150

提交評論