After learning the last lesson, I believe that you should have a certain understanding of the mt selector. I will put a few more examples to help you understand the complex application of the selector:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script style = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"> </script>
</Head>
<Body id = 'A'>
<H2 class = 'A'> Single images <P>
<A class = 'B' title = "T1" href = "http://www.digitalia.be/images/25.jpg"> </a>
<A class = 'C' title = "B1" href = "http://www.digitalia.be/images/24.jpg"> </a>
<A class = 'D' href = "#"> </a>
</P>
<Script type = 'text/javascript '>
Alert ($ ('*'). get ('html '); // display the html source code of the current file
Alert ($ ('. B', '. C'). get ('title'); // select multiple nodes at the same time
Alert ($ ('a [title = B1] '). get ('href'); // title = 'b1 'a node
Alert ($ ('[href ^ = http]'). get ('href '); // nodes whose href starts with http
Alert ($ ('P> A'). get ('href '); // a node under p
Alert ($ ('a: not (. c) '). get ('href'); // class is not equal to a node of c
Alert ($ ('a: index (0) '). get ('href'); // The index is a node 0.
Alert ($ ("a [title] [href $ = jpg]"). get ('href '); // a node that contains the title attribute and ends with three letters of jpg.
</Script>
</Body>
</Html>
Well, our course today is a function. In today's course, I will explain some of the functions that mt often uses to you:
Set, setProperty: used to assign values. For example:
$ ('A'). set ('value', '2013 ');
$ ('A'). setProperty ('class', 'abc ');
Get, getProperty: used for value. For example:
$ ('A'). get ('value ');
$ ('A'). getProperty ('class ');
HasClass, addClass, removeClass, toggleClass: // determines whether a style exists, adds a style, removes the style, and exchanges the style. See the example.
Alert ($ ('A'). hasClass ('abc '));
$ ('A'). addClass ('abc ');
$ ('A'). removeClass ('abc ');
$ ('A'). toggleClass :( 'bc ');
SetStyle, getStyle: // set or obtain the css style. For example
$ ('A'). setStyle ('display', 'None ');
Alert ($ ('A'). getStyle :( 'display '));
GetSize: // get the width and height. See the example.
Var size = $ ('A'). getSize ();
Alert (size. x + '|' + size. y );
GetPosition, setPosition: // return or set the offset value. See the example.
$ ('A'). getPosition (); // returns {x: 100, y: 500 };
$ ('A'). setPosition ({x: 10, y: 100 });
Destroy: // Delete the element itself and all sub-nodes, and then clear the memory.
$ ('Div '). destroy ();
Store, retrieve: // store or read values to the element storage area (similar to the data of jq)
$ ('A'). store ('someproperties', someValue );
$ ('A'). retrieve ('someproperties'); // returns someValue
Inject: // insert to the specified position of the element
_ Cut: function (el) {// before cutting and pasting the Element into all the content inside el, parent and child
Return this. inject ($ (el), 'top'); // $ ('t1'). _ cut ($ ('t3 '));
},
Cut _: function (el) {// cut and paste the Element into all the content in el. Then, the Parent and Child
Return this. inject ($ (el); // $ ('t1'). cut _ ($ ('t3 '));
},
_ Move: function (el) {// before translating el to Element, brother
Return el. inject (this, 'before'); // $ ('t1'). _ move ($ ('t3 '));
},
Move _: function (el) {// after translating el to Element, brother
Return el. inject (this, 'after'); // $ ('t1'). _ move ($ ('t3 '));
},
_ Xmove: function (el) {// before translating the Element to el, brother
Return this. inject ($ (el), 'before'); // $ ('t1'). _ xmove ($ ('t3 '));
},
Xmove _: function (el) {// After the Element is translated to el, brother
Return this. inject ($ (el), 'after'); // $ ('t1'). xmove _ ($ ('t3 '));
},
Adopt: // insert a child element into the element
Example:
Var myFirstElement = new Element ('div # first ');
Var mySecondElement = new Element ('P # second ');
Var myThirdElement = new Element ('ul # third ');
Var myFourthElement = new Element ('a # fourth ');
Var myParentElement = new Element ('div # parent ');
MyFirstElement. adopt (mySecondElement );
MySecondElement. adopt ('third', myFourthElement );
MyParent3.adopt ([myFirstElement, new Element ('font # another ')]);
Result:
<Div id = "parent">
<P id = "second">
<Ul id = "third"> </ul>
<A id = "fourth"> </a>
</P>
<Font id = "another"> </font>
</Div>
TypeOf: // return type
Type returned:
'Element'-(string) Single Node
'Elements'-(string) multiple nodes
'Textnode'-(string) text node
'Whitspace'-(string) If object is a DOM whitespace node.
'Arguments'-(string) If object is an arguments object.
'Array'-(string) If object is an array.
'Object'-(string) If object is an object.
'String'-(string) If object is a string.
'Number'-(string) If object is a number.
'Date'-(string) If object is a date.
'Boolean'-(string) If object is a boolean.
'Function'-(string) If object is a function.
'Regexp'-(string) If object is a regular expression.
'Class'-(string) If object is a class (created with new Class or the extend of another Class ).
'Collect'-(string) If object is a native HTML elements collection, such as childNodes or getElementsByTagName.
'Window'-(string) If object is the window object.
'Document'-(string) If object is the document object.
'Domevent'-(string) If object is an event.
'Null'-(string) If object is undefined, null, NaN or none of the above.
Example:
Var myString = 'hello ';
Alert (typeOf (myString ));
Attempt: // similar to try
Function. attempt (
Function (){
Alert ('A ');
},
Function (){
Alert ('B ');
},
Function (){
Alert ('C ');
}
);
Delay: // delayed execution
Function LoadCook (){
ClearTimeout (timer );
Alert ('A ');
} Var timer = LoadCook. delay (2000 );
Trim: // remove spaces at both ends
Alert ('Ah'. trim ());
ToInt, toFloat: // convert to integer, convert to decimal
'4em '. toInt (); // returns 4
'10px '. toInt (); // returns 10
'95. 25% '. toFloat (); // returns 95.25
'10. 848 '. toFloat (); // returns 10.848
ToLowerCase, toUpperCase: // convert to lowercase, convert to uppercase
'Afd'. toLowerCase ();
'Ffdsa '. toUpperCase ();
Extension:
The functions I mentioned above are the most commonly used in our daily development. Of course, there are many functions in mt, if you are interested, you can take a look at the material file that I provided for you in the first lesson. It also lists some other uncommon functions.
(Source: http://see7di.cnblogs.com)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
