Yui learning selector Selector

Document directory

• Preparation
• I. Basic usage
• Ii. Use Selector

Preparation

To use selector, you need to call two JS files.

Basic Library:
<SCRIPT src = "http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js”> </SCRIPT>

Selector file:
<SCRIPT src = "http://yui.yahooapis.com/2.5.2/build/selector/selector-beta-min.js”> </SCRIPT>

I. Basic usage

Query

VaR nodes = Yahoo. util. selector. Query ('div p ');

This statement returns an array of P. The condition of P is that the ancestor container is Div.

Query () can be usedOptionalThe third Boolean attribute value is used to select the first element in the array. For example, the following statement returns the first P element of the Div under the container with the ID of FOO:

VaR node = Yahoo. util. selector. Query ('div P', 'foo', 'true ');

Ii. Use selector 2.1 to add an event -- using selector to attach Event Listeners

QueryYou can easily add events to a group of elements.

VaR handleclick = function (e ){
Alert ('click ');
);
VaR nodes = Yahoo. util. selector. Query ('Li ');
Yahoo. util. event. On (nodes, 'click', handleclick );

In this example, handleclick is triggered when all a elements whose ancestor is Li are clicked.

2.2 test node -- testing a node

Another useful selector method isTest. Contains two values, one element node and one simple selector. Return a Boolean value to determine whether the element node meets the selection criteria of simple select.

VaR node = Document. getelementbyid ('foo ');
Alert (Yahoo. util. selector. Test (node, 'div. bar '));

In this example, determine whether the element with ID foo is a div and has a Class Name Bar. If yes, true is returned. Otherwise, false is returned.

2.3 filter nodes -- filtering nodes

FilterThe method can easily filter out elements with specific conditions, and the returned value is an array.

VaR candidates = Document. getelementsbytagname ('A ');
VaR nodes = Yahoo. util. selector. Filter (candidates, '[href]');

In this example, all links with the href attribute are returned.

2.4 use Attribute selection -- using attribute Operators

Yui selector can be used to select attributes of CSS 3.

For example, if you want to select all the name attributes starting with Yui input, in CSS 3, it is to use the ^ = selector.

VaR nodes = Yahoo. util. selector. Query ('input [name ^ = Yui] ');

For more powerful CSS 3 attribute selection methods, see the CSS 3 attribute selection document.

Supplement: If the attribute is selected as a class attribute in the attribute selection operator, the class instead of classname is used in this method, that is, the class is an attribute of the element, this is different from the DOM selection of Yui.

2.5 use the pseudo-class selection -- Using Pseudo-classes

Yui selector can also implement pseudo-class selection for most CSS 3. With pseudo-class selection, you can implement many functions that cannot be implemented by the Zen GUI selection.

For example, select the first Li element of ul.

VaR nodes = Yahoo. util. selector. Query ('ul Li: First-child ');

NotPseudo classes allow you to exclude elements with specific attributes.

VaR nodes = Yahoo. util. selector. Query ('input: NOE (type = button]) ');

This example allows you to select all input elements except the button type.

---- Note ----

To learn the selector of Yui, you must first familiarize yourself with the selector of CSS 3.

At first, we thought that the filters and filters should be repeated. However, we should take a closer look at whether the filter element has a certain attribute, such as the href attribute of a. the attribute selection tends to be determined by the attribute value.

For example, a href = "Google.com" and a href = "www.google.cn"
If a [href * = Google] is used for determination, both of them match;
If a [href $ = cn] is used for determination, www.google.cn is returned.
If a [href ^ = WWW] is used for determination, Google.com is returned.

Principle:

ATT * = VAL: the value of the ATT attribute contains the Val field;
ATT ^ = VAL: the value of the ATT attribute starts with Val;
ATT $ = VAL: the value of the ATT attribute ends with Val.

If the query method returns an array, the native js method selects the last element.

VaR links = Yahoo. util. selector. Query ('Li ');
VaR lastlink = Links [links. langth-1]

However, the last pseudo class in CSS 3 can be directly used.

VaR lastlink = Yahoo. util. selector. qurey ('Li A: Last-child '). the document example in CSS 3 is li> A: Last-child. If you just want to obtain the Li-level link, you need to write it like this.

The most abnormal of CSS 3 is the structure pseudo class (structural pseudo-classes), such as TR: Nth-child (2n + 1), to obtain all the odd rows in a table. If the parity value is very simple, such as nth-child (3N + 3) or (4n + 4) will be very good.

However, if you have read the jquery selector, you will find that the Yui selector is powerful but not flexible enough, because jquery provides many shortcut options for CSS 3 operations, such as Prev + next. Maybe you are not familiar with CSS 3. Maybe you can find the same concise method.