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

提交评论