[2009.12.06]javascript dom selectors
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

[2009.12.06]javascript dom selectors

on

  • 363 views

 

Statistics

Views

Total Views
363
Views on SlideShare
363
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[2009.12.06]javascript dom selectors Presentation Transcript

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