jQuery一 - 快速開發

1.1 jQuery介紹

1.1.1 javascript庫

JavaScript庫：即 library，是一個封裝好的特定的集合（方法和函數）。從封裝一大堆函數的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函數在裏面，比如動畫animate、hide、show，比如獲取元素等。

簡單理解：就是一個JS 文件，裏面對我們原生js代碼進行了封裝，存放到裏面。這樣我們可以快速高效的使用這些封裝好的功能了。

比如 jQuery，就是爲了快速方便的操作DOM，裏面基本都是函數（方法）。
常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的，我們主要學習的是 jQuery。

1.1.2 jQuery的概念

jQuery總體概況如下 :

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。
j 就是 JavaScript； Query 查詢；意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用裏面的功能。
jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、動畫設計和 Ajax 交互。
學習jQuery本質：就是學習調用這些函數（方法）。
jQuery 出現的目的是加快前端人員的開發速度，我們可以非常方便的調用和使用它，從而提高開發效率。

1.1.3 jQuery的優點

輕量級。核心文件才幾十kb，不會影響頁面加載速度。
跨瀏覽器兼容，基本兼容了現在主流的瀏覽器。
鏈式編程、隱式迭代。
對事件、樣式、動畫支持，大大簡化了DOM操作。
支持插件擴展開發。有着豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等。
免費、開源。

1.2 jQuery基本使用

1.2.1 jQuery下載

jQuery的官網地址： https://jquery.com/，官網即可下載最新版本。

各個版本的下載：https://code.jquery.com/

版本介紹：

1x ：兼容 IE 678 等低版本瀏覽器，官網不再更新
2x ：不兼容 IE 678 等低版本瀏覽器，官網不再更新
3x ：不兼容 IE 678 等低版本瀏覽器，是官方主要更新維護的版本

1.2.2 體驗jQuery

步驟：

引入jQuery文件。
在文檔最末尾插入 script 標籤，書寫體驗代碼。
$('div').hide() 可以隱藏盒子。

1.2.3 jQuery的入口函數

jQuery中常見的兩種入口函數：

// 第一種: 簡單易用。使用的更多
$(function () {   
    ...  // 此處是頁面 DOM 加載完成的入口
}) ; 

// 第二種: 繁瑣，但是也可以實現
$(document).ready(function(){
   ...  //  此處是頁面DOM加載完成的入口
});

總結：

等着 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
相當於原生 js 中的 DOMContentLoaded。
不同於原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。
更推薦使用第一種方式。

1.2.4 jQuery中的頂級對象$

$是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般爲了方便，通常都直接使用 $。
$是jQuery的頂級對象，相當於原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法。

1.2.5 jQuery 對象和 DOM 對象

使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結如下 :

用原生 JS 獲取來的對象就是 DOM 對象
jQuery 方法獲取的元素就是 jQuery 對象。
jQuery 對象本質是：利用$對DOM 對象包裝後產生的對象（僞數組形式存儲）。

注意：只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。

1.2.6 jQuery 對象和 DOM 對象轉換

DOM 對象與 jQuery 對象之間是可以相互轉換的。因爲原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對象轉換爲DOM對象才能使用。

// 1.DOM對象轉換成jQuery對象，方法只有一種
var box = document.getElementById('box');  // 獲取DOM對象
var jQueryObject = $(box);  // 把DOM對象轉換爲 jQuery 對象

// 2.jQuery 對象轉換爲 DOM 對象有兩種方法：
// 2.1 jQuery對象[索引值]
var domObject1 = $('div')[0]

// 2.2 jQuery對象.get(索引值)
var domObject2 = $('div').get(0)

總結：實際開發比較常用的是把DOM對象轉換爲jQuery對象，這樣能夠調用功能更加強大的jQuery中的方法。

1.3 jQuery選擇器

原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統一標準。

1.3.1 基礎選擇器

$("選擇器")   //  裏面選擇器直接寫 CSS 選擇器即可，但是要加引號

1.3.2 層級選擇器

層級選擇器最常用的兩個分別爲：後代選擇器和子代選擇器。

基礎選擇器和層級選擇器案例代碼

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

1.3.3 隱式迭代

遍歷內部 DOM 元素（僞數組形式存儲）的過程就叫做隱式迭代。
簡單理解：給匹配到的所有元素進行循環遍歷，執行相應的方法，而不用我們再進行循環，簡化我們的操作，方便我們調用。

$('div').hide();  // 頁面中所有的div全部隱藏，不用循環操作
$('div').css('屬性','屬性值')；

1.3.4 篩選選擇器

篩選選擇器，顧名思義就是在所有的選項中選擇滿足條件的進行篩選選擇。常見如下 :

案例代碼

<body>
    <ul>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
    </ul>
    <ol>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
        <li>多個裏面篩選幾個</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

另: jQuery中還有一些篩選方法，類似DOM中的通過一個節點找另外一個節點，父、子、兄以外有所加強。

重點記住：parent children find siblings eq

1.3.5 案例-新浪下拉菜單

案例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            list-style: none;
        }
        a:link{
            text-decoration: none;
        }
        a:hover{
            display: block;
            background-color: bisque;
        }
        .nav{
            width:80px;
            text-align: center;
        }
        .nav ul{
            display: none;
        }
        .nav ul li{
            width:80px;
            height:20px;
            border:1px solid #cccccc;
            text-align: center;
            margin-left:-40px;
        }
    </style>
    <script src="jquery.js"></script>

</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    
    <script>
        $(function(){
            //鼠標移入
            $('.nav > li').mouseover(function(){
                // $(this)jqeury就是當前元素
                // show()顯示元素
                $(this).children('ul').show();
            })

            // 鼠標移出
            $('.nav > li').mouseout(function(){
                // $(this)jqeury就是當前元素
                // show()顯示元素
                $(this).children('ul').hide();
            })
        })
    </script>
</body>
</html>

1.3.6 排他思想

想要多選一的效果，排他思想：當前元素設置樣式，其餘的兄弟元素清除樣式。

<head>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>
        <button>點我</button>
        <button>點我</button>
        <button>點我</button>
        <button>點我</button>
        <button>點我</button>
        <button>點我</button>
    </div>

    <script>
        $(function() {
            //隱式迭代點擊事件
            $('button').click(function() {
                //隱式迭代，排他
                $(this).css('background', 'red')
                $(this).siblings('button').css('background', '')
            })
        })
    </script>
</body>

1.3.7 案例講解-淘寶服飾精品

思路分析:
1.核心原理：鼠標經過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其餘的圖片隱藏。
2.需要得到當前小li 的索引號，就可以顯示對應索引號的圖片
3.jQuery 得到當前元素索引號 $(this).index()
4.中間對應的圖片，可以通過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()

案例代碼

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        /*
            核心原理：鼠標經過左側盒子某個小li，就讓內容區相對應圖片顯示，其餘圖片隱藏
            需要得到當前小li的索引號，就可以顯示對應索引號的圖片
            jquery得到當前元素索引號$(this).index();
            中間對應的圖片，可以通過eq(index)方法去選擇
            顯示元素 show() 隱藏元素hide()
        */
        $(function() {
            // 1. 鼠標經過左側的小li 
            $("#left li").mouseover(function() {
                // 2. 得到當前小li 的索引號
                var index = $(this).index();
                // console.log(index);
                $(this).css('background','red')

                $(this).siblings().css('background','')
                // 3. 讓我們右側的盒子相應索引號的圖片顯示出來就好了
                $("#content div").eq(index).show();
                // 4. 讓其餘的圖片（就是其他的兄弟）隱藏起來
                $("#content div").eq(index).siblings().hide();
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女褲</a></li>
            <li><a href="#">羽絨服</a></li>
            <li><a href="#">牛仔褲</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a>
            </div>
        </div>
    </div>
</body>
</html>

1.3.8 鏈式編程

鏈式編程是爲了節省代碼量，看起來更優雅。

$(this).css('color', 'red').sibling().css('color', '');

1.4 jQuery樣式操作

jQuery中常用的樣式操作有兩種：css() 和設置類樣式方法

1.4.1 操作css樣式方法

jQuery 可以使用 css 方法來修改簡單元素樣式；也可以操作類，修改多個樣式。

常用以下三種形式 :

// 1.參數只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');

// 2.  參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
$(this).css(''color'', ''red'');

// 3.  參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開， 屬性可以不用加引號
$(this).css({ "color":"white","font-size":"20px"});

注意：css() 多用於樣式少時操作，多了則不太方便。

1.4.2 操作css類的方法

作用等同於以前的 classList，可以操作類樣式，注意操作類裏面的參數不要加點。

常用的三種設置類樣式方法：

// 1.添加類
$("div").addClass("current");

// 2.刪除類
$("div").removeClass("current");

// 3.切換類
$("div").toggleClass("current");

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
            transition: all 0.5s;
        }
        
        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // $('div').click(function() {
            //     $(this).addClass('current')
            // })
            // $('div').click(function() {
            //     $(this).removeClass('current')
            // })
            $('div').click(function() {
                $(this).toggleClass('current')
            })
        })
    </script>
</head>
<body>
    <div class="current">

    </div>
</body>

</html>

注意：

設置類樣式方法比較適合樣式多時操作，可以彌補css()的不足。
原生 JS 中 className 會覆蓋元素原先裏面的類名，jQuery 裏面類操作只是對指定類進行操作，不影響原先的類名。

1.4.3 案例-tab欄切換

思路分析:
1.點擊上部的li，當前li 添加current類，其餘兄弟移除類。
2.點擊的同時，得到當前li 的索引號
3.讓下部裏面相應索引號的item顯示，其餘的item隱藏

案例代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="jquery.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介紹</li>
                <li>規格與包裝</li>
                <li>售後保障</li>
                <li>商品評價（50000）</li>
                <li>手機社區</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介紹模塊內容
            </div>
            <div class="item">
                規格與包裝模塊內容
            </div>
            <div class="item">
                售後保障模塊內容
            </div>
            <div class="item">
                商品評價（50000）模塊內容
            </div>
            <div class="item">
                手機社區模塊內容
            </div>

        </div>
    </div>
    <script>
        $(function() {
            // 1.點擊上部的li，當前li 添加current類，其餘兄弟移除類
            $(".tab_list li").click(function() {
                // 鏈式編程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.點擊的同時，得到當前li 的索引號
                var index = $(this).index();
                console.log(index);
                // 3.讓下部裏面相應索引號的item顯示，其餘的item隱藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })
    </script>
</body>
</html>

1.4.4 jQuery中類操作和className的區別

原生的js中className會覆蓋元素原先裏面的類名
addClass相當於追加類名不影響以前的類名

1.5 jQuery效果

jQuery 給我們封裝了很多動畫效果，最爲常見的如下：

顯示隱藏：show() / hide() / toggle() ;
劃入畫出：slideDown() / slideUp() / slideToggle() ;
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
自定義動畫：animate() ;

注意：

動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。

jQuery爲我們提供另一個方法，可以停止動畫排隊：stop() ;

1.5.1顯示隱藏

顯示隱藏動畫，常見有三個方法：show() / hide() / toggle() ;

語法規範如下:

代碼演示

<body>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情況下，我們都不加參數直接顯示隱藏就可以了
        });
    </script>
</body>

1.5.2滑入滑出

滑入滑出動畫，常見有三個方法：slideDown() / slideUp() / slideToggle() ;

語法規範如下:

代碼演示

<body>
    <button>下拉滑動</button>
    <button>上拉滑動</button>
    <button>切換滑動</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑動 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑動 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑動切換 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

1.5.3案例講解-簡潔版下拉菜單

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠標經過
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 當前元素  this不要加引號
            //     // show() 顯示元素  hide() 隱藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠標離開
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切換 hover 就是鼠標經過和離開的複合寫法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切換 hover  如果只寫一個函數，那麼鼠標經過和鼠標離開都會觸發這個函數
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });
        })
    </script>
</body>
</html>

1.5.4淡入淡出

淡入淡出動畫，常見有四個方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

語法規範如下:

代碼演示

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切換</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切換 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 這個速度和透明度要必須寫
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

1.5.5自定義動畫

自定義動畫非常強大，通過參數的傳遞可以模擬以上所有動畫，方法爲：animate() ;

語法規範如下:

代碼演示

<body>
    <button>動起來</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

1.5.6停止動畫排隊

動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。

停止動畫排隊的方法爲：stop() ;

stop() 方法用於停止動畫或效果。
stop() 寫到動畫或者效果的前面，相當於停止結束上一次的動畫。

總結: 每次使用動畫之前，先調用 stop() ,在調用動畫。

1.5.7事件切換

jQuery中爲我們添加了一個新事件 hover() ; 功能類似 css 中的僞類 :hover 。介紹如下

語法

hover([over,]out)     // 其中over和out爲兩個函數

over:鼠標移到元素上要觸發的函數（相當於mouseenter）
out:鼠標移出元素要觸發的函數（相當於mouseleave）
如果只寫一個函數，則鼠標經過和離開都會觸發它

hover事件和停止動畫排列案例

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠標經過
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 當前元素  this不要加引號
            //     // show() 顯示元素  hide() 隱藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠標離開
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切換 hover 就是鼠標經過和離開的複合寫法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切換 hover  如果只寫一個函數，那麼鼠標經過和鼠標離開都會觸發這個函數
            $(".nav>li").hover(function() {
                // stop 方法必須寫到動畫的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

1.5.8案例講解-高亮顯示

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background: #000;
        }
        
        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            //鼠標進入的時候,其他的li標籤透明度：0.5
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠標離開，其他li 透明度改爲 1
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>
</html>

1.5.9案例講解-手風琴

思路分析:
1.鼠標經過某個小li 有兩步操作：
2.當前小li 寬度變爲 224px，同時裏面的小圖片淡出，大圖片淡入
3.其餘兄弟小li寬度變爲69px，小圖片淡入，大圖片淡出

案例代碼

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手風琴案例</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        /* 大圖片顯示 */
        .king li.current .big {
            display: block;
        }
        
        /* 小圖片隱藏 */
        .king li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        /*
            頁面圖片的佈局：有大圖片和小圖片
                小圖片定位在了大圖片的上面，將大圖片隱藏起來
                只有第一個圖片是大圖片顯示，小圖片隱藏
            需求分析：
                鼠標經過某一個li的時候
                    當前的li的寬度變成224px，同時裏面的小圖片淡出，大圖片淡入
                    其餘兄弟小li的寬度變成69px，小圖片淡入，大圖片淡出
        */

        //鼠標指針穿過元素時，會發生 mouseenter 事件。
        $(function() {
            // 鼠標經過某個小li 有兩步操作：
            $(".king li").mouseover(function() {
                // 1.當前小li 寬度變爲 224px， 同時裏面的小圖片淡出，大圖片淡入
                    //爲什麼要加stop，是爲了解決多次動畫的問題
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();

                // 2.當前其餘兄弟小li寬度變爲69px， 小圖片淡入， 大圖片淡出
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })



        });
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="media/images/m1.jpg" alt="" class="small">
                    <img src="media/images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="media/images/l1.jpg" alt="" class="small">
                    <img src="media/images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="media/images/c1.jpg" alt="" class="small">
                    <img src="media/images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="media/images/w1.jpg" alt="" class="small">
                    <img src="media/images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="media/images/z1.jpg" alt="" class="small">
                    <img src="media/images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="media/images/h1.jpg" alt="" class="small">
                    <img src="media/images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="media/images/t1.jpg" alt="" class="small">
                    <img src="media/images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>
</html>