`
wutao33543
  • 浏览: 64854 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Prototype使用学习手册指南之Selector.js

阅读更多
Prototype 中的Selector主要支持tag选择器、class选择器和id选择器,还有属性(attribute)选择器,Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,基本上包含我们平时所用的所有类型
The following table summarizes CSS2 selector syntax, 详细的可以看http://www.w3.org/TR/REC-CSS2/selector.html:
Pattern Meaning Described in section
* Matches any element. Universal selector
E Matches any E element (i.e., an element of type E). Type selectors
E F Matches any F element that is a descendant of an E element. Descendant selectors
E > F Matches any F element that is a child of an element E. Child selectors
E:first-child Matches element E when E is the first child of its parent. The :first-child pseudo-class
E:link E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes
E:active E:hover E:focus Matches E during certain user actions. The dynamic pseudo-classes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class
E + F Matches any F element immediately preceded by an element E. Adjacent selectors
E[foo] Matches any E element with the “foo” attribute set (whatever the value). Attribute selectors
E[foo=”warning”] Matches any E element whose “foo” attribute value is exactly equal to “warning”. Attribute selectors
E[foo~=”warning”] Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”. Attribute selectors
E[lang|=”en”] Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. Attribute selectors
DIV.warning HTML only. The same as DIV[class~=”warning”]. Class selectors
E#myid Matches any E element ID equal to “myid”. ID selectors
Selector中包含Selector对象和类,
其中Selector也有几个静态方法,它们分别是:

matchElements(elements, expression):返回elements中符合expression的元素列表
findElement(elements, expression, index):返回elements中符合expression的元素列表中索引为index的元素
findChildElements(element, expressions):找出element的子孙元素中符合expressions的元素列表,其中expressions是一个expression数组,其中的expression支持"div li.#id"形式

$$方法:只是简单的调用return Selector.findChildElements(document, $A(arguments))
虽然Selector有这么多方法,但是大部分都是内部调用的,我们一般都很少使用,因为我们有个一个方便的方法$$,对于绝大部分情况已经足够了

Selector对象具有下面两个方法:

match(element):元素是否与本selector匹配,在Element中已经介绍了
findElements(parentNode):parentNode中所有匹配本selector的子孙元素列表
使用方法也很简单 var s=new Selector(expression); s.match(element); s.findElements($(element)),其中expression可以是如下方式 "div"、"#id"、".class"、"div#id"、"div[attribute]"、"div[attribute=fff]"、"div[attribute!=sdf]"
分享到:
评论

相关推荐

    Prototype使用指南之selector.js说明

    在探讨Prototype框架中的Selector.js使用指南之前,首先需要了解CSS选择器的基础知识。CSS选择器是一种用于选取HTML文档中元素的语言模式,它允许开发者以非常精确的方式定位页面上的内容。在 Prototype.js 库中,...

    Prototype使用指南之selector.js

    Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,Prototype 中的Selector主要支持tag选择器...

    prototype-1.6.0.2.js.rar

    Prototype.js 是一款广泛使用的JavaScript库,它极大地扩展了JavaScript的基本功能,提供了丰富的DOM操作、事件处理、Ajax交互以及对象扩展等工具,使得JavaScript编程变得更加简洁高效。在"prototype-1.6.0.2.js....

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    总结来说,这个压缩包是学习和使用Prototype JavaScript库的宝贵资源。通过阅读手册,你可以了解如何利用Prototype进行DOM操作、事件处理、Ajax通信和动画效果。而源代码文件`prototype-1.6.0.3.js`则让你可以直接在...

    基于jQuery Selector.js插件实现的联动下拉框表单美化效果源码.zip

    在前端开发中,表单是用户与网页交互的...通过对这些文件的理解和分析,开发者可以学习到如何使用jQuery和Selector.js实现联动下拉框,以及如何结合Ajax和CSS进行表单美化,这对于前端开发者来说是一份宝贵的实战经验。

    prototype.js 1.4版开发者手册(强烈推荐)

    《prototype.js 1.4版开发者手册》是JavaScript开发领域中的一个重要参考资料,尤其对于那些希望深入理解并利用Prototype库的开发者来说,它是一份不可多得的资源。Prototype.js是一个强大的JavaScript库,由Sam ...

    prototype.js 1.4-1.6[全]

    Prototype.js 是一个广泛使用的JavaScript库,它扩展了JavaScript语言的功能,为开发人员提供了更强大的面向对象编程支持。该库的核心特性是其对JavaScript原型(prototype)机制的深入利用,使得JavaScript对象的...

    jquery.selector-px.js

    jquery.selector-px.js 在微信端实现苹果的下拉框的选取

    prototype 开发应用手册,笔记,prototype.js文件下载

    Prototype还为Array和String等内置类型提供了许多实用的扩展方法,如`Array.prototype.each()`, `String.prototype.startsWith()`等,增强了这些类型的可操作性。 七、实际应用 Prototype常被用于构建复杂的Web...

    selector.js

    selector.js

    Prototype.js 1.6.0.3 及中文CHM帮助文档

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了丰富的功能和便利,旨在简化和优化在浏览器环境中进行的脚本编写。1.6.0.3 版本是该库的一个稳定版本,它包含了对先前版本的改进和修复,以...

    Android文字颜色背景触摸点击反馈色之selector.zip

    `selectordemo`可能是包含一个示例项目的目录,展示了如何在Android Studio工程中使用`selector`实现文字和背景颜色的触摸反馈。通过分析和运行这个示例,开发者可以更直观地理解`selector`的工作原理,并将其应用到...

    Java-NIO之Selector.doc

    Java NIO(非阻塞I/O)中的Selector是一个核心组件,它允许单个线程处理多个通道(channels)上的I/O事件。Selector的角色就像一个交通指挥员,能够监控多个通道并决定哪个通道准备好进行读写操作,从而提高系统的...

    js框架prototype-1.6.0.3.js

    总的来说,Prototype 1.6.0.3.js是一个强大而全面的JavaScript框架,它通过丰富的API和特性,提升了JavaScript开发的效率和代码质量。无论是处理DOM、实现AJAX通信还是创建复杂的动画效果,Prototype都能提供强大的...

    Prototype1.5.1使用手册

    《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南,该库是Web开发中的一个强大工具,尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm(Compiled Help Manual)格式提供,...

    prototype-1.4.0源码解读.js

    Prototype 对数组也做了扩展,如`Array.prototype.each`用于遍历数组,`Array.prototype.clone`创建数组副本,`Array.prototype.include`添加元素至数组等。这些方法增强了数组的功能,使得数组操作更加便利。 7. ...

    prototype 1.6.0.2.js+使用DEMO例子

    Prototype JavaScript 框架是早期Web开发中广泛使用的库,它为JavaScript添加了许多实用功能,提高了开发效率。1.6.0.2是Prototype的一个版本,这个版本在2008年发布,提供了许多增强和修复。在这个"prototype 1.6....

    02-Selector.js

    选择器.js 使用 javascript 构建 CSS 选择器和 DOM 遍历器。 在“src”文件夹中查找您需要编写的名为 selector.js 的文件(去图!) “spec”文件夹包含我们将使用的测试文件

Global site tag (gtag.js) - Google Analytics