To do things well, you must first make good use of them. Well, because our time is short and we only have six days, then we will learn Mt in a hard-to-remember manner in six days, therefore, we need to learn from the Editplus material bar to help us remember it. When we need any function, we just need to find it from the material and double-click it.
The Editplus material can be configured by ourselves. The following file is the Mt1.4 Material file that I have configured. You can download it directly, put this file under the Editplus material folder.
Click to download: Mootools1.4.zip
View my operation Animation:
After watching the animation, I believe that it is no longer a problem for you to configure the editplus clip. I edited this clip file. If you feel any errors or omissions, you can use editplus to modify the file by yourself. It is best to re-enable editplus after the modification is saved.
In this material file, I put Mt1.4's core methods into it. In addition, I simply put several plug-ins for usage. The content of this material is what we need to learn next.
Dom selector:
The selector of Mt can basically be understood as two types: This is different from jq (jq is $ hitting the World). The two types are:
$: Id selector (only available for id selection ).
$: Mixed selector (the same as the $ of jq ).
Let's take a look at the id selector. In mt, both $ and document. id can select Nodes Based on id. Usually $ is the most commonly used node. Let's look at an example:
<div id='a'></div>
$('a')...
Note: # is not required for this usage.
$ Is the same as the $ of jq and can be used in combination, but I usually seldom use this option. Although it is very powerful, it is not efficient compared with the id selector, of course, Mt can replace it. Don't worry. Let's talk about it later. Let's look at the $ example first:
<Div id = 'A' class = 'a1'> </div>
<Div id = 'B'> <B> a </B> </div>
<Div id = 'C'> </div>$ ('# A')... // select according to id. # is required.
$ ('. A1')... // select according to class
$ ('Div. a1')... // double condition
$ ('# B B')... // select <B> a </B>
$ ('# A, # B, # C')... // select multiple
... For more information, see the selector section in the clip file.
Friends who have used jq should know that if the $ selector in jq is too complex to write, the efficiency is very low. Similarly, the $ of Mt is similar to the $ of jq, is there any way to improve the efficiency of $? Of course, there are:
GetElement: matches a lower-level node from the upper-level node.
GetElements: Match multiple subordinate nodes from the parent node (similar to the jq find)
GetElementById: matches a lower-level node according to its id.
... For more information, see the selector section in the clip file.
Well, let me give you a few simple examples to explain how he replaced $.
$ (Document. body). getElement ('div '); // search for the first div on the current page
$ ('A'). getElements ('div '); // search for all the divs in the container id = 'A'
$ ('A'). getElementById ('B'); // search for the node with id = 'B' in the container with id = 'A'
... There are more ways to see the selector section in the clip file.
This Iterative Matching Method is more efficient than complex css selector statements. therefore, if you care about efficiency, we recommend that you use $ and iterative search methods as little as possible. However, if you are used to jq and don't care about efficiency, then you can simply use $. $ and jq $ are used exactly the same.
$ Some complex matching methods are available in the material file. You can check if you can't remember them, as long as you know which matches and which cannot match, in the actual application, double-click the clip to add it.
Complete example:
<! 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">
<Title> http://hi.baidu.com/see7di/home </title>
<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>
</P>
<Script type = 'text/javascript '>
Alert ($ ('A'). get ('html '));
Alert ($ ('. A'). get ('tag '));
Alert ($ ('h2. A'). get ('text '));
$('H2. A'). set ('text', 'reset the content! ');
Alert ($ ('h2. A'). get ('text '));Alert ($ ('. B'). get ('href ') +' \ n' + $ ('. B'). getProperty ('href '));
$ ('. B'). setProperty ('href ','#')
Alert ($ ('. B'). get ('href ') +' \ n' + $ ('. B'). getProperty ('href '));Console. log ('The output value of this content is Firebug console! ');
</Script>
</Body>
</Html>
Below is an article I found about css selector, which is very helpful for us to learn selector.
1 .*
* {Margin: 0; padding: 0 ;}
The star selector takes effect on each element on the page. Web Designers often use it to set the margin and padding of all elements on the page to 0.
* The selector can also be used in the child selector.
# Container * {border: 1px solid black ;}
The code above applies to all sub-elements whose id is the container element.
Unless necessary, I do not recommend using the star selector on the page because it has a large scope and consumes browser resources.
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
2. # X
# Container {width: 960px; margin: auto ;}
The well number scope has the corresponding id element. Id is one of our most commonly used css selectors. The advantage of the id selector is precision and high priority (the priority base is 100, much higher than the 10 of the class). As the best choice for javascript script hooks, the disadvantage is that the priority is too high, poor reusability, so before using the id selector, we 'd better ask ourselves, is it true that we are not using the id selector?
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
3. X
. Error {color: red ;}
This is a class selector. The difference between the class selector and the id selector is that the class selector can act on a group of elements in the expected style.
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
4. X Y
Li a {text-decoration: none ;}
This is also our most common selector-descendant selector. It is used to select sub-element Y under Element X. Note that this method selects all matched sub-elements and ignores the hierarchy. In some cases, this method is not suitable, for example, the above Code removes the underlines of all a under li, but there is a ul in li, and I do not want to remove the underscores OF a under ul. When using this descendant selector, consider whether you want a style to work for all child elements. This type of descendant selector also plays a role in creating namespaces. For example, the scope of the above Code style is obviously li.
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
5.x
A {color: red ;}
Ul {margin-left: 0 ;}
Tag selector. Use the tag selector to apply to all corresponding tags in the scope. The priority is only higher.
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
6. X: visited and X: link
A: link {color: red ;}
A: visted {color: purple ;}
Use: the link pseudo class to act on the link tag that has not been clicked. : The hover pseudo class acts on the clicked link.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
7. X + Y
Ul + p {color: red ;}
The adjacent selector matches the first p after ul and sets the text color in the paragraph to red. (Match only the first element)
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
8. X> Y
Div # container> ul {border: 1px solid black ;}
<Div id = "container">
<Ul>
<Li> List Item
<Ul>
<Li> Child </li>
</Ul>
</Li>
<Li> List Item </li>
<Li> List Item </li>
<Li> List Item </li>
</Ul>
</Div>
Child selector. Unlike the child selector x y, the Child selector only works for the direct child level Y under X. In the preceding css and html examples, div # container> ul only takes effect for ul of the last level in container. In theory, X> Y is a recommended selector. Unfortunately, IE6 does not support it.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
9. X ~ Y
Ul ~ P {color: red ;}
Adjacent selector. Different from the preceding X + Y, X ~ Y matches all yelements at the same level as X, while X + Y matches only the first element.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
10. X [title]
A [title] {color: green ;}
Attribute selector. For example, the above code matches the link element with the title attribute.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
11. X [title = "foo"]
A [href = "http://blog.moocss.com"] {color: #1f6053 ;}
Attribute selector. The code above matches all links that have the href property and href is the http://blog.moocss.com.
This function is good, but it has some limitations. What should we do if we want to match all links of href containing css9.net? Look at the next selector.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
12. X [href * = "moocss"]
A [href * = "moocss"] {color: #1f6053 ;}
Attribute selector. As we want, the above code matches all the links in href that contain the "http://blog.moocss.com.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
13. X [href = "http"]
A [href = "http"] {background: url (path/to/external/icon.png) no-repeat; padding-left: 10px ;}
Attribute selector. The above code matches all links starting with http in href.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
14. X [href $ = ". jpg"]
A [href = "http"] {background: url (path/to/external/icon.png) no-repeat; padding-left: 10px ;}
Attribute selector. Use $ in the attribute selector to match the elements ending with a specific string. In the hosts code, all links are connected to the extended .jpg image. (, Here is the .jpg image. If you want to apply it to all the image links, see the next selector .)
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
15. X [data-* = "foo"]
The previous selector mentioned how to match all image links. If you use X [href $ = ". jpg"], you need to do the following:
A [href $ = ". jpg"],
A [href $ = ". jpeg"],
A [href $ = ". png"],
A [href $ = ". gif"] {
Color: red;
}
It seems troublesome. Another solution is to add a specific attribute for all image links, such as 'data-file'
Html code
Image Link
The css code is as follows:
A [data-filetype = "image"] {
Color: red;
}
In this way, the font color of all links to the image is red.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
16. X [foo ~ = "Bar"]
Attribute selector. The Tilde In the attribute selector allows us to match one of multiple values separated by spaces in the attribute values. Take the following example:
Html code
<A href = "path/to/image.jpg" data-info = "external image"> Click Me, Fool </a>
Css code
A [data-info ~ = "External"] {
Color: red;
}
A [data-info ~ = "Image"] {
Border: 1px solid black;
}
In the above example, the font color that matches the "external" link in the data-info property is red. Match the link containing "image" in the data-info property to set a black border.
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
17. X: checked
The checked pseudo class is used to match interface elements in the selected state, such as radio and checkbox.
Input [type = radio]: checked {
Border: 1px solid black;
}
The above code matches all selected single-choice radio and sets a black border of 1px.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
18. X: after and X: before
These two pseudo classes and content are combined to Append content before or after an element. Let's look at a simple example:
H1: after {content: url (/I/logo.gif )}
The above code displays an image after the h1 title.
We often use it to clear the floating, as follows:
. Clearfix: after {
Content: "";
Display: block;
Clear: both;
Visibility: hidden;
Font-size: 0;
Height: 0;
}
. Clearfix {
* Zoom: 1
}
19. X: hover
Div: hover {
Background: # e3e3e3;
}
: Hover pseudo class: Specifies the style of the elements that are outdated when the mouse is clicked. The above Code sets the background color of the div.
Note that in ie 6, hover can only be used for link elements.
Here is an example of using border-bottom to look more elegant than text-decoration when the link is set to be out of date. The Code is as follows:
A: hover {
Border-bottom: 1px solid black;
}
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
20. X: not (selector)
Div: not (# container ){
Color: blue;
}
The negative pseudo-class selector is used to exclude certain elements when matching elements. In the preceding example, the font color of the div element whose id is container is set to blue.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
21. X: pseudo element
: A pseudo object is used to add a style to an element fragment. For example, the first letter of a paragraph or the first line. Note that this: the pseudo object can only be used for block elements.
The following code sets the style of the first letter in the paragraph:
P: first-letter {
Float: left;
Font-size: 2em;
Font-weight: bold;
Font-family: cursive;
Padding-right: 2px;
}
The following code sets the style of the first line in the paragraph:
P: first-line {
Font-weight: bold;
Font-size: 1.2em;
}
Compatible browsers: IE6 +, Firefox, Chrome, Safari, and Opera
(IE6 is actually supported. Some surprises .)
22. X: nth-child (n)
Li: nth-child (3 ){
Color: red;
}
This pseudo class is used to set the style of the nth element (starting from 1) in a sequence element (such as li and tr. In the above example, set the font color of the third list element li to red.
Let's take a look at a more flexible usage. In the following example, we can set the style of the nth and even elements, which can be used to implement line-by-line color change:
Tr: nth-child (2n ){
Background-color: gray;
}
Compatible browsers: IE9 +, Firefox, Chrome, and Safari
23. X: nth-last-child (n)
Li: nth-last-child (2 ){
Color: red;
}
Similar to the X: nth-child (n) function, the difference is that it starts from the last element of a sequence. In the above example, set the font color of the last and second list elements.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
24. X: nth-of-type (n)
Ul: nth-of-type (3 ){
Border: 1px solid black;
}
Similar to the X: nth-child (n) function, the difference is that it matches not a sequence element, but an element type. For example, the code above sets the third unordered list ul border on the page.
Compatible browsers: IE9 +, Firefox, Chrome, and Safari
25. X: nth-last-of-type (n)
Ul: nth-last-of-type (3 ){
Border: 1px solid black;
}
Similar to the X: nth-of-type (n) function, the difference is that it starts from the last appearance of an element. In the preceding example, the last and third unordered list borders are set.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
26. X: first-child
: The first-child pseudo class is used to match the first element of a sequence. We often use it to implement the top or bottom border of the first or last element of a sequence, such:
Ul: nth-last-of-type (3 ){
Border: 1px solid black;
}
Compatible browsers: IE7 +, Firefox, Chrome, Safari, and Opera
27. X: last-child
Ul> li: last-child {
Border-bottom: none;
}
Similar to: first-child, it matches the last element in the sequence.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
28. X: only-child
Div p: only-child {
Color: red;
}
This pseudo class is rarely used. In the above example, there is only one p under the div, that is, if there are multiple p in the div, it will not match.
<Div> <p> My paragraph here. </p> </div>
<Div>
<P> Two paragraphs total. </p>
<P> Two paragraphs total. </p>
</Div>
In the above Code, the Section p in the first div will be matched, while the Section p in the second div will not.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
29. X: only-of-type
Li: only-of-type {
Font-weight: bold;
}
This pseudo-class matches that there is only one sub-element under its parent container, and it has no neighbor element. For example, the above code matches the list elements with only one list item.
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera
30. X: first-of-type
: First-of-type: the pseudo-class has the same effect as nth-of-type (1), and matches the first element. Let's look at an example:
<Div>
<P> My paragraph here. </p>
<Ul>
<Li> List Item 1 </li>
<Li> List Item 2 </li>
</Ul>
<Ul>
<Li> List Item 3 </li>
<Li> List Item 4 </li>
</Ul>
</Div>
In the preceding html code, what should we do if we want to match only the List items in List Item 2:
Solution 1:
Ul: first-of-type> li: nth-child (2 ){
Font-weight: bold;
}
P + ul li: last-child {
Font-weight: bold;
}
Solution 3:
Ul: first-of-type li: nth-last-child (1 ){
Font-weight: bold;
}
Compatible browsers: IE9 +, Firefox, Chrome, Safari, and Opera.
Summary:
If you are using an earlier version of Web browser, such as IE 6, be sure to check whether it is compatible when using the css selector above. However, this should not be a reason to prevent us from learning to use it. During the design, you can refer to the browser compatibility list, or use scripts to make earlier browsers support them.
(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
