讀jQuery之三（構建選擇器）
前面兩篇已經道明瞭jQuery的核心框架。弄清楚了jQuery對象的組成，以及如何用extend方法來擴展庫。鏈式操做 也僅僅是方法體內返回this。
爲了敘述每一篇的重點，其示例代碼都是最精簡的，好比選擇器只能傳HTMLElement和id。
這篇咱們加強下選擇器，依據2/8原則，這裏僅實現最經常使用的幾種。
1, 經過id獲取,該元素是惟一的javascript
|
1
|
$(
'#id'
)
|
2, 經過className獲取html
|
1
2
3
4
5
6
|
$(
'.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獲取java
|
1
2
3
|
$(
'span'
)
// 獲取文檔中全部的span元素
$(
'span'
, el)
// 獲取指定元素中的span元素, el爲HTMLElement (不推薦)
$(
'span'
,
'#id'
)
// 獲取指定id的元素中的span元素
|
4, 經過attribute獲取框架
|
1
2
3
4
5
6
7
8
9
|
$(
'[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'
)
|
示例：this
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title>zchain test</title>
</head>
<body>
<div id=
'content'
>aaa</div>
<div>bbb</div>
<p
class
=
"pra"
>ccc</p>
<input type=
"submit"
value=
"submit"
/>
<input type=
"button"
value=
"submit"
/>
<script type=
"text/javascript"
>
var
obj1 = $(
"#content"
);
// id
var
obj2 = $(
'div'
);
// tagName
var
obj3 = $(
'.pra'
);
// className
var
obj4 = $(
'input[type=button]'
);
// attribute
console.log(obj1);
console.log(obj2);
console.log(obj3);
console.log(obj4);
</script>
</body>
</html>
|
Firebug輸出以下spa
相關文章
- 1. Jquery選擇器（三）
- 2. jQuery源碼解讀三選擇器
- 3. 【jQuery】之選擇器
- 4. jquery 之選擇器
- 5. jQuery 之 [ 選擇器 ]
- 6. jQuery之選擇器
- 7. jQuery選擇器之層級選擇器
- 8. 【jQuery】三、過濾選擇器
- 9. jQuery的選擇器（三）
- 10. jQuery（三）之 選擇器(基礎版)
- 更多相關文章...
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • RSS 閱讀器 - RSS 教程
- • JDK13 GA發佈：5大特性解讀
- • Docker容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Jquery選擇器（三）
- 2. jQuery源碼解讀三選擇器
- 3. 【jQuery】之選擇器
- 4. jquery 之選擇器
- 5. jQuery 之 [ 選擇器 ]
- 6. jQuery之選擇器
- 7. jQuery選擇器之層級選擇器
- 8. 【jQuery】三、過濾選擇器
- 9. jQuery的選擇器（三）
- 10. jQuery（三）之 選擇器(基礎版)