当前位置:编程学习 > JAVA >>

读jquery之三(构建选择器)

前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成,以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。

为了叙述每一篇的重点,其示例代码都是最精简的,比如选择器只能传HTMLElement和id。

这篇我们增强下选择器,依据2/8原则,这里仅实现最常用的几种。


1, 通过id获取,该元素是唯一的
$(#id)

2, 通过className获取
$(.cls) 获取文档中所有className为cls的元素
$(.cls, el)
$(.cls, #id)
$(span.cls) 获取文档中所有className为cls的span元素
$(span.cls, el) 获取指定元素中className为cls的元素, el为HTMLElement (不推荐)
$(span.cls, #id) 获取指定id的元素中className为cls的元素

3, 通过tagName获取
$(span) 获取文档中所有的span元素
$(span, el) 获取指定元素中的span元素, el为HTMLElement (不推荐)
$(span, #id) 获取指定id的元素中的span元素

4, 通过attribute获取
$([name]) 获取文档中具有属性name的元素
$([name], el)
$([name], #id)
$([name=uname]) 获取文档中所有属性name=uname的元素
$([name=uname], el)
$([name=uname], #id)
$(input[name=uname]) 获取文档中所有属性name=uname的input元素
$(input[name=uname], el)
$(input[name=uname], #id)


示例:

view sourceprint?01 <!DOCTYPE html> 

02 <html> 

03     <head> 

04         <meta charset="utf-8"> 

05         <title>zchain test</title> 

06         <script src="http://files.cnblogs.com/snandy/zchain-0.3.js"></script> 

07     </head>   

08 <body> 

09     <div id=content>aaa</div> 

10     <div>bbb</div> 

11     <p class="pra">ccc</p> 

12     <input type="submit" value="submit"/> 

13     <input type="button" value="submit"/> 

14     <script type="text/javascript"> 

15         var obj1 = $("#content"); // id 

16         var obj2 = $(div); // tagName 

17         var obj3 = $(.pra); // className 

18         var obj4 = $(input[type=button]); // attribute 

19           

20         console.log(obj1); 

21         console.log(obj2); 

22         console.log(obj3); 

23         console.log(obj4); 

24     </script> 

25 </body> 

26 </html>

 

Firebug输出如下

 

补充:软件开发 , Java ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,