`
pengjun1128
  • 浏览: 16660 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

一周学会Mootools 1.4中文教程:(1)Dom选择器

阅读更多
利器:
  君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会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/images/25.jpg"><img src="img/map1.png"></a>
    <a class='c' title="B1" href="http://www.digitalia.be/images/24.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。


原文地址:http://www.cnblogs.com/see7di/archive/2011/11/12/2246090.html
分享到:
评论

相关推荐

    一周学会Mootools 1.4中文教程(1)Dom选择器

    ### Mootools 1.4中文教程:Dom选择器详解 #### 一、前言 在Web开发领域,JavaScript框架的出现极大地简化了前端开发工作。Mootools作为一款轻量级、强大的JavaScript库,提供了丰富的功能来帮助开发者快速构建...

    一周学会Mootools 1.4中文教程(7)汇总收尾

    《一周学会Mootools 1.4中文教程(7)汇总收尾》一文作为系列教程的最终篇章,不仅标志着为期一周的学习旅程圆满结束,更深入探讨了Mootools框架中的核心概念——Class的运用与插件开发。本文将详细解析Class在...

    一周学会Mootools 1.4中文教程(6)动画

    《一周学会Mootools 1.4中文教程(6):深入解析动画功能》 Mootools是一款功能强大且灵活性极高的JavaScript库,它提供了一系列的工具和框架,帮助开发者快速构建动态网页应用。在Mootools 1.4版本中,动画功能尤其...

    一周学会Mootools 1.4中文教程(3)事件

    Mootools,一个功能强大且灵活的JavaScript库,提供了丰富的DOM操作、事件处理、动画效果等功能,深受前端开发者的喜爱。本文将深入解析Mootools 1.4版本中的事件处理机制,特别是事件的绑定、移除与触发。 #### 一...

    一周学会Mootools 1.4中文教程(4)类型

    《一周学会Mootools 1.4中文教程(4)类型》是针对Mootools框架的一系列教程之一,旨在帮助初学者快速掌握Mootools中不同类型数据的处理方法。Mootools是一种流行的JavaScript库,它简化了Web开发过程,使开发者能够更...

    一周学会Mootools 1.4中文教程序章

    《一周学会Mootools 1.4中文教程》是一篇旨在帮助初学者快速掌握Mootools 1.4版本的中文教程。Mootools是一种功能强大且轻量级的JavaScript库,专门设计用于简化Web中交互式JavaScript的开发工作。在某种程度上,...

    一周学会Mootools 1.4中文教程(2)函数

    标题与描述中的“一周学会Mootools 1.4中文教程(2)函数”强调了本教程旨在帮助读者快速掌握Mootools框架中函数的使用方法。Mootools是一款流行的JavaScript库,它提供了丰富的功能来简化网页开发过程,尤其是在DOM...

    一周学会Mootools 1.4中文教程(5)Ajax

    ### Mootools 1.4 中文教程:深入理解 Ajax #### 一、引言 在Web开发领域,Ajax(Asynchronous JavaScript and XML)技术因其能够实现网页与服务器的异步交互而广受开发者欢迎。它让网页无需重新加载整个页面即可...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    - **选择器引擎**:类似于jQuery的选择器API,MooTools允许开发者通过CSS选择器快速获取DOM元素集合。 2. **MooTools Core 1.5.1** - **核心模块**:MooTools-Core是MooTools的基础部分,包含了最核心的功能,如...

    mootools1.4

    ### Mootools 1.4 核心概念与方法详解 #### 1. Core 核心功能 Mootools 的核心部分提供了基本的功能和工具,这些功能和工具为整个库奠定了基础。 - **typeOf**: 此方法用于确定传入的对象的类型。它会根据...

    mootools详细教程chm

    这个GIF文件可能是关于MooTools DOM操作的可视化教程,展示了一些基本的DOM操作过程,如元素选择、添加和删除等,对于初学者来说,动态图示通常比文字描述更容易理解。 4. **mootools1.4中文手册.pdf** 这份PDF...

    mootools 1.2 中文教程

    **MooTools 1.2 中文教程** MooTools 是一个高级、模块化、轻量级的JavaScript库,它提供了丰富的工具集,用于构建高效、可维护的Web应用程序。MooTools 1.2 版本是其一个重要版本,为开发者提供了许多改进和新特性...

    Mootools 1.2教程(2) DOM选择器

    如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。 今天开始本系列教程的第2讲。在这一讲中,我们会学习几种选择...

    mootools入门教程1

    MooTools 1.2 入门教程 MooTools 1.2 是一个强大的轻量级的 JavaScript 库,专门为减轻 Web 中交互性 JavaScript 开发。它可以让开发者轻松地实现 Web 交互效果,例如, morph(变形)和 tween(补间动画)等动画...

    mootools框架入门教程

    $$方法是mootools框架中一个功能强大的方法,它可以通过CSS选择器语法来获取DOM元素。例如: `$$('a'); //获取页面上所有超链接标签对象` `$$('a','b'); //获取页面上所有超链接标签和粗体标签` `$$('#my_div'); //...

    mootools颜色选择器

    在这个特定的项目中,我们关注的是"MooTools颜色选择器",一个专为Firefox浏览器设计的组件,兼容MooTools 1.2及以上版本。颜色选择器是网页交互设计中常见的一种元素,允许用户在多种颜色中选取所需的颜色,广泛...

    mootools-中文教程

    ### Mootools中文教程知识点概览 #### 一、起步篇 Mootools是一个轻量级且功能强大的JavaScript库,其设计目标是为了简化浏览器端的编程。与Prototype类似,Mootools同样支持面向对象的编程方式,但在某些方面更加...

    Mootools 1.2 中文版 教程

    3. **选择器引擎**:类似于jQuery的 `$` 函数,Mootools提供了一个强大的选择器引擎,可以快速选取DOM元素,支持CSS1至CSS3的选择器。 二、主要特性 1. **Element对象**:Mootools将每个DOM元素封装为一个Element...

    Mootools 双区间节点的滑块选择器.zip

    "Mootools 双区间节点的滑块选择器"是一个基于JavaScript库Mootools开发的交互组件,主要用于网页上的数值选择。这个组件允许用户通过两个滑块来定义一个数值范围,适用于如价格区间筛选、时间范围设定等场景。下面...

Global site tag (gtag.js) - Google Analytics