JQuery 学习笔记选择器之六

复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.3.2.js"></script> <script type="text/javascript"></script> <title>无标题文档</title> </head> <body> <a href="#" onclick="javascript:location.reload();">重置</a> <ul id="ul1"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul> <ul> <li>li7</li> </ul> <a href="#" id="aNth1">设置ul1的偶索引子元素的背景颜色</a>｜ <a href="#" id="aNth2">设置ul1的奇索引子元素的背景颜色</a>｜ <a href="#" id="aFirst">设置ul1的头子元素的背景颜色</a>｜ <a href="#" id="aLast">设置ul1的尾子元素的背景颜色</a>｜ <a href="#" id="aOnly">设置所有ul中唯一子元素的背景颜色</a> </body> </html>1.$("ParentSelector ChildTagName:nth-child(...)")注-以下简写为:nth-child 描述：获取ParentSelector选择的元素集合的子元素集合进行索引筛选，如例子中点击aNth1后，对ID为ul1的元素的li子元素进行偶索引（even）选择（$("#ul1 li:nth-child(even)")），even这关键字应该不陌生吧，在第三章中有讲到，若还不清楚的话可先去第三章瞄下再继续^^，当然这里也可以用odd，不过在这里跟第三章有点不同，就是第三章中，索引是从0开始，不过这里的索引要从1开始哦，本人感觉这点设计的不是很好- -!，没有规范，不知道是不是设计的时候疏忽了。此方法还有一个蛮灵活的用法，就像例子中aNth2点击事件里，用$("#ul1 li:nth-child(2n+1)")的方法完成了类似$("#ul1 li:nth-child(odd)")的功能，至于2n+1应该不用我来讲解了吧，初中数学就经常用到了。实在不懂的话跟贴吧- -!。此方法也可以跟上具体的索引比如“2”,不过要记住哦，这里的索引是从1开始滴！！返回值：Array(Element); 2.:first-child 描述：获取选择的元素集合的头元素。这里写的简单点，应该看的懂吧，结合例子实在看不懂的话贴吧- -!。返回值：Array(Element); 3.:last-child 描述：获取选择的元素集合的尾元素。返回值：Array(Element); 4.:only-child 描述：获取无兄弟节点的元素，如例子中，第二个ul元素只有一个li子元素，所以$("ul li:only-child")方法只获取了li7。返回值：Array(Element);

　　推荐阅读

　　jquery JSON的解析方式

这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。这里首先给出JSON字符串集，字符串集如下：复制代码代码如下:var data>>>详细阅读

本文标题：JQuery 学习笔记选择器之六

地址：http://www.17bianji.com/kaifa2/JS/28377.html

1/2 1

JQuery 学习笔记 选择器之六

JQuery 学习笔记选择器之六