Selectors & Traversing

1,357 views

Published on

Published in: Technology
  • Be the first to comment

Selectors & Traversing

  1. 1. Selectors & Traversing 发 —带 轻 转HTML
  2. 2. 录 SelectorsJavascript Selectors 产 jQuery SelectorsSelectors Tree TraversaljQuery Tree TraversalSelectors or Tree Traversal简单进阶
  3. 3. SelectorsSelectors 译 “选择 ” 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.htmlhttp://www.w3.org/TR/css3-selectors/
  4. 4. Selectors树 XML n 节 组节 “标签 ”“ ”“ 节 ”组节 间 孙 样 为“ ” 节 id tag class…… 节 间 parent (first/last)child prev next……
  5. 5. Javascript Selectors 产CSS Selectors 为浏览 寻 节 进 样Javascript 查 节 进Javascript“ ” CSS Selectors 扩 规则 JS 实现 Selectors jQuery YUI MootoolsDojo…
  6. 6. JS Selectors 处 节 标 Javascript DOM查 浏览 CSS2.1 CSS3 查 规则扩 CSS 规则优 DOM查jQuery Selectors “Sizzle”
  7. 7. Javascriptdocument.getElementById() IE6 7 id name 查document.getElementsByName() IE id name 查document.getElementsByClassName() IE6 7 8 该document.getElementsByTagName() 显 问题
  8. 8. 认识.querySelectorAll()现 浏览 选择 IE6 7 IE8 CSS2.1标 选择 context.querySelectorAll(selector)
  9. 9. jQuery SelectorsjQuery(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. 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. 11. JS选择“selector1, selector2, ...” 这 选择 进 DOM选择 “ ” 块 级 请优 选择 “selector1” ”selector2” “...” 运 执 业务逻辑“:contains()” 这 伪 选择 jQuery扩 浏览 这 选择 对获 DOM innerHTML 进 验证
  12. 12. 选择选择 执 结 缓 过选择 获 DOM 销 优 对 选择 1. 简单选择 id tag name 2. CSS2.1 选择 3. CSS3标 选择 4. 选择 变 选择 执 结 该选择 对应 DOM
  13. 13. Tree Traversal 译 “树 历” 对 DOM节浏览 Tree Traversal.previousSilbing.nextSilbing.children.firstChild.lastChild
  14. 14. jQuery Tree Traversal .children([selector]); .parent([selector]); 满 选择 selector 级 / .closest([selector][, context]) 满 选择 selector context 围 .offsetParent(); positioned positioned: 样 义postion为relative, absolute
  15. 15. .next([selector]); .prev([selector]); / 满 选择 selector ps: 满 selector 则.nextAll([selector]); .prevAll([selector]); / 满 选择 selector ps: 满 selector 则
  16. 16. 选择选择 “#id”优 级 远 须 id资 id HTML丧 语义 维护优 Tree Traversal 获 DOM标签 “tag.***” IE6 7 书 语义 结构 HTML JS处 HTML
  17. 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. 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. 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. 20. $(‘:focus’, form); 标$(‘:visible’); $(‘:hidden’);1. Style 义display:none;2. 单 type=”hidden”3. 实际宽 为04. 级 递归 为1 3$(‘:even’); $(‘:odd’); 获 / ps: 钢 键样
  21. 21. $(‘:first’); $(‘:last’) 获 /$(‘:gt(index)’); $(‘:lt(index)’); 获 / index$(‘:eq(index)’); 获 为index 议 .eq(index)$(‘:empty’); $(‘:parent’); 获 节
  22. 22. $(‘:first-child’); $(‘:last-child’);$(‘:nth-child(n)’); 获 节 / / n$(‘:only-child’); 获 节 节$(‘:has(selector)’); $(‘:not(selector)’); 获 满 选择 selector$(‘:contains(text)’); 获 节 text
  23. 23. jQuery扩 实现 伪 选择1. 严 选择 围 传递 context2. 简单选择 ”.filter()”对 进 筛选 伪 选择 优 语义 较 为选择 备 class
  24. 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. 25. Q&A

×