淺析鏈式編程與隱式迭代

其中Jq方法遍歷內部dom數組的過程就叫做【隱式迭代】

        今天又接觸了兩個新的概念:鏈式編程和隱式迭代

鏈式編程:

        首先是鏈式編程,簡答的說:鏈式編程可以理解爲對象不停的調用方法。【例如:對象.方法().方法().方法】。也就是說,如果對象調用方法返回值還是當前的這個對象,那麼就可以繼續調用方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            $('#btnShow').click(function () {
                //鏈式編程:只查找一次。支持逐個使用方法,、
                //在JQuery中,一般情況下對象調用的方法,此方法是也就是設置的意思,那麼返回的幾乎都是當前的對象,也就可以繼續鏈式編程了
                $('p').text('都是P').css('color', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="都是P" />
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
</body>
</html>

        在鏈式編程中,有一個end()操作,他的作用也是很重要的,爲了防止一些特殊情況而出現的。因爲有一些方法在使用過程中可能會破環鏈式編程中的返回的對象,導致鏈的斷裂,比如:【next(),nextAll(),prev(),prevAll(),siblings(),無參的:text(),val(),html(】等,當鏈式編程破壞以後可以通過end()方法修復。如下:

        以下是一個鏈式斷裂的情況,通過end()將斷裂的鏈修復。

隱式迭代

        在方法的內部會爲匹配到的所有元素進行循環遍歷,執行相應的方法;而不用我們再進行循環,簡化我們的操作,方便我們調用。如果獲取的是多元素的值,大部分情況下返回的是第一個元素的值。

       以下是隱式迭代例子:通過“$('p').text('都是P');”(偷偷的將所有P元素標籤的text值全部改變了)。但是如果對其進行一些設置的話就會涉及到each()遍歷,接下來對於each()函數在做一個小小的瞭解

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../scripts/jquery-1.7.1.js"></script>
    <script>
        $(function () {
            //將jquery對象轉換成dom對象:通過[下標]的形式返回dom對象
            //通過jquery的選擇器得到的數組,纔是jquery對象,纔可以調用jquery的成員
            //將dom對象轉換成jquery對象:$(dom對象)
            $('#btnShow').click(function () {
                $('p').text('都是P');//隱式迭代
                var temp = [1, 2, 3];
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnShow" value="都是P"/>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
</html>

參考鏈接:關於each()的基本用法和解釋

         剛剛學習理解不到位的請大家補充斧正,如果有幫助,請點贊評論哦!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章