Prototype使用指南之selector.js

回忆尽是伤2

回忆尽是伤2

2016-02-19 10:55

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的Prototype使用指南之selector.js懂设计的网友们快点来了解吧!

Selector是利用css selector来匹配选择页面元素的,所以要理解Selector首先应该对css selector有所理解,下面是css2 selector的语法,当然很多浏览器只是支持其中的一部分,Prototype 中的Selector主要支持tag选择器、class选择器和id选择器,还有属性(attribute)选择器,基本上包含我们平时所用的所有类型

The following table summarizes CSS2 selector syntax, 详细的可以看http://www.w3.org/TR/REC-CSS2/selector.html:

PatternMeaningDescribed in section*Matches any element.Universal selectorEMatches any E element (i.e., an element of type E).Type selectorsE FMatches any F element that is a descendant of an E element.Descendant selectorsE FMatches any F element that is a child of an element E.Child selectorsE:first-childMatches element E when E is the first child of its parent.The :first-child pseudo-classE:link E:visitedMatches 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-classesE:active E:hover E:focusMatches E during certain user actions.The dynamic pseudo-classesE: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-classE + FMatches any F element immediately preceded by an element E.Adjacent selectorsE[foo]Matches any E element with the “foo” attribute set (whatever the value).Attribute selectorsE[foo=”warning”]Matches any E element whose “foo” attribute value is exactly equal to “warning”.Attribute selectorsE[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 selectorsE[lang|=”en”]Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.Attribute selectorsDIV.warningHTML only. The same as DIV[class~=”warning”].Class selectorsE#myidMatches any E element ID equal to “myid”.ID selectors

Selector中包含Selector对象和类,

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

match(element):元素是否与本selector匹配,在Element中已经介绍了
findElements(parentNode):parentNode中所有匹配本selector的子孙元素列表

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

使用方法也很简单 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]"

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

其中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有这么多方法,但是大部分都是内部调用的,我们一般都很少使用,因为我们有个一个方便的方法$$,对于绝大部分情况已经足够了
展开更多 50%)
分享

猜你喜欢

Prototype使用指南之selector.js

Web开发
Prototype使用指南之selector.js

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

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

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Prototype使用指南之base.js

Web开发
Prototype使用指南之base.js

Prototype使用指南之string.js

Web开发
Prototype使用指南之string.js

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Prototype使用指南之dom.js

Web开发
Prototype使用指南之dom.js

Prototype使用指南之array.js

Web开发
Prototype使用指南之array.js

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Android 游戏引擎libgdx 资源加载进度百分比显示案例分析

Android 游戏引擎libgdx 资源加载进度百分比显示案例分析

安装打印机驱动出现126错误

安装打印机驱动出现126错误
下拉加载更多内容 ↓