读jQuery之三(构建选择器)
来源:互联网 发布:mac php ext 目录 编辑:程序博客网 时间:2024/05/29 17:09
前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成,以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。
为了叙述每一篇的重点,其示例代码都是最精简的,比如选择器只能传HTMLElement和id。
这篇我们增强下选择器,依据2/8原则,这里仅实现最常用的几种。
1, 通过id获取,该元素是唯一的
1
$(
'#id'
)
2, 通过className获取
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获取
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'
)
示例:
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
>
<
script
src
=
"http://files.cnblogs.com/snandy/zchain-0.3.js"
></
script
>
</
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输出如下
0 0
- 读jQuery之三(构建选择器)
- jQuery选择器(三)
- jQuery选择器之全选择器(*选择器)
- jQuery选择器之全选择器(*选择器)
- jQuery选择器之全选择器(*选择器)
- JQuery基础之(三)JQuery选择器
- jQuery学习之路(三) 高级选择器
- Jquery选择器练习(三)
- jQuery的选择器(三)
- jQuery(三)常规选择器
- JQuery学习笔记3:选择器之三
- jQuery学习笔记之三-----常规选择器
- JQuery选择器(三)过滤选择器
- JQuery三大选择器:(基本+层次+表单)选择器
- JQuery入门(三)-选择器1
- 带你学习Jquery(三):选择器
- jquery自学系列三:选择器(下)
- C#JQuery学习(三)选择器
- 将java对象转换成json字符串
- a标签的target属性用法
- 正则表达式
- 正则表达式例子
- ceshi ceshi
- 读jQuery之三(构建选择器)
- 读jQuery之四(优雅的迭代)
- ws之XFireProxyFactory简单配置
- 读jQuery之五(取DOM元素)
- XFire完整入门教程
- struts2的json-default和struts-default的区别
- jsp exception对象获取异常信息
- python 时间
- jQuery插件之清空区域内容