Java script dom selectors
Upcoming SlideShare
Loading in...5
×
 

Java script dom selectors

on

  • 504 views

 

Statistics

Views

Total Views
504
Views on SlideShare
455
Embed Views
49

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 49

http://wd.alibaba-inc.com 42
http://fd.aliued.cn 7

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

    Java script dom selectors Java script 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 中的引擎