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

[2009.12.06]javascript dom selectors

on

  • 346 views

 

Statistics

Views

Total Views
346
Views on SlideShare
346
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 [2009.12.06]javascript dom selectors Presentation Transcript

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