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]"

时间: 2024-09-07 19:40:05

Prototype使用学习手册指南之Selector.js的相关文章

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

和在我以前使用这个类库的不少开发者一样,一开始,我不得不一头扎进阅读prototype.js的源代码和实验它的功能中.Prototype中的ajax.js提供了一个非常好用的ajax框架,一般应用中简单的调用以下代码就可以了 new Ajax.Request( url, {method: "get", onSuccess: showFilter, onFailure: function(request){alert("Server error!")}, onExce

prototype使用学习手册指南之Position.js

Position是prototype中定义的一个对象,提供了操作DOM中与位置相关的方法,要很好的理解元素在页面中的位置,具体代码如下,按照代码说说,其中英文是作者的注释,中文的才是偶的说明或翻译英文的注释,采用顶式注释法(注释在要说明的代码的上面)说明 // set to true if needed, warning: firefox performance problems // NOT neeeded for page scrolling, only if draggable conta

prototype使用学习手册指南之event.js

键盘事件包括keydown.kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键:而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符.可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了

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

这一部分提供了很多与表单操作有关的功能,包括以下部分,当通过$方法返回元素时,可以直接通过$(element).method()调用: Form对象:提供了操作整个表单的一些方法 Form.Element对象:提供了操作某个表单元素的方法 TimedObserver类:周期性表单监视器,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型 EventObserver类:利用事件来监视表单元素,当表单元素值改变的时候执行一个回调函数,有Form和Element两种类型 For

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

DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法.这部分提供了很多(写的都有点烦了)方便的操作dom的方法:包含有名的$方法.document.getElementsByClassName方法,以及Element对象.Insertion对象 以下部分一个一个的详细介绍: $(element):getElementById的封装,element可以是一个元素的id或元素本身,也可以是一个数组,这时返回一个数组,使用$方法,会自动调用E

轻松学习手册(3)XML的术语

第三章 XML的术语 导言 初学XML最令人头疼的就是有一大堆新的术语概念要理解.由于XML本身也是一个崭新的技术,正在不断发展和变化,各组织和各大网络公司(微软,IBM,SUN等)都在不断推出自己的见解和标准,因此新概念漫天飞就不足为奇了.而国内又缺乏权威的机构或组织来对这些术语正式定名,你所看见的有关XML的中文教材大部分是靠作者本身的理解翻译过来的,有些是正确的,有些是错误的,更加妨碍了我们对这些概念的理解和学习. 你下面将要看到的关于XML术语的解释,也是作者本身的理解和翻译.阿捷是以W

XML轻松学习手册(2)XML概念

xml|概念 第二章 XML概念 导言 经过第一章的快速入门学习,你已经知道了XML是一种能够让你自己创造标识的语言,它可以将数据与格式从网页中分开,它可以储存数据和共享数据的特性使得XML无所不能.如果你希望深入学习XML,系统掌握XML的来龙去脉,那么我们首先还是要回到XML概念的问题上来.XML(Extensible Markup Language),一种扩展性标识语言."扩展性""标识""语言".每一个词都明确的点明了XML的重要特点和功

XML轻松学习手册(3)XML的术语

xml 第三章 XML的术语 提纲:   导言 一.XML文档的有关术语 二.DTD的有关术语 导言 初学XML最令人头疼的就是有一大堆新的术语概念要理解.由于XML本身也是一个崭新的技术,正在不断发展和变化,各组织和各大网络公司(微软,IBM,SUN等)都在不断推出自己的见解和标准,因此新概念漫天飞就不足为奇了.而国内又缺乏权威的机构或组织来对这些术语正式定名,你所看见的有关XML的中文教材大部分是靠作者本身的理解翻译过来的,有些是正确的,有些是错误的,更加妨碍了我们对这些概念的理解和学习.

XML轻松学习手册(4)

xml 二.DTD的有关术语 什么是DTD,我们上面已经简略提到.DTD是一种保证XML文档格式正确的有效方法,可以比较XML文档和DTD文件来看文档是否符合规范,元素和标签使用是否正确.一个DTD文档包含:元素的定义规则,元素间关系的定义规则,元素可使用的属性,可使用的实体或符号规则. DTD文件也是一个ASCII的文本文件,后缀名为.dtd.例如:myfile.dtd. 为什么要用DTD文件呢?我的理解是它满足了网络共享和数据交互,使用DTD最大的好处在于DTD文件的共享.(就是上文DTD说