> 웹 프론트엔드 > JS 튜토리얼 > 프로토타입 사용 가이드 selector.js_prototype

프로토타입 사용 가이드 selector.js_prototype

WBOY
풀어 주다: 2016-05-16 19:21:10
원래의
1186명이 탐색했습니다.

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:

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 객체에는 다음 두 가지 메서드가 있습니다.

match(element): 요소가 이 선택기와 일치하는지 여부가 Element
findElements(parentNode): 목록에 도입되었습니다. 이 선택기와 일치하는 parentNode의 모든 하위 요소

사용 방법도 매우 간단합니다. 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]"

Selector에는 다음과 같은 여러 정적 메서드도 있습니다.

matchElements(elements, 표현식): 표현식과 일치하는 요소의 요소 목록을 반환합니다
findElement(elements, 표현식, 인덱스): 요소 반환 표현식
findChildElements(element,expressions): 다음의 하위 요소를 찾습니다. 요소 표현식과 일치하는 요소 목록입니다. 여기서 표현식은 표현식 배열이며 표현식은 "div li.#id" 형식을 지원합니다.

$$ 메서드: 단순히 호출 return Selector.findChildElements(document, $A(arguments))

Selector에는 메서드가 너무 많지만 대부분의 내부적으로 호출되며 대부분의 상황에 충분한 편리한 $$ 메소드가 있기 때문에 거의 사용하지 않습니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿