學習zepto.js(對象方法)[5]

時間 2019-11-18

標籤學習 zepto.js zepto 對象方法欄目 JavaScript 简体版

原文原文鏈接

繼續說.javascript

clone:

該方法不接收任何參數,會返回對象中的全部元素集合,但不會對象綁定的事件.css

var $temp = $("div").clone(); //並不接收任何參數.

方法的實現就是循環調用方法對象.而後將全部的dom元素克隆並返回html

並且使用的深度克隆,就是說,會將節點下方的子節點通通克隆過來.java

closest:

方法接收1-2個參數,第一個爲selector(選擇器),第二個爲context(上下文);node

方法會從調用節點開始,逐級向上匹配.dom

若是隻傳入selector,則會返回第一個匹配的元素.如同時傳入了context,則只會尋找context的子節點.函數

(通俗來講就是若是能被匹配的元素不屬於context,那麼將會直接返回false)spa

selector參數也能夠傳入一個zepto對象.或一個dom集合.3d

而返回的元素則會屬於傳入的selector對象中的一個.code

context的有效值爲一個dom元素.

注意:返回值是與調用對象中的第一個元素有關的.因此說返回值也只會是包含一個節點元素的zepto對象或是一個空對象[沒有找到匹配的元素])

<!DOCTYPE html>
<html>
    <head>
        <title>hello world</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/zepto.js"></script>
        <style type="text/css">
            body * {
                color: #000;
            }
        </style>
    </head>
    <body>
        <ul id="one" class="level-1">
            <li class="item-i">I</li>
            <li id="ii" class="item-ii">II
                <ul class="level-2">
                    <li class="item-a">A</li>
                    <li class="item-b">B
                        <ul class="level-3">
                            <li class="item-1">1</li>
                            <li class="item-2">2</li>
                            <li class="item-3">3</li>
                        </ul>
                    </li>
                    <li class="item-c">C</li>
                </ul>
            </li>
            <li class="item-iii">III</li>
        </ul>
        <script type="text/javascript">
            $(".level-3").closest(".item-b").css("color", "red");                            //匹配距離對象最近的.item-b元素
            $(".level-3").closest(".item-ii").css("color", "blue");                          //匹配距離對象最近的.item-ii元素
            $(".level-3").closest("#one", $("#ii")[0]).css("background-color", "green");     //匹配距離對象最近的#one元素,而且匹配元素必須屬於#ii元素內部
            $(".level-3").closest($("ul")).css("background-color", "yellow");                //匹配距離對象最近的屬於$("ul")中其中一個的元素
        </script>
    </body>
</html>

方法首先取出當前dom對象做爲基點並賦值給node.collection默認的爲false.若是傳入的selector參數爲一個object,則認爲選擇器是一個zepto對象,或者是一個dom對象(集合),並將轉換爲zepto對象的值賦給collection;

下邊是循環,循環判斷的條件爲node存在,而且collection中不存在node(selector爲object的狀況下)或者node不匹配selector選擇器(selector爲string的狀況下)

循環內部,若是node不等於context(上下文)而且node不爲document對象,就將node的父節點賦值給node(直到node知足匹配條件或者循環值文檔對象).不然直接賦值false,而後循環終止,返回false;

最終返回一個zepto對象,空的或者包含一個元素的zepto對象;

empty:

用來清空zepto對象的全部innerHTML值（dom內容，至關於移除全部子節點）。

$("#temp").empty(); //該方法將清除#temp的innerHTML

代碼也只是簡單的遍歷並給innerHTML賦值而已。

題外話：map方法與each方法的區別。二者回調函數的參數，是同樣的。二者的區別在於結束循環的方式。each返回false結束循環，而map （我還真沒發現返回null或undefined能中止它）；

eq:

經過index來取出一個對象，若是爲-1，則取出最後一個。

與get方法的區別是，get返回一個dom對象，eq返回一個zepto對象。

$("#test").eq(0);
$($("#test").get(0));
$($("#test").[0]);
//此三條效果同樣。

find:

find方法經過傳入的一個參數來篩選出zepto對象符合條件的子節點集合並返回。

$('#myform').find('input, select');
$('input, select', $('#myform'));
//這兩條的結果是同樣的。

首先判斷是否傳入選擇器，若是沒有則直接返回一個空的zepto對象；

若是選擇器爲一個對象，則將對象轉換爲zepto對象，而後經過filter篩選出一些匹配的節點，並存入result集合；

若是調用find方法的對象爲一個單一的對象，則直接用過qsa方法（前幾篇說過qsa方法），將選擇器做爲一個選擇器，並將對象做爲上下文傳入；

不然循環zepto對象重複上邊那一條；

（find方法可能說的不太細。若是有什麼，還請你們一塊兒交流）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

學習zepto.js(對象方法)[5]

clone:

closest:

contents:

empty:

eq:

find: