Your SlideShare is downloading. ×
0
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
[2009.12.06]javascript dom selectors
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[2009.12.06]javascript dom selectors

301

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
301
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Javascript Selectors by:Denis UED Team Design
  • 2. 目录 <ul><li>Selectors 长什么样 </li></ul><ul><li>JS Selectors & CSS Selectors </li></ul><ul><li>JS Selectors 与框架 </li></ul><ul><li>怎么用 Selectors 引擎 </li></ul><ul><li>YAHOO.util.Selector.query </li></ul>
  • 3. 常用的 Selectors <ul><li>“ #ElementId” </li></ul><ul><li>“ .ClassName” </li></ul><ul><li>“ TagName” </li></ul><ul><li>“ [AttributeName]” </li></ul>
  • 4. 高级的 Selectors <ul><li>“ :empty” </li></ul><ul><li>“ :first-child” </li></ul><ul><li>“ :nth-child(odd)” </li></ul><ul><li>“ :nth-child(even)” </li></ul><ul><li>“ (PreExpr)>(NextExpr)” </li></ul><ul><li>“ (PreExpr)+(NextExpr)” </li></ul><ul><li>“ (PreExpr)~(NextExpr)” </li></ul><ul><li>“ [AttributeName=(Value)]” </li></ul><ul><li>“ [AttributeName^=(Value)]” </li></ul><ul><li>“ [AttributeName$=(Value)]” </li></ul>
  • 5. 表单中的 Selectors <ul><li>“ :checked” </li></ul>
  • 6. JS Selectors & CSS Selectors <ul><li>两者在使用上并没有直接关系。但两者长得很像,并从 不同的角度 管理着 HTML 页面上的 Dom 节点。 </li></ul><ul><li>JS Selectors 通过 JS 原生的方法或者浏览器支持的方法,结合正则,筛选 Dom </li></ul><ul><li>CSS Selectors 通过浏览器内置的渲染引擎筛选 Dom </li></ul><ul><li>两者最终得到的结果互不相干 </li></ul>
  • 7. JS Selectors 与框架 <ul><li>通俗地说, Selectors 引擎是独立的,是作为 JS 框架的一个组件存在的。 </li></ul><ul><li>目前有很多引擎,大多没有独立的名字,是跟随 JS 框架出现的 ( 如 YUI , Ext , Dojo) </li></ul><ul><li>jQuery 的引擎为 Sizzle ,目前效率最高的引擎之一。此外还有 Peppy 。 </li></ul><ul><li>YUI 2.x 的引擎效率惨不忍睹, 3.x 的效率有了脱胎换骨的优化,是亮点。 </li></ul>
  • 8. 怎么用 Selectors 引擎 <ul><li>其实很简单: </li></ul><ul><li>JS Selectors 引擎,用山寨的话来解释,那就是:一个返回类型是 array 的 function ,它必须包含一个 string 类型的 Selector 表达式参数,之后的可选参数等你用段日子再了解也不迟! </li></ul><ul><li>于是,我们用 YUI 2.x 中的引擎来玩玩吧! </li></ul>
  • 9. YAHOO.util.Selector.query <ul><li>看到标题了吗?这就是 YUI 2.x 中的 Selectors 引擎所在的命名空间 ( YAHOO.util.Selector ) 和方法名 ( query ) 。 </li></ul><ul><li>来看看 query 这个方法的官方 API: </li></ul><ul><ul><li>static Array query ( selector, root, firstOnly) </li></ul></ul><ul><li>看完了?理解了?就这么简单! </li></ul><ul><li>接下去我们来实战演习一下: </li></ul>
  • 10. YAHOO.util.Selector.query <ul><li>看完了?理解了?就这么简单! </li></ul><ul><li>接下去我们来实战演习一下: </li></ul>
  • 11. 扩展思维 <ul><li>YUI 2.x 的 Selectors 引擎效率低,我们能否切换一个效率更高的引擎呢?答案是肯定的! YAHOO.util.Selector.query 作为一个静态函数我们可以用更高的引擎来重写它,比如我们用 Sizzle 的引擎来替换它: YAHOO.util.Selector.query=Sizzle ; </li></ul><ul><li>当然我们也可用从 YUI 3.x 版本中剥离出高效的引擎来重写 2.x 中的引擎 </li></ul>

×