一周學會Mootools 1.4中文教程:(1)Dom選取器

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

利器:
　　君欲善其事須先利其器,好吧因為我們的時間比較緊迫,只有六天而已,那麼六天的時間用死記硬背的方式學會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。

總結：
如果你正在使用老版本的瀏覽器，如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寫了一個隨著滑鼠移動而背景圖也跟著移動的東西

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

一周學會Mootools 1.4中文教程:(1)Dom選取器

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support