jQuery基礎(chǔ)——?jiǎng)赢?huà)篇

第1章動(dòng)畫(huà)基礎(chǔ)隱藏和顯示

1-1 jQuery中隱藏元素的hide方法

讓頁(yè)面上的元素不可見(jiàn)，一般可以通過(guò)設(shè)置css的display為none屬性。但是通過(guò)css直接修改是靜態(tài)的布局，如果在代碼執(zhí)行的時(shí)候，一般是通過(guò)js控制元素的style屬性，這里jQuery提供了一個(gè)快捷的方法.hide()來(lái)達(dá)到這個(gè)效果

$elem.hide()

提供參數(shù)：

.hide( options )

當(dāng)提供hide方法一個(gè)參數(shù)時(shí)，.hide()就會(huì)成為一個(gè)動(dòng)畫(huà)方法。.hide()方法將會(huì)匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫(huà)操作

快捷參數(shù)：

.hide("fast / slow")

這是一個(gè)動(dòng)畫(huà)設(shè)置的快捷方式，'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)，就是元素會(huì)執(zhí)行200/600毫秒的動(dòng)畫(huà)后再隱藏

注意：

jQuery在做hide操作的時(shí)候，是會(huì)保存本身的元素的原始屬性值，再之后通過(guò)對(duì)應(yīng)的方法還原的時(shí)候還是初始值。比如一個(gè)元素的display屬性值為inline，那么隱藏再顯示時(shí)，這個(gè)元素將再次顯示inline。一旦透明度達(dá)到0，display樣式屬性將被設(shè)置為none，這個(gè)元素將不再在頁(yè)面中影響布局

<body>
    <h2>hide</h2>
    <div class="left">
        <h4>測(cè)試一</h4>
        <div id="a1">hide操作</div>
        <button>直接hide</button>
        <script type="text/javascript">
        //點(diǎn)擊buttom1 直接隱藏
        $("button:first").click(function() {
            $("#a1").hide()
        });
        </script>

        <h4>測(cè)試一</h4>
        <div id="a2">hide動(dòng)畫(huà)操作</div>
        <button>hide帶動(dòng)畫(huà)</button>
        <script type="text/javascript">
        //點(diǎn)擊buttom2 執(zhí)行動(dòng)畫(huà)隱藏
        $("button:last").click(function() {
            $("#a2").hide({
                duration: 3000,
                complete: function() {
                    alert('執(zhí)行3000ms動(dòng)畫(huà)完畢')
                }
            })
        });
        </script>
    </div>
</body>

1-2 jQuery中顯示元素的show方法

css中有display:none屬性，同時(shí)也有display:block，所以jQuery同樣提供了與hide相反的show方法

方法的使用幾乎與hide是一致的，hide是讓元素顯示到隱藏，show則是相反，讓元素從隱藏到顯示

看一段代碼：使用上一致，結(jié)果相反

$('elem').hide(3000).show(3000)

讓元素執(zhí)行3秒的隱藏動(dòng)畫(huà)，然后執(zhí)行3秒的顯示動(dòng)畫(huà)。

show與hide方法是非常常用的，但是一般很少會(huì)基于這2個(gè)屬性執(zhí)行動(dòng)畫(huà)，大多情況下還是直接操作元素的顯示與隱藏為主

注意事項(xiàng)：

1.show與hide方法是修改的display屬性，通過(guò)是visibility屬性布局需要通過(guò)css方法單獨(dú)設(shè)置
2.如果使用!important在你的樣式中，比如display: none !important，如果你希望.show()方法正常工作，必須使用.css('display', 'block !important')重寫(xiě)樣式
3.如果讓show與hide成為一個(gè)動(dòng)畫(huà)，那么默認(rèn)執(zhí)行動(dòng)畫(huà)會(huì)改變?cè)氐母叨龋叨龋该鞫?

1-3 jQuery中顯示與隱藏切換toggle方法

show與hide是一對(duì)互斥的方法。需要對(duì)元素進(jìn)行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對(duì)應(yīng)的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。對(duì)于這樣的操作行為，jQuery提供了一個(gè)便捷方法toggle用于切換顯示或隱藏匹配元素

基本的操作：toggle();

這是最基本的操作，處理元素顯示或者隱藏，因?yàn)椴粠?shù)，所以沒(méi)有動(dòng)畫(huà)。通過(guò)改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒(méi)有動(dòng)畫(huà)。

如果元素是最初顯示，它會(huì)被隱藏
如果隱藏的，它會(huì)顯示出來(lái)

display屬性將被儲(chǔ)存并且需要的時(shí)候可以恢復(fù)。如果一個(gè)元素的display值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline

提供參數(shù)：.toggle( [duration ] [, complete ] )

同樣的提供了時(shí)間、還有動(dòng)畫(huà)結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)發(fā)生顯示/隱藏的改變，在改變的過(guò)程中會(huì)把元素的高、寬、不透明度進(jìn)行一系列動(dòng)畫(huà)效果。這個(gè)元素其實(shí)就是show與hide的方法

直接定位：.toggle(display)

直接提供一個(gè)參數(shù)，指定要改變的元素的最終效果

其實(shí)就是確定是使用show還是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
    
    .left {
        background: #bbffaa;
    }
    
    .right {
        background: yellow;
        display: none;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>通過(guò)toggle切換顯示與隱藏</h2>
    <div class="left">顯示到隱藏</div>
    <div class="right">隱藏到顯示</div>
    <button>直接show-hide動(dòng)畫(huà)</button>
    <button>直接hide-show動(dòng)畫(huà)</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        $(".left").toggle(3000)
    });
    </script>

    <script type="text/javascript">
    $("button:last").click(function() {
        $(".right").toggle(3000)
    });
    </script>
</body>
</html>

第2章上卷下拉效果

2-1 jQuery中下拉動(dòng)畫(huà)slideDown

對(duì)于隱藏的元素，在將其顯示出來(lái)的過(guò)程中，可以對(duì)其進(jìn)行一些變化的動(dòng)畫(huà)效果。之前學(xué)過(guò)了show方法，show方法在顯示的過(guò)程中也可以有動(dòng)畫(huà)，但是.show()方法將會(huì)匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫(huà)操作。這里將要學(xué)習(xí)一個(gè)新的顯示方法slideDown方法

.slideDown()：用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素

.slideDown()方法將給匹配元素的高度的動(dòng)畫(huà)，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去，彌補(bǔ)了顯示的方式

常見(jiàn)的操作，提供一個(gè)動(dòng)畫(huà)是時(shí)間，然后傳遞一個(gè)回調(diào)，用于知道動(dòng)畫(huà)是什么時(shí)候結(jié)束

.slideDown( [duration ] [, complete ] )

持續(xù)時(shí)間（duration）是以毫秒為單位的，數(shù)值越大，動(dòng)畫(huà)越慢，不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400 毫秒的延時(shí)。

具體使用：

$("ele").slideDown(1000, function() {
    //等待動(dòng)畫(huà)執(zhí)行1秒后,執(zhí)行別的動(dòng)作....
});

注意事項(xiàng)：

1.下拉動(dòng)畫(huà)是從無(wú)到有，所以一開(kāi)始元素是需要先隱藏起來(lái)的，可以設(shè)置display:none
2.如 果提供回調(diào)函數(shù)參數(shù)，callback會(huì)在動(dòng)畫(huà)完成的時(shí)候調(diào)用。將不同的動(dòng)畫(huà)串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是 this會(huì)設(shè)成將要執(zhí)行動(dòng)畫(huà)的那個(gè)DOM元素，如果多個(gè)元素一起做動(dòng)畫(huà)效果，那么要非常注意，回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫(huà)后都執(zhí)行一次，而不是這組 動(dòng)畫(huà)整體才執(zhí)行一次

<body>
    <h2>slideDown</h2>
    <div class="left">
        <h4>測(cè)試一</h4>
        <div id="a1">hide-show</div>
        <button>點(diǎn)擊slideDown顯示動(dòng)畫(huà)</button>
    </div>
        <script type="text/javascript">
        //點(diǎn)擊button
        //執(zhí)行3秒隱藏
        //執(zhí)行3秒顯示
        $("button:first").click(function() {
            $("#a1").slideDown(3000)
        });
        </script>
    <div class="right">
        <h4>測(cè)試二</h4>
        <div id="a2">hide-show</div>
        <button>點(diǎn)擊slideDown執(zhí)行回調(diào)</button>
    </div>
        <script type="text/javascript">
        //點(diǎn)擊button
        //執(zhí)行3秒隱藏
        //執(zhí)行3秒顯示
        $("button:last").click(function() {
            $("#a2").slideDown(3000,function(){
                alert('動(dòng)畫(huà)執(zhí)行結(jié)束')
            })
        });
        </script>
</body>

2-2 jQuery中上卷動(dòng)畫(huà)slideUp

對(duì)于顯示的元素，在將其隱藏的過(guò)程中，可以對(duì)其進(jìn)行一些變化的動(dòng)畫(huà)效果。之前學(xué)過(guò)了hide方法，hide方法在顯示的過(guò)程中也可以有動(dòng)畫(huà)，但是.hide()方法將為匹配元素的寬度，高度，以及不透明度，同時(shí)進(jìn)行動(dòng)畫(huà)操作。這里將要學(xué)習(xí)一個(gè)新的顯示方法slideUp方法

最簡(jiǎn)單的使用：不帶參數(shù)

$("elem").slideUp();

這個(gè)使用的含義就是：找到元素的高度，然后采用一個(gè)下滑動(dòng)畫(huà)讓元素一直滑到隱藏，當(dāng)高度為0的時(shí)候，也就是不可見(jiàn)的時(shí)，修改元素display 樣式屬性被設(shè)置為none。這樣就能確保這個(gè)元素不會(huì)影響頁(yè)面布局了

帶參數(shù)：

.slideUp( [duration ] [, easing ] [, complete ] )

同樣可以提供一個(gè)時(shí)間，然后可以使用一種過(guò)渡使用哪種緩動(dòng)函數(shù)，jQuery默認(rèn)就2種，可以通過(guò)下載插件支持。最后一個(gè)動(dòng)畫(huà)結(jié)束的回調(diào)方法。

因?yàn)閯?dòng)畫(huà)是異步的，所以要在動(dòng)畫(huà)之后執(zhí)行某些操作就必須要寫(xiě)到回調(diào)函數(shù)里面，這里要特別注意

<body>
    <h2>slideUp</h2>
    <div class="left">
        <h4>測(cè)試一</h4>
        <div id="a1"></div>
        <button>點(diǎn)擊slideUp隱藏動(dòng)畫(huà)</button>
    </div>
        <script type="text/javascript">
        //點(diǎn)擊button
        //執(zhí)行3秒隱藏
        //執(zhí)行3秒顯示
        $("button:first").click(function() {
            $("#a1").slideUp(3000)
        });
        </script>
    <div class="right">
        <h4>測(cè)試二</h4>
        <div id="a2"></div>
        <button>點(diǎn)擊slideUp執(zhí)行回調(diào)</button>
    </div>
        <script type="text/javascript">
        //點(diǎn)擊button
        //執(zhí)行3秒隱藏
        //執(zhí)行3秒顯示
        $("button:last").click(function() {
            $("#a2").slideUp(3000,function(){
                alert('動(dòng)畫(huà)執(zhí)行結(jié)束')
            })
        });
        </script>
</body>

2-3 jQuery中上卷下拉切換slideToggle

slideDown與slideUp是一對(duì)相反的方法。需要對(duì)元素進(jìn)行上下拉卷效果的切換，jQuery提供了一個(gè)便捷方法slideToggle用滑動(dòng)動(dòng)畫(huà)顯示或隱藏一個(gè)匹配元素

基本的操作：slideToggle();

這是最基本的操作，獲取元素的高度，使這個(gè)元素的高度發(fā)生改變，從而讓元素里的內(nèi)容往下或往上滑。

提供參數(shù)：.slideToggle( [duration ] ,[ complete ] )

同樣的提供了時(shí)間、還有動(dòng)畫(huà)結(jié)束的回調(diào)。在參數(shù)對(duì)應(yīng)的時(shí)間內(nèi)，元素會(huì)完成動(dòng)畫(huà)，然后出發(fā)回調(diào)函數(shù)

同時(shí)也提供了時(shí)間的快速定義，字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)

slideToggle("fast") 
slideToggle("slow")

注意：

1.display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值
2.當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局

<script type="text/javascript">

        $("button").click(function() {
            $("#a1").slideToggle(3000)
        });
        </script>

第3章淡入淡出效果

3-1 jQuery中淡出動(dòng)畫(huà)fadeOut

讓元素在頁(yè)面不可見(jiàn)，常用的辦法就是通過(guò)設(shè)置樣式的display:none。除此之外還可以一些類(lèi)似的辦法可以達(dá)到這個(gè)目的。這里要提一個(gè)透明度的方法，設(shè)置元素透明度為0，可以讓元素不可見(jiàn)，透明度的參數(shù)是0~1之間的值，通過(guò)改變這個(gè)值可以讓元素有一個(gè)透明度的效果。常見(jiàn)的淡入淡出動(dòng)畫(huà)正是這樣的原理。

fadeOut()函數(shù)用于隱藏所有匹配的元素，并帶有淡出的過(guò)渡動(dòng)畫(huà)效果

所謂"淡出"隱藏的，元素是隱藏狀態(tài)不對(duì)作任何改變，元素是可見(jiàn)的，則將其隱藏。

.fadeOut( [duration ], [ complete ] )

通過(guò)不透明度的變化來(lái)實(shí)現(xiàn)所有匹配元素的淡出效果，并在動(dòng)畫(huà)完成后可選地觸發(fā)一個(gè)回調(diào)函數(shù)。這個(gè)動(dòng)畫(huà)只調(diào)整元素的不透明度，也就是說(shuō)所有匹配的元素的高度和寬度不會(huì)發(fā)生變化。

字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。如果提供任何其他字符串，或者這個(gè)duration參數(shù)被省略，那么默認(rèn)使用400毫秒的延時(shí)

<body>
    <h2>fadeOut</h2>
    <p>測(cè)試文字淡入效果</p>
    <p>慕課網(wǎng),專(zhuān)注分享</p>
    淡出的隱藏效果：
    <select id="animation">
        <option value="1">fadeOut( )</option>
        <option value="2">fadeOut( "slow" )</option>
        <option value="3">fadeOut( 3000 )</option>
        <option value="4">fadeOut( 1000, complete )</option>
        <option value="5">fadeOut( 1000, "linear" )</option>
        <option value="6">fadeOut( options )</option>
    </select>
    
    <br><br>
    
    <input id="btnFadeOut" type="button" value="點(diǎn)擊淡出隱藏" />
    <input id="btnShow" type="button" value="顯示" />
    
    <script type="text/javascript">
    //【顯示】按鈕
    $("#btnShow").click(function() {
        $("p").show();
    });

    //【隱藏】按鈕
    $("#btnFadeOut").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeOut();
        } else if (v == "2") {
            $("p").fadeOut("slow");
        } else if (v == "3") {
            $("p").fadeOut(3000);
        } else if (v == "4") {
            $("p").fadeOut(2000, function() {
                alert("隱藏完畢!");
            });
        } else if (v == "5") {
            $("p").fadeOut(1000, "linear");
        } else if (v == "6") {
            $("p").fadeOut({
                duration: 1000
            });
        }
    });
    </script>
</body>

3-2 jQuery中淡入動(dòng)畫(huà)fadeIn

adeOut是淡出效果，相反的還有淡入效果fadeIn,方法使用上兩者都是一致的，只是結(jié)果相反

.fadeIn( [duration ], [ complete ] )

1.duration：指定過(guò)渡動(dòng)畫(huà)運(yùn)行多長(zhǎng)時(shí)間(毫秒數(shù))，默認(rèn)值為400。該參數(shù)也可以為字符串"fast"(=200)或"slow"(=600)。
2.元素顯示完畢后需要執(zhí)行的函數(shù)。函數(shù)內(nèi)的this指向當(dāng)前DOM元素。

fadeIn()函數(shù)用于顯示所有匹配的元素，并帶有淡入的過(guò)渡動(dòng)畫(huà)效果。

注意：

淡入的動(dòng)畫(huà)原理：操作元素的不透明度從0%逐漸增加到100%
如果元素本身是可見(jiàn)的，不對(duì)其作任何改變。如果元素是隱藏的，則使其可見(jiàn)

<body>
    <h2>fadeIn</h2>
    <p>測(cè)試文字淡出效果</p>
    <p>慕課網(wǎng),專(zhuān)注分享</p>
    選擇：淡出的隱藏效果
    </br>
    </br>
    <select id="animation">
        <option value="1">fadeIn( )</option>
        <option value="2">fadeIn( "slow" )</option>
        <option value="3">fadeIn( 3000 )</option>
        <option value="4">fadeIn( 2000, complete )</option>
        <option value="5">fadeIn( 1000, "linear" )</option>
        <option value="6">fadeIn( options )</option>
    </select>
    </br></br>
    <input id="btnFadeIn" type="button" value="執(zhí)行淡出效果" />
    <input id="btnHide" type="button" value="點(diǎn)擊隱藏" />
    <script type="text/javascript">
    //【顯示】按鈕
    $("#btnFadeIn").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeIn();
        } else if (v == "2") {
            $("p").fadeIn("slow");
        } else if (v == "3") {
            $("p").fadeIn(3000);
        } else if (v == "4") {
            $("p").fadeIn(2000, function() {
                alert("顯示完畢!");
            });
        } else if (v == "5") {
            $("p").fadeIn(1000, "linear");
        } else if (v == "6") {
            $("p").fadeIn({
                duration: 1000
            });
        }
    });

    // 【隱藏】按鈕
    $("#btnHide").click(function() {
        $("p").hide();
    });
    </script>
</body>

3-3 jQuery中淡入淡出切換fadeToggle

fadeToggle()函數(shù)用于切換所有匹配的元素，并帶有淡入/淡出的過(guò)渡動(dòng)畫(huà)效果。之前也學(xué)過(guò)toggle、slideToggle 也是類(lèi)似的處理方式

fadeToggle切換fadeOut與fadeIn效果，所謂"切換"，即如果元素當(dāng)前是可見(jiàn)的，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的，則使其顯示(淡入)。

常用語(yǔ)法：.fadeToggle( [duration ] ,[ complete ] )

可選的 duration 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是 fadeToggle完成后所執(zhí)行的函數(shù)名稱。

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換。如果元素已淡出，則 fadeToggle() 會(huì)向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會(huì)向元素添加淡出效果。

<script type="text/javascript">
    //【切換顯示/隱藏】按鈕
    $("#btnFadeSwitch").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeToggle();
        } else if (v == "2") {
            $("p").fadeToggle("slow");
        } else if (v == "3") {
            $("p").fadeToggle(3000);
        } else if (v == "4") {
            $("p").fadeToggle(1000, function() {
                alert("切換完畢!");
            });
        } else if (v == "5") {
            $("p").fadeToggle(1000, "linear");
        } else if (v == "6") {
            $("p").fadeToggle({
                duration: 1000
            });
        }
    });
    </script>

3-4 jQuery中淡入效果fadeTo

淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個(gè)共同的特點(diǎn)，變化的區(qū)間要么是0，要么是1

fadeIn：淡入效果，內(nèi)容顯示，opacity是0到1
fadeOut：淡出效果，內(nèi)容隱藏，opacity是1到0

如果要讓元素保持動(dòng)畫(huà)效果，執(zhí)行opacity = 0.5的效果時(shí)，要如何處理？

如果不考慮CSS3，我們用JS實(shí)現(xiàn)的話，基本就是通過(guò)定時(shí)器，在設(shè)定的時(shí)間內(nèi)一點(diǎn)點(diǎn)的修改opacity的值，最終為0.5，原理雖說(shuō)簡(jiǎn)單，但是總不如一鍵設(shè)置這么舒服，jQuery提供了fadeTo方法，可以讓改變透明度一步到位

語(yǔ)法

.fadeTo( duration, opacity ,callback)

必需的 duration參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。

 <script type="text/javascript">
    //【切換顯示/隱藏】按鈕
    $("#btnFadeSwitch").click(function() {
        var v = $("#animation").val();
        if (v == "1") {
            $("p").fadeTo("slow", 0.5);
        } else if (v == "2") {
            $("p").fadeTo(1000, 0.2);
        } else if (v == "3") {
            $("p").fadeTo(1000, 0.9, function() {
                alert('完成')
            });
        }
    });
    </script>

第4章動(dòng)畫(huà)切換的比較

4-1 jQuery中toggle與slideToggle以及fadeToggle的比較

操作元素的顯示和隱藏可以有幾種方法。
例如：

改變樣式display為none
設(shè)置位置高度為0
設(shè)置透明度為0

都能達(dá)到這個(gè)目的，并且針對(duì)這樣的處理jQuery都提供了各自的方法。show/hide、sildeDown/sildeUp、fadeIn/fadeOut。除此之外，還引入了toggle、sildeToggle以及fadeToggle切換方法
toggle、sildeToggle以及fadeToggle的區(qū)別：

toggle：切換顯示與隱藏效果
sildeToggle：切換上下拉卷滾效果
fadeToggle：切換淡入淡出效果

當(dāng)然細(xì)節(jié)上還是有更多的不同點(diǎn):

toggle與slideToggle細(xì)節(jié)區(qū)別：

toggle：動(dòng)態(tài)效果為從右至左。橫向動(dòng)作，toggle通過(guò)display來(lái)判斷切換所有匹配元素的可見(jiàn)性
slideToggle：動(dòng)態(tài)效果從下至上。豎向動(dòng)作，slideToggle 通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性

fadeToggle方法

fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。

元素是淡出顯示的，fadeToggle() 會(huì)使用淡入效果顯示它們。

元素是淡入顯示的，fadeToggle() 會(huì)使用淡出效果顯示它們。

注釋?zhuān)弘[藏的元素不會(huì)被完全顯示（不再影響頁(yè)面的布局）

第5章 jQuery動(dòng)畫(huà)

5-1 jQuery中動(dòng)畫(huà)animate(上)

有些復(fù)雜的動(dòng)畫(huà)通過(guò)之前學(xué)到的幾個(gè)動(dòng)畫(huà)函數(shù)是不能夠?qū)崿F(xiàn)，這時(shí)候就需要強(qiáng)大的animate方法了

操作一個(gè)元素執(zhí)行3秒的淡入動(dòng)畫(huà)，對(duì)比一下2組動(dòng)畫(huà)設(shè)置的區(qū)別

$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

顯而易見(jiàn)，animate方法更加靈活了，可以精確的控制樣式屬性從而執(zhí)行動(dòng)畫(huà)

語(yǔ)法：

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫(huà)。2種語(yǔ)法使用，幾乎差不多了，唯一必要的屬性就是一組CSS屬性鍵值對(duì)。這組屬性和用于設(shè)置.css()方法的屬性鍵值對(duì)類(lèi)似，除了屬性范圍做了更多限制。第二個(gè)參數(shù)開(kāi)始可以單獨(dú)傳遞多個(gè)實(shí)參也可以合并成一個(gè)對(duì)象傳遞了

參數(shù)分解：

properties：一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象。要特別注意所有用于動(dòng)畫(huà)的屬性必須是數(shù)字的，除非另有說(shuō)明；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。比如常見(jiàn)的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等這些都是能產(chǎn)生動(dòng)畫(huà)效果的。background-color很明顯不可以，因?yàn)閰?shù)是red或者GBG這樣的值，非常用插件，否則正常情況下是不能只用動(dòng)畫(huà)效果的。注意，CSS 樣式使用 DOM 名稱（比如 "fontSize"）來(lái)設(shè)置，而非 CSS 名稱（比如 "font-size"）。

特別注意單位，屬性值的單位像素（px）,除非另有說(shuō)明。單位em 和 %需要指定使用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫(huà)用來(lái)控制元素的顯示或隱藏

.animate({
    width: "toggle"
});

如果提供一個(gè)以+= 或 -=開(kāi)始的值，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來(lái)計(jì)算的

.animate({
left: '+=50px'
}, "slow");

duration時(shí)間

動(dòng)畫(huà)執(zhí)行的時(shí)間，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫(huà)執(zhí)行的越慢，不是越快。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒。

easing動(dòng)畫(huà)運(yùn)動(dòng)的算法

jQuery庫(kù)中默認(rèn)調(diào)用 swing。如果需要其他的動(dòng)畫(huà)算法，請(qǐng)查找相關(guān)的插件

complete回調(diào)

動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫(huà)確定完成后發(fā)會(huì)觸發(fā)

<body>
    <h2>animate(上)</h2>
    <p>專(zhuān)注分享</p>
    <div id="aaron">內(nèi)部動(dòng)畫(huà)</div>
    點(diǎn)擊觀察動(dòng)畫(huà)效果：
    <select id="animation">
        <option value="1">動(dòng)畫(huà)1</option>
        <option value="2">動(dòng)畫(huà)2</option>
        <option value="3">動(dòng)畫(huà)3</option>
        <option value="4">動(dòng)畫(huà)4</option>
    </select>
    <input id="exec" type="button" value="執(zhí)行動(dòng)畫(huà)">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            // 數(shù)值的單位默認(rèn)是px
            $aaron.animate({
                width  :300,
                height :300
            });
        } else if (v == "2") {
            // 在現(xiàn)有高度的基礎(chǔ)上增加100px
            $aaron.animate({
                 width  : "+=100px",
                 height : "+=100px"
            });
        } else if (v == "3") {
            $aaron.animate({
                fontSize: "5em"
            }, 2000, function() {
                alert("動(dòng)畫(huà) fontSize執(zhí)行完畢!");
            });
        } else if (v == "4") {
            //通過(guò)toggle參數(shù)切換高度
            $aaron.animate({
                width: "toggle"
            });
        } 
    });
    </script>
</body>

5-2 jQuery中動(dòng)畫(huà)animate(下)

animate在執(zhí)行動(dòng)畫(huà)中，如果需要觀察動(dòng)畫(huà)的一些執(zhí)行情況，或者在動(dòng)畫(huà)進(jìn)行中的某一時(shí)刻進(jìn)行一些其他處理，我們可以通過(guò)animate提供的第二種設(shè)置語(yǔ)法，傳遞一個(gè)對(duì)象參數(shù)，可以拿到動(dòng)畫(huà)執(zhí)行狀態(tài)一些通知

.animate( properties, options )

options參數(shù)

duration - 設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間
easing - 規(guī)定要使用的 easing 函數(shù)，過(guò)渡使用哪種緩動(dòng)函數(shù)
step：規(guī)定每個(gè)動(dòng)畫(huà)的每一步完成之后要執(zhí)行的函數(shù)
progress：每一次動(dòng)畫(huà)調(diào)用的時(shí)候會(huì)執(zhí)行這個(gè)回調(diào)，就是一個(gè)進(jìn)度的概念
complete：動(dòng)畫(huà)完成回調(diào)

其中最關(guān)鍵的一點(diǎn)就是：

如果多個(gè)元素執(zhí)行動(dòng)畫(huà)，回調(diào)將在每個(gè)匹配的元素上執(zhí)行一次，不是作為整個(gè)動(dòng)畫(huà)執(zhí)行一次

列出常用的方式：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

<body>
    <h2>animate(下)</h2>
    <p>慕課網(wǎng),專(zhuān)注分享</p>
    <div id="aaron">內(nèi)部動(dòng)畫(huà)</div>
    點(diǎn)擊觀察動(dòng)畫(huà)效果：
    <select id="animation">
        <option value="1">動(dòng)畫(huà)step動(dòng)畫(huà)</option>
        <option value="2">動(dòng)畫(huà)progress回調(diào)</option>
    </select>
    <a></a>
    <input id="exec" type="button" value="執(zhí)行動(dòng)畫(huà)">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //觀察每一次動(dòng)畫(huà)的改變
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一個(gè)動(dòng)畫(huà)都會(huì)調(diào)用
                step: function(now, fx) {
                   $aaron.text('高度的改變值:'+now)
                }
            })
        } else if (v == "2") {
            //觀察每一次進(jìn)度的變化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步動(dòng)畫(huà)完成后調(diào)用的一個(gè)函數(shù)，
                //無(wú)論動(dòng)畫(huà)屬性有多少，每個(gè)動(dòng)畫(huà)元素都執(zhí)行單獨(dú)的函數(shù)
                progress: function(now, fx) {
                   $aaron.text('進(jìn)度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        } 
    });
    </script>
</body>

5-3 jQuery中停止動(dòng)畫(huà)stop

動(dòng)畫(huà)在執(zhí)行過(guò)程中是允許被暫停的，當(dāng)一個(gè)元素調(diào)用.stop()方法，當(dāng)前正在運(yùn)行的動(dòng)畫(huà)（如果有的話）立即停止

語(yǔ)法：

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

stop還有幾個(gè)可選的參數(shù)，簡(jiǎn)單來(lái)說(shuō)可以這3種情況

.stop(); 停止當(dāng)前動(dòng)畫(huà)，點(diǎn)擊在暫停處繼續(xù)開(kāi)始
.stop(true); 如果同一元素調(diào)用多個(gè)動(dòng)畫(huà)方法，尚未被執(zhí)行的動(dòng)畫(huà)被放置在元素的效果隊(duì)列中。這些動(dòng)畫(huà)不會(huì)開(kāi)始，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候，隊(duì)列中的下一個(gè)動(dòng)畫(huà)立即開(kāi)始。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫(huà)其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行
.stop(true,true); 當(dāng)前動(dòng)畫(huà)將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫(huà)的目標(biāo)值

簡(jiǎn)單的說(shuō)：參考下面代碼、

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

stop()：只會(huì)停止第一個(gè)動(dòng)畫(huà)，第二個(gè)第三個(gè)繼續(xù)
stop(true)：停止第一個(gè)、第二個(gè)和第三個(gè)動(dòng)畫(huà)
stop(true ture)：停止動(dòng)畫(huà)，直接跳到第一個(gè)動(dòng)畫(huà)的最終狀態(tài)

<body>
    <h2>stop</h2>
    <p>慕課網(wǎng),專(zhuān)注分享</p>
    <div id="aaron">內(nèi)部動(dòng)畫(huà)</div>
    <input id="exec" type="button" value="執(zhí)行動(dòng)畫(huà)"><br /><br />

    點(diǎn)擊觀察動(dòng)畫(huà)效果：
    <select id="animation">
        <option value="1">stop()</option>
        <option value="2">stop(true)</option>
        <option value="3">stop(true,true)</option>
    </select>
    <a></a>
    <input id="stop" type="button" value="停止動(dòng)畫(huà)">
    <script type="text/javascript">

    //點(diǎn)擊執(zhí)行動(dòng)畫(huà)
    $("#exec").click(function(){
        $("#aaron").animate({
            height: 300
        }, 5000)
        $("#aaron").animate({
            width: 300
        }, 5000)
        $("#aaron").animate({
            opacity: 0.6
        }, 2000)
    })

    $("#stop").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //當(dāng)前當(dāng)前動(dòng)畫(huà)
            $aaron.stop()
        } else if (v == "2") {
            //停止所以隊(duì)列
            $aaron.stop(true)
        } else if (v == "3") {
            //停止動(dòng)畫(huà)，直接跳到當(dāng)前動(dòng)畫(huà)的結(jié)束
            $aaron.stop(true,true)
        } 
    });
    </script>
</body>

第6章 jQuery核心

6-1 jQuery中each方法的應(yīng)用

jQuery中有個(gè)很重要的核心方法each，大部分jQuery方法在內(nèi)部都會(huì)調(diào)用each，其主要的原因的就是jQuery的實(shí)例是一個(gè)元素合集

如下：找到所有的div，并且都設(shè)置樣式，css只是一個(gè)方法，所以內(nèi)部會(huì)調(diào)用each處理這個(gè)div的合集，給每個(gè)div都設(shè)置style屬性

$('div').css(...)

jQuery的大部分方法都是針元素合集的操作，所以jQuery會(huì)提供$(selector).each()來(lái)遍歷jQuery對(duì)象

.each只是處理jQuery對(duì)象的方法，jQuery還提供了一個(gè)通用的jQuery.each方法，用來(lái)處理對(duì)象和數(shù)組的遍歷

語(yǔ)法

jQuery.each(array, callback )
jQuery.each( object, callback )

第一個(gè)參數(shù)傳遞的就是一個(gè)對(duì)象或者數(shù)組，第二個(gè)是回調(diào)函數(shù)

$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {
   //index是索引,也就是數(shù)組的索引
   //value就是數(shù)組中的值了
});

each就是for循環(huán)方法的一個(gè)包裝，內(nèi)部就是通過(guò)for遍歷數(shù)組與對(duì)象，通過(guò)回調(diào)函數(shù)返回內(nèi)部迭代的一些參數(shù)，第一個(gè)參數(shù)是當(dāng)前迭代成員在對(duì)象或數(shù)組中的索引值(從0開(kāi)始計(jì)數(shù))，第二個(gè)參數(shù)是當(dāng)前迭代成員(與this的引用相同)

jQuery.each()函數(shù)還會(huì)根據(jù)每次調(diào)用函數(shù)callback的返回值來(lái)決定后續(xù)動(dòng)作。如果返回值為false，則停止循環(huán)(相當(dāng)于普通循環(huán)中的break)；如果返回其他任何值，均表示繼續(xù)執(zhí)行下一個(gè)循環(huán)。

$.each(["Aaron", "慕課網(wǎng)"], function(index, value) {
    return false; //停止迭代
});

jQuery方法可以很方便的遍歷一個(gè)數(shù)據(jù)，不需要考慮這個(gè)數(shù)據(jù)是對(duì)象還是數(shù)組

<body>
    <h2>each方法</h2>
    <p>慕課網(wǎng),專(zhuān)注分享</p>
    <div id="aaron"></div>
    點(diǎn)擊觀察結(jié)果：
    <select id="animation">
        <option value="1">each數(shù)組</option>
        <option value="2">each對(duì)象</option>
    </select>
    <input id="exec" type="button" value="執(zhí)行動(dòng)畫(huà)">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        $aaron.empty();
        if (v == "1") {

            // 遍歷數(shù)組元素
            $.each(['Aaron', '慕課網(wǎng)'], function(i, item) {
                $aaron.append("索引=" + i + "; 元素=" + item);
            });
        } else if (v == "2") {
            // 遍歷對(duì)象屬性
            $.each({
                name: "張三",
                age: 18
            }, function(property, value) {
                $aaron.append("屬性名=" + property + "; 屬性值=" + value);
            });
        } 
    });
    </script>
</body>

6-2 jQuery中查找數(shù)組中的索引inArray

在PHP有in_array()判斷某個(gè)元素是否存在數(shù)組中，JavaScript卻沒(méi)有，但是jQuery封裝了inArray()函數(shù)判斷元素是否存在數(shù)組中。注意了：在ECMAScript5已經(jīng)有數(shù)據(jù)的indexOf方法支持了，但是jQuery保持了版本向下兼容，所以封裝了一個(gè)inArray方法

jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值，并返回其索引值。如果數(shù)組中不存在該值，則返回 -1。

語(yǔ)法：

jQuery.inArray( value, array ,[ fromIndex ] )

用法非常簡(jiǎn)單，傳遞一個(gè)檢測(cè)的目標(biāo)值，然后傳遞原始的數(shù)組，可以通過(guò)fromIndex規(guī)定查找的起始值，默認(rèn)數(shù)組是0開(kāi)始

例如：在數(shù)組中查找值是5的索引

$.inArray(5,[1,2,3,4,5,6,7]) //返回對(duì)應(yīng)的索引：4

注意：

如果要判斷數(shù)組中是否存在指定值，你需要通過(guò)該函數(shù)的返回值不等于(或大于)-1來(lái)進(jìn)行判斷

<body>
    <h2>inArray方法</h2>
    <p>專(zhuān)注分享</p>
    <div id="aaron"></div>
    點(diǎn)擊觀察結(jié)果：
    <select id="animation">
        <option value="1">inArray</option>
        <option value="2">inArray</option>
    </select>
    <input id="exec" type="button" value="執(zhí)行動(dòng)畫(huà)">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
           $aaron.empty();
        if (v == "1") {

            var index = $.inArray('Aaron',['test','Aaron', 'array','慕課網(wǎng)']);

            $aaron.text('Aaron的索引是: '+ index)

        } else if (v == "2") {

            //指定索引開(kāi)始的位置
            var index = $.inArray('a',['a','b','c','d','a','c'],2);
            $aaron.text('a的索引是: '+ index)
        } 
    });
    </script>
</body>

6-3 jQuery中去空格神器trim方法

頁(yè)面中，通過(guò)input可以獲取用戶的輸入值，例如常見(jiàn)的登錄信息的提交處理。用戶的輸入不一定是標(biāo)準(zhǔn)的，輸入一段密碼：' 1123456 "，注意了：密碼的前后會(huì)留空，這可能是用戶的無(wú)心的行為，但是密碼確實(shí)又沒(méi)錯(cuò)，針對(duì)這樣的行為，開(kāi)發(fā)者應(yīng)該要判斷輸入值的前后是否有空白符、換行符、制表符這樣明顯的無(wú)意義的輸入值。

jQuery.trim()函數(shù)用于去除字符串兩端的空白字符

這個(gè)函數(shù)很簡(jiǎn)單，沒(méi)有多余的參數(shù)用法

需要注意：

移除字符串開(kāi)始和結(jié)尾處的所有換行符，空格(包括連續(xù)的空格)和制表符（tab）
如果這些空白字符在字符串中間時(shí)，它們將被保留，不會(huì)被移除

<body>
    <h2>trim方法</h2>

    未處理
    <input type="text" name="" id="results1" value=" 前后留空 " />
    <input id="exec1" type="button" value="點(diǎn)擊執(zhí)行"> <br />
    
    trim處理
    <input type="text" name="" id="results2" value=" 前后留空 " />
    <input id="exec2" type="button" value="點(diǎn)擊執(zhí)行">
    <script type="text/javascript">
    $("#exec1").click(function() {
        alert("值的長(zhǎng)度：" + $("#results1").val().length)
    });

    $("#exec2").click(function() {
         alert("值的長(zhǎng)度：" + $.trim($("#results2").val()).length)
    });
    </script>
</body>

6-4 jQuery中DOM元素的獲取get方法

jQuery是一個(gè)合集對(duì)象，如果需要單獨(dú)操作合集中的的某一個(gè)元素，可以通過(guò).get()方法獲取到

以下有3個(gè)a元素結(jié)構(gòu)：

<a>1</a>
<a>2</a>
<a>3</a>

通過(guò)jQuery獲取所有的a元素合集$("a")，如果想進(jìn)一步在合集中找到第二2個(gè)dom元素單獨(dú)處理，可以通過(guò)get方法

語(yǔ)法：

.get( [index ] )

注意2點(diǎn)

get方法是獲取的dom對(duì)象，也就是通過(guò)document.getElementById獲取的對(duì)象
get方法是從0開(kāi)始索引

所以第二個(gè)a元素的查找： $(a).get(1)

負(fù)索引值參數(shù)

get方法還可以從后往前索引，傳遞一個(gè)負(fù)索引值，注意的負(fù)值的索引起始值是-1

同樣是找到第二元素，可以傳遞 $(a).get(-2)

<body>
    <h2>get方法</h2>

    <div id="aaron">
        <a>1</a>
        <a>2</a>
        <a>3</a>
        <a>4</a>
        <a>5</a>
    </div>

    <select id="animation">
        <option value="1">get正數(shù)索引參數(shù)</option>
        <option value="2">get負(fù)數(shù)索引參數(shù)</option>
    </select>
    <input id="exec" type="button" value="點(diǎn)擊執(zhí)行">
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron a");

        //通過(guò)get找到第二個(gè)a元素，并修改藍(lán)色字體
        if (v == "1") {
           $aaron.get(1).style.color = "blue"
        } else if (v == "2") {
            //通過(guò)get找到最后一個(gè)a元素，并修改字體顏色
            $aaron.get(-1).style.color = "#8A2BE2"
        }
    });
    </script>
</body>

6-5 jQuery中DOM元素的獲取index方法

get方法是通過(guò)已知的索引在合集中找到對(duì)應(yīng)的元素。如果反過(guò)來(lái)，已知元素如何在合集中找到對(duì)應(yīng)的索引呢？

.index()方法，從匹配的元素中搜索給定元素的索引值，從0開(kāi)始計(jì)數(shù)。

語(yǔ)法：參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件

.index()
.index( selector )
.index( element )

如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置
如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個(gè)DOM元素或jQuery對(duì)象， .index() 返回值就是傳入的元素相對(duì)于原先集合的位置
如果參數(shù)是一個(gè)選擇器， .index() 返回值就是原先元素相對(duì)于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1

簡(jiǎn)單來(lái)說(shuō)：

<ul>
    <a></a>
    <li id="test1">1</li>
    <li id="test2">2</li>
    <li id="test3">3</li>
</ul>

$("li").index() 沒(méi)有傳遞參數(shù)，反正的結(jié)果是1，它的意思是返回同輩的排列循序，第一個(gè)li之前有a元素,同輩元素是a開(kāi)始為0，所以li的開(kāi)始索引是1

如果要快速找到第二個(gè)li在列表中的索引,可以通過(guò)如下2種方式處理

$("li").index(document.getElementById("test2")) //結(jié)果：1
$("li").index($("#test2"))  //結(jié)果:1

<body>
    <h2>index方法</h2>
    <ul>
        <a></a>
        <a></a>
        <li id="test1">1</li>
        <li id="test2">2</li>
        <li id="test3">3</li>
    </ul>
    <ul>
        <li id="test4">4</li>
        <li id="test5">5</li>
        <li id="test6">6</li>
    </ul>
    <select id="animation">
        <option value="1">index無(wú)參數(shù)</option>
        <option value="2">index傳遞dom</option>
        <option value="3">index傳遞jQuery對(duì)象</option>
    </select>
    <input id="exec" type="button" value="點(diǎn)擊執(zhí)行">
    <br />
    <br /> 索引結(jié)果：
    <span></span>
    <script type="text/javascript">
    $("#exec").click(function() {
        var v = $("#animation").val();

        var $span = $("span");
        $span.empty();

        if (v == "1") {
            //找到第一個(gè)li的同輩節(jié)點(diǎn)中的索引位置
            $span.text($("li").index())
        } else if (v == "2") {

            //通過(guò)傳遞dom查找
            $span.text($("li").index(document.getElementById("test5")))

        } else if (v == "3") {
            //通過(guò)傳遞jQuery對(duì)象查找
            $span.text($("li").index($("#test6")))

        }
    });
    </script>
</body>

最后編輯于：2017.12.06 01:42:04

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 227,488評(píng)論 6贊 531
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 98,034評(píng)論 3贊 414
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事。” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 175,327評(píng)論 0贊 373
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我，道長(zhǎng)，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 62,554評(píng)論 1贊 307
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 71,337評(píng)論 6贊 404
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 54,883評(píng)論 1贊 321
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音，去河邊找鬼。笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 42,975評(píng)論 3贊 439
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 42,114評(píng)論 0贊 286
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 48,625評(píng)論 1贊 332
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 40,555評(píng)論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 42,737評(píng)論 1贊 369
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,244評(píng)論 5贊 355
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 43,973評(píng)論 3贊 345
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 34,362評(píng)論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 35,615評(píng)論 1贊 280
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個(gè)月前我還...
沈念sama閱讀 51,343評(píng)論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 47,699評(píng)論 2贊 370

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

jQuery基礎(chǔ)——?jiǎng)赢?huà)篇

jQuery基礎(chǔ)——?jiǎng)赢?huà)篇

第1章動(dòng)畫(huà)基礎(chǔ)隱藏和顯示

1-1 jQuery中隱藏元素的hide方法

1-2 jQuery中顯示元素的show方法

1-3 jQuery中顯示與隱藏切換toggle方法

第2章上卷下拉效果

2-1 jQuery中下拉動(dòng)畫(huà)slideDown

2-2 jQuery中上卷動(dòng)畫(huà)slideUp

2-3 jQuery中上卷下拉切換slideToggle

第3章淡入淡出效果

3-1 jQuery中淡出動(dòng)畫(huà)fadeOut

3-2 jQuery中淡入動(dòng)畫(huà)fadeIn

3-3 jQuery中淡入淡出切換fadeToggle

3-4 jQuery中淡入效果fadeTo

第4章動(dòng)畫(huà)切換的比較

4-1 jQuery中toggle與slideToggle以及fadeToggle的比較

第5章 jQuery動(dòng)畫(huà)

5-1 jQuery中動(dòng)畫(huà)animate(上)

5-2 jQuery中動(dòng)畫(huà)animate(下)

5-3 jQuery中停止動(dòng)畫(huà)stop

第6章 jQuery核心

6-1 jQuery中each方法的應(yīng)用

6-2 jQuery中查找數(shù)組中的索引inArray

6-3 jQuery中去空格神器trim方法

6-4 jQuery中DOM元素的獲取get方法

6-5 jQuery中DOM元素的獲取index方法

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

jQuery基礎(chǔ)——?jiǎng)赢?huà)篇

第1章 動(dòng)畫(huà)基礎(chǔ)隱藏和顯示

1-1 jQuery中隱藏元素的hide方法

1-2 jQuery中顯示元素的show方法

1-3 jQuery中顯示與隱藏切換toggle方法

第2章 上卷下拉效果

2-1 jQuery中下拉動(dòng)畫(huà)slideDown

2-2 jQuery中上卷動(dòng)畫(huà)slideUp

2-3 jQuery中上卷下拉切換slideToggle

第3章 淡入淡出效果

3-1 jQuery中淡出動(dòng)畫(huà)fadeOut

3-2 jQuery中淡入動(dòng)畫(huà)fadeIn

3-3 jQuery中淡入淡出切換fadeToggle

3-4 jQuery中淡入效果fadeTo

第4章 動(dòng)畫(huà)切換的比較

4-1 jQuery中toggle與slideToggle以及fadeToggle的比較

第5章 jQuery動(dòng)畫(huà)

5-1 jQuery中動(dòng)畫(huà)animate(上)

5-2 jQuery中動(dòng)畫(huà)animate(下)

5-3 jQuery中停止動(dòng)畫(huà)stop

第6章 jQuery核心

6-1 jQuery中each方法的應(yīng)用

6-2 jQuery中查找數(shù)組中的索引inArray

6-3 jQuery中去空格神器trim方法

6-4 jQuery中DOM元素的獲取get方法

6-5 jQuery中DOM元素的獲取index方法

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

第1章動(dòng)畫(huà)基礎(chǔ)隱藏和顯示

第2章上卷下拉效果

第3章淡入淡出效果

第4章動(dòng)畫(huà)切換的比較