前面两篇已经道明了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
06 >
07
08
09
10
11
ccc
12
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输出如下
