1. Selectors & Traversing
发 —带 轻 转HTML

2. 录
Selectors
Javascript Selectors 产
jQuery Selectors
Selectors
Tree Traversal
jQuery Tree Traversal
Selectors or Tree Traversal
简单
进阶

3. Selectors
Selectors 译 “选择 ” CSS样
#doc { background-color: #fff; }
#doc div { padding: 8px; }
.red { color: red; }
a > span { font-size: 12px; }
h3:first-child { border-bottom: solid 3px #333; }
input[type=”text”] { border: solid 1px #999; }
button:enabled { color: #fff; }
http://www.w3.org/TR/CSS2/selector.html
http://www.w3.org/TR/css3-selectors/

4. Selectors
树 XML n 节 组
节 “标签 ”“ ”“ 节 ”组
节 间 孙
样 为“ ”
节 id tag class……
节 间 parent (first/last)child prev next……

5. Javascript Selectors 产
CSS Selectors 为浏览 寻 节 进 样
Javascript 查 节 进
Javascript“ ” CSS Selectors 扩
规则
JS 实现 Selectors jQuery YUI Mootools
Dojo…

6. JS Selectors 处
节 标
Javascript DOM查 浏览
CSS2.1 CSS3 查 规则
扩 CSS 规则
优 DOM查
jQuery Selectors “Sizzle”

7. Javascript
document.getElementById()
IE6 7 id name 查
document.getElementsByName()
IE id name 查
document.getElementsByClassName()
IE6 7 8 该
document.getElementsByTagName()
显 问题

8. 认识.querySelectorAll()
现 浏览 选择
IE6 7
IE8 CSS2.1标 选择
context.querySelectorAll(selector)

9. jQuery Selectors
jQuery(selector, context)
selector: string 选择 达
context: string|DOM|jquery 查询 围 认为
document
$(“#doc”); $(“button:enabled”);
$(“div”, “#doc”); $(“input:text”);
$(“div>h3”); $(“a[data-alitalk]”);
$(“span.red, em.red”); $(“div:animated”);

10. 选择
“#id” “tag” “[name=***]”
这 3 选择 “简单选择 ” 对应
”.getElementById()”
”.getElementsByTagName()”
“.getElementsByName()”
3
“tag.class”
“.class” IE9+ FF Chrome Safari 对应
“.getElementsByClassName()”
”.class” IE6 7 8 样 选择 时请 tag
“a>b”
b 为a 时 过“>”选择 选择 时

11. JS选择
“selector1, selector2, ...”
这 选择 进 DOM选择 “ ”
块 级 请优 选择
“selector1” ”selector2” “...” 运 执 业务逻辑
“:contains()”
这 伪 选择 jQuery扩 浏览
这 选择 对获 DOM innerHTML 进 验证

12. 选择
选择 执 结 缓 过选择 获 DOM
销
优 对 选择
1. 简单选择 id tag name
2. CSS2.1 选择
3. CSS3标 选择
4. 选择
变 选择 执 结 该选择 对应 DOM

13. Tree Traversal
译 “树 历” 对 DOM节
浏览 Tree Traversal
.previousSilbing
.nextSilbing
.children
.firstChild
.lastChild

14. jQuery Tree Traversal
.children([selector]); .parent([selector]);
满 选择 selector 级 /
.closest([selector][, context])
满 选择 selector context 围
.offsetParent();
positioned
positioned: 样 义postion为relative, absolute

15. .next([selector]); .prev([selector]);
/ 满 选择 selector
ps: 满 selector 则
.nextAll([selector]); .prevAll([selector]);
/ 满 选择 selector
ps: 满 selector 则

16. 选择
选择 “#id”优 级 远 须
id资 id HTML丧 语义 维护
优 Tree Traversal 获 DOM
标签 “tag.***” IE6 7
书 语义 结构 HTML
JS处 HTML

17. <div id="doc"> var doc = $(‘#doc’);
....
<div class="layout"> liFirst.closest(‘div.layout’);
<div class="grid-5">
<dl class="first"><dt>1</dt><dd>张 </dd><dd> </dd></dl>
<dl><dt>2</dt><dd> </dd><dd> </dd></dl>
<dl><dt>3</dt><dd> </dd><dd> </dd></dl>
</div> $(‘dt + dd’, doc);
<div class="grid-20 grid-fixed"> $(‘li.first’, doc);
var liFirst =
$(‘div.layout’, doc); <ul>
<li class="first"><img alt="" src="img1.png" /></li>
$(‘ul>li’, doc);
<li><a href="#">link1</a><span>text</span></li>
<li></li>
<li><div><a href="#">link2</a></div></li>
</ul>
$(‘li:empty’, doc);
</div>
</div>
<div class="layout"></div>
....
</div>

18. jQuery扩 伪 Selectors
$(‘:button’, form)
<button ...></button>
<input type=”button” ...></input>
$(‘:text’, form); $(‘:checkbox’, form); $(‘:radio’, form);
<input type=”text|checkbox|radio|file|image|
password” ...></input>
这 选择 议 $(‘input[type=text|checkbox]’)
$(‘:disabled’, form); $(‘:enabled’, form);
/ 单 button, input, select,
option, textarea, fieldset.

19. $(‘:checked’, form);
选 checkbox radio
$(‘:selected’, form);
选 option select option
$(‘:input’, form);
选择form input textarea select button
$(‘:reset’, form); $(‘:submit’, form)
<input type=”reset|submit” ...></input>
<button type=”reset|submit” ...></button>

20. $(‘:focus’, form);
标
$(‘:visible’); $(‘:hidden’);
1. Style 义display:none;
2. 单 type=”hidden”
3. 实际宽 为0
4. 级 递归 为1 3
$(‘:even’); $(‘:odd’);
获 / ps: 钢 键样

21. $(‘:first’); $(‘:last’)
获 /
$(‘:gt(index)’); $(‘:lt(index)’);
获 / index
$(‘:eq(index)’);
获 为index
议 .eq(index)
$(‘:empty’); $(‘:parent’);
获 节

22. $(‘:first-child’); $(‘:last-child’);
$(‘:nth-child(n)’);
获 节 / / n
$(‘:only-child’);
获 节 节
$(‘:has(selector)’); $(‘:not(selector)’);
获 满 选择 selector
$(‘:contains(text)’);
获 节 text

23. jQuery扩 实现 伪 选择
1. 严 选择 围 传递 context
2. 简单选择 ”.filter()”对
进 筛选
伪 选择 优
语义 较
为选择 备 class

24. jQuery扩 Traversing
.is(selector|function(index)|jQuery object|element)
满 Bolean
1. 满 选择
2. 调 true
3. 为 jQuery对 对 element
4. 为 DOM对
$.contains(container, contained)
HTML结构 Bolean
container:

25. Q&A