MooTools - Selectors-alljchome-开发者的教程家园

MooTools Tutorial

MooTools Useful Resources

Selected Reading

MooTools - Selectors

Selectors are used to select HTML elements. Whenever you want to make interactive web pages, you need to select some data or an action from that web page. Selectors help us receive data through HTML request from elements.

Basic Selector(&dollar;)

The &dollar; is the basic selector in MooTools. Using this, you can select DOM element by its ID. For example, suppose you have an HTML element (such as span) named body_id.

<span id = "body_id">

</span>

If you want to select this span, use the following syntax −

Syntax

//selects the element with the ID  body_id 
$( body_id );

getElement( )

getElement() is a method which extends basic selector ($). It allows you to refine your selection using element ID. getElement() only selects the single element and will return the first if there are multiple options. You can also use Class name to get the first occurrence of an element. But it will not get array of elements.

Multiple Selector (&dollar;&dollar;)

The &dollar;&dollar; is used to select multiple elements and place those multiple elements into an array. From that array we can manipulate, retrieve, and reorder the pst in different ways. Take a look at the following syntax. It defines how to select all span elements from a collection of HTML elements on a webpage.

Syntax

<span>
   <span>a span</span>
   <span id = "id_name">a span</span>
</span>

If you want to select all spans, use the following syntax −

Syntax

//all spans in the page
$$( span );

If you want to select multiple spans with the same id name, use the following syntax −

Syntax

//selects the element with the id  id_name  and all spans
$$( #id_name ,  span );

getElements()

getElements() method is similar to getElement() method. This method returns all elements according to the criteria. You can use either element name (a, span, input) to select those collections or a particular element class name for selecting collection of elements of the same class.

Include and exclude results with operators

MooTools supports different operators used to refine your selections. You can use all these operators in getElements() method. Each of these operators can be used to select an input element by name.

Take a look at the following table. It defines the different operators that MooTools supports.

Operator	Description	Example
= (equal to)	Select input element by its name.	&dollar;( body_wrap ).getElements ( input[name = phone_number] );
^= (starts with)	Select input element by comparing its starting letters of the name.	&dollar;( body_wrap ).getElements ( input[name^=phone] );
&dollar;= (ends with)	Select the input element by comparing its ending letters of the name.	&dollar;( body_wrap ).getElements ( input[name$ = number] );
!= (is not equal to)	De-select the input element by is name.	&dollar;( body_wrap ).getElements ( input[name!=address] );
*= (Contains)	Select the input element which contains particular letter pattern.	&dollar;( body_wrap ).getElements ( input[name*=phone] );

Selectors based on element order

MooTools selectors follow a particular order in element selection. The selectors mainly follow two orders; one is even and the other is odd.

Note − This selector starts at 0, so the first element is even.

Even order

In this order, the selector selects the elements which are placed in an even order. Use the following syntax to select all even spans in your HTML page.

Syntax

// selects all even spans
$$( span:even );

Odd order

In this order, the selector selects the element placed in an odd order. Use the following syntax to select all odd spans in your HTML page.

Syntax

// selects all odd spans
$$( span:odd );

Example

The following example shows how a selector works. Suppose, there is a textbox and a pst of technologies on a webpage. If you pick one technology from the pst by entering that name into the textbox, then the pst shows the filtered results based on your input. This is possible using the MooTools selector. Using selector, we can add an event to the textbox. The event pstener will pick the data from the textbox and check it from the pst. If it is there in the pst, then the pst shows the filtered results. Take a look at the following code.

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent( domready ,function(){
            var input = $( filter );
            
            // set the title attribute of every element
            // to it s text in lowercase
            $$( ul > p ).each(function(item){
               item.set( title , item.get( text ).toLowerCase());
            });
            
            // the function we ll call when the user types
            var filterList = function(){
               var value = input.value.toLowerCase();
               $$( p ).setStyle( display , none );
               
               // check the title attribute if it contains whatever the user is typing
               $$( ul > p[title*=  + value +  ] ).setStyle( display ,  );
            };
            
            // make it happen
            input.addEvent( keyup , filterList);
         });
      </script>
   </head>
   
   <body>
      <p><input id = "filter" type = "text" /></p>
      <ul>
         <p>C</p>
         <p>Cpp</p>
         <p>Java</p>
         <p>JavaScript</p>
         <p>Hadoop</p>
         <p>Hive</p>
         <p>CouchDB</p>
      </ul>
   </body>
   
</html>

You will receive the following output −

Output