利器:
君欲善其事须先利其器,好吧因为我们的工夫比紧急,只有六天而已,那么六龙之日子所以死记硬背的法门学会Mt犹如天方夜谭,因此我们得借鉴一下Editplus的素材栏帮我们记忆就是好了,当我们用因此到什么函数的时光一直由材料里寻一下双击就执行了.
Editplus的素材是许我们协调进行部署的,下边的文书是自家早已配备好的Mt1.4底资料文件,大家可以一直下载,然后以之文件放入Editplus的材料文件夹底下就行了.
Mootools1.4.zip
关押自己之操作动画:
扣押罢动画之后相信大家温馨安排editplus的素材就没关系问题了咔嚓,这个材料文件是本身修的,如果大家感觉到出啊错或漏之处,可以友善以editplus修改一下夫文件即可,修改了保存之后最好好更被一下editplus这个软件.
在这材料文件里自己将Mt1.4之中坚措施还放进去了,另外简单放了几乎单插件的用法,这个材料的情节即为咱对接下去需要上的内容.
Dom选择器:
Mt的选择器基本可以解也简单好像:这或多或少以及jq不同(jq是$打天下),这片像样分别是:
$:id选择器(只能针对id选择).
$$:混合选择器(和jq的$是一模一样的).
咱先押一下id选择器,在mt里$和document.id都能够因id选择节点,通常$是无限常用之.我们来拘禁个例子:
<div id='a'></div>
$('a')...
瞩目:这种用法不欲因此#号.
$$和jq的$是同等的,可以混合选择,但是平常自己十分少在就此者,虽然它们效益十分强,但是和id选择器比起来实在算不达标快速,当然了Mt有办法取代她,别着急我们一会重新张嘴,我们先行看$$的例子:
<div id='a' class='a1'></div>
<div id='b'><b>a</b></div>
<div id='c'></div>
$$('#a')...//根据id选择,需要#号
$$('.a1')...//根据class选择
$$('div.a1')...//双重条件
$$('#b b')...//选择<b>a</b>
$$('#a,#b,#c')...//选择多个
…..更多要看资料文件内的selector部分
故而过jq的恋人应明白,在jq内$选择器如果写的无比复杂,那么效率是雅没有之,同样,Mt的$$和jq的$神似,那么我们来无来艺术来改善$$的频率为,当然是部分,看下面:
getElement:从上级节点开始匹配一个下级节点
getElements:从上级节点开始匹配多个下级节点(类似jq的find)
getElementById:从上级节点根据id开始匹配一个下级节点
…..更多要看资料文件内之selector部分
好了,那我简单举几独例子让大家阐述一下客是什么样取代$$的.
$(document.body).getElement('div');//在当前页面内找寻第一个div
$('a').getElements('div');//在id='a'的容器里找寻所有的div
$('a').getElementById('b');//在id='a'的容器里找寻id='b'的节点
….还有更多的方式,大家可看材料文件内之selector部分
这种迭代匹配的主意于复杂的css选择器语句的频率要高.所以如果大家非常以乎效率,那么自己建议大多使用$和迭代找寻计,尽量少用$$,但是要你已经习以为常了jq的计且不在乎效率,那么你虽一直用$$就实施了.$$和jq的$用法是完全相同的.
$$一些比较复杂的配合方式于材料文件里还发出,大家可看,如果记不住也未尝涉及,只要知道哪些能匹配哪些不可知配合,在事实上应用被直接双击素材添加就实行了.
完全的范例:
<!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</h2>
<p>
<a class='b' title="T1" href="http://www.digitalia.be.jpg"><img src="img/map1.png"></a>
<a class='c' title="B1" href="http://www.digitalia.be.jpg"><img src="img/map2.png"></a>
</p>
<script type='text/javascript'>
alert($('a').get('html'));
alert($$('.a').get('tag'));
alert($$('h2.a').get('text'));
$$('h2.a').set('text','重新设置一下内容!');
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('此内容输出值Firebug的控制台!');
</script>
</body>
</html>
下是自己摸来的一致首关于css选择器的章,对咱们上选择器很有辅助。
1. *
* {margin: 0; padding: 0;}
星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。
*选择符也可以在子选择器中使用。
#container * { border: 1px solid black;}
上面的代码中会应用于id为container元素的所有子元素中。
除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container {width: 960px;margin: auto; }
井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error {color: red;}
这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a { text-decoration: none;}
这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
5. X
a { color: red; }
ul { margin-left: 0; }
标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
6. X:visited和X:link
a:link { color: red; }
a:visted { color: purple; }
使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
7. X+Y
ul + p {color: red;}
相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素)
兼容浏览器：IE7+、Firefox、Chrome、Safari、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>
子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
9. X ~ Y
ul ~ p { color: red;}
相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
10. X[title]
a[title] { color: green;}
属性选择器。比如上述代码匹配的是带有title属性的链接元素。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
a[href="http://blog.moocss.com"] { color: #1f6053; }
属性选择器。 上面的代码匹配所有拥有href属性，且href为http://blog.moocss.com的所有链接。
这个功能很好，但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢？看下一个选择器。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
12. X[href*="moocss"]
a[href*="moocss"] {color: #1f6053;}
属性选择器。正如我们想要的，上面代码匹配的是href中包含”http://blog.moocss.com“的所有链接。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
13. X[href="http"]
a[href="http"] {background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}
属性选择器。上面代码匹配的是href中所有以http开头的链接。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
14. X[href$=".jpg"]
a[href="http"] { background: url(path/to/external/icon.png) no-repeat;padding-left: 10px;}
属性选择器。在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
15. X[data-*="foo"]
在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现，需要这样做：
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’
html代码
图片链接
css代码如下：
a[data-filetype="image"] {
color: red;
}
这样所有链接到图片的链接字体颜色为红色。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
16. X[foo~="bar"]
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：
html代码
<a href=”path/to/image.jpg” data-info=”external image”> Click Me, Fool </a>
css代码
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}
上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动，写法如下：
.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伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。
需要注意的是，在ie 6中，:hover只能用于链接元素。
这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：
a:hover {
border-bottom: 1px solid black;
}
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container) {
color: blue;
}
否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中，设定除了id为container的div元素字体颜色为blue。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
::伪对象用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是，这个::伪对象只能用于块状元素。
下面的代码设定了段落中第一个字母的样式：
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
下面的代码中设定了段落中第一行的样式：
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
（IE6竟然支持，有些意外啊。）
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
这个伪类用于设定一个序列元素（比如li、tr）中的第n个元素（从1开始算起）的样式。在上面例子中，设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：
tr:nth-child(2n) {
background-color: gray;
}
兼容浏览器：IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}
与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) {
border: 1px solid black;
}
与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上（下）边框，如：
ul:nth-last-of-type(3) {
border: 1px solid black;
}
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child {
border-bottom:none;
}
与:first-child类似，它匹配的是序列中的最后一个元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {
color: red;
}
这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
<div><p> My paragraph here. </p></div>
<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>
在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}
这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：
<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>
在上面的html代码中，如果我们希望仅匹配List Item 2列表项该如何做呢：
方案一：
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
p + ul li:last-child {
font-weight: bold;
}
方案三：
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。
总结：
如果您正使老版本的浏览器，如IE
6，在利用方面css选择器时一定要注意它是不是匹配。不过，这不应成阻挡我们读运用其的说辞。在筹划时，你可以参见浏览器兼容性列表，也堪经脚本手段于老版的浏览器为支持她。
相关课程:
如出一辙完善学会Mootools
1.4华语课:序论
相同圆满学会Mootools
1.4国语课:(1)Dom选择器
同样全面学会Mootools
1.4汉语课:(2)函数
一样周学会Mootools
1.4国语课:(3)事件
一致圆学会Mootools
1.4华语课:(4)类型
平等两全学会Mootools
1.4中文课:(5)Ajax
一如既往完善学会Mootools
1.4华语课:(6)动画
无异于圆满学会Mootools
1.4国语课:(7)汇总了
另关于Mootools 1.4的文章:
本人形容的Lightbox效果插件，基于MooTools
1.4
自形容的万年历插件(含天干地支,农历,阳历,节气,各种节齐)，基于MooTools
1.4
本身形容的近乎本站首页左上角的食谱的法力插件，基于MooTools
1.4
Mootools中delay这个延迟函数的高档用法
Mootools中采用bind给函数绑定对象
Mootools中使用extend和implement给您的函数扩展功能要艺术
自己写单扩大把Mootools的语法改之以及Jquery的语法一模一样
Mootools1.4中从定义事件
据此Mootools1.4写了一个乘机鼠标移动如果背景图为随着移动的物