读jquery之三(构建选择器)

2014-11-24 01:08:51 · 作者: · 浏览: 0

前面两篇已经道明了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 html>

02

03

04

05 zchain test

06

13

14 <script type="text/java script">

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

25

26

Firebug输出如下