一、jQuery 概述

1.1 JavaScript庫

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

簡單理解：就是一個 JS 檔案，裡面對原生 js 程式碼進行了封裝，存放到裡面。這樣開發者可以快速高效的使用這些封裝好的功能了。

比如 jQuery，就是為了快速方便的操作 DOM，裡面基本都是函式（方法）。

常見的 JavaScript 庫

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• 移動端的 zepto

這些庫都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的。

1.2 jQuery 的概念

jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less, Do More”，即倡導寫更少的程式碼，做更多的事情。

• j：JavaScript
• Query：查詢 js，把 js 中的 DOM 操作做了封裝，開發者可以快速的查詢使用裡面的功能。

jQuery 封裝了 JavaScript 常用的功能程式碼，優化了 DOM 操作、事件處理、動畫設計和 Ajax 互動。

jQuery 出現的目的是加快前端人員的開發速度，提高開發效率。

1.3 jQuery 的優點

• 輕量級。核心檔案才幾十 kb，不會影響頁面載入速度
• 跨瀏覽器相容。基本相容了現在主流的瀏覽器
• 鏈式程式設計、隱式迭代
• 對事件、樣式、動畫支援，大大簡化了 DOM 操作
• 支援外掛擴充套件開發。有著豐富的第三方外掛，例如：樹形選單、日期控制元件、輪播圖等
• 免費、開源

二、jQuery 的基本使用

2.1 jQuery 的入口函式

兩種寫法：

$(function() {
    // 此處是頁面 DOM 載入完成的入口
});

$(document).ready(function() {
    // 此處是頁面 DOM 載入完成的入口
});

1. 等著 DOM 結構渲染完畢即可執行內部程式碼，不必等到所有外部資源載入完成，jQuery 幫我們完成了封裝；
2. 相當於原生 js 中的 DOMContentLoaded；
3. 不同於原生 js 中的 load 事件是等頁面文件、外部的 js 檔案、css 檔案、圖片載入完畢才執行內部程式碼。

2.2 jQuery 的頂級物件

1. $ 是 jQuery 的別稱，在程式碼中可以使用 jQuery 代替 $
2. $ 是 jQuery 的頂級物件，相當於原生 JavaScript 的 window。把元素利用 $ 包裝成 jQuery 物件，就可以呼叫 jQuery 的方法。

// $(function() {
jQuery(function() {
    //$('div').hide();
    jQuery('div').hide();
})

2.3 jQuery 物件和 DOM 物件

1. 使用原生 js 方法獲取的物件是 DOM 物件
2. 使用 jQuery 方法獲取的物件是 jQuery 物件
3. jQuery 物件本質是：利用 $ 對 DOM 物件包裝後產生的物件（偽陣列形式儲存）
4. jQuery 物件只能使用 jQuery 方法，DOM 物件則使用原生的 JavaScript 屬性和方法。

// DOM 物件：用原生 js 獲取的物件
console.dir(document.querySelector('div'));
// jQuery 物件：用 jQuery 方法獲取的物件
console.dir($('div'));

document.querySelector('div').hide();  // 報錯
$('div').style.display = 'none';  // 報錯

DOM 物件和 jQuery 物件之間是可以相互轉換的。

因為原生 js 比 jQuery 更大，原生的一些屬性和方法 jQuery 沒有封裝，要想使用這些屬性和方法需要把 jQuery 物件轉換為 DOM 物件才能使用。

1. DOM 物件轉換成 jQuery 物件

   1. $(DOM物件) 注意不要加引號

   $('div');
   // 使用原生 js 獲取 DOM 物件
   var div = document.querySelector('div');
   $(div);
   

2. jQuery 物件轉換為 DOM 物件

   1. $('div')[index] index 是索引號
   2. $('div').get(index) index 是索引號

   $('div')[0].style.display = 'none';
   $('div').get(0).style.display = 'none';
   

三、jQuery 的 API

3.1 jQuery 選擇器

3.1.1 jQuery 基礎選擇器

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

$('選擇器')

括號內的選擇器直接寫 CSS 選擇器，要加引號。

3.1.2 jQuery 層級選擇器

3.1.3 隱式迭代

遍歷內部 DOM 元素（偽陣列形式儲存）的過程就叫做隱式迭代。

簡單理解：給匹配到的所有元素進行迴圈遍歷，執行相應的方法，而不用開發者再進行迴圈，簡化開發者的操作，方便呼叫。

$('div').css('background', 'orange');

3.1.4 jQuery 篩選選擇器

3.1.5 jQuery 篩選方法

$(function() {
    // 滑鼠經過
    $('.nav>li').mouseover(function() {
        // $(this) 是 jQuery 當前元素
        $(this).children('ul').show();  
    });
    // 滑鼠離開
    $('.nav>li').mouseout(function() {
        $(this).children('ul').hide();  
    });
    $('ol .item').siblings('li').css('color', 'red');
    $('ul li').eq(2).css('color', 'skyblue');
    $('div:first').hasClass('current');
})

3.1.6 jQuery 排他思想

$(function() {
    // 1. 隱式迭代，給所有的按鈕都繫結點選事件
    $('button').click(function() {
        // 2. 當前元素的背景色
        $(this).css('background', 'orange');
        // 3. 隱式迭代，其餘的同級按鈕去掉背景色
        $(this).siblings('button').css('background', '');
    })
})

$(function() {
    // 1. 滑鼠經過導航欄 
    $("#left li").mouseover(function() {
        // 2. 得到當前 li 的索引號
        var index = $(this).index();

        // $("#content div").eq(index).show();
        // $("#content div").eq(index).siblings().hide();
        // 鏈式程式設計
        $("#content div").eq(index).show().siblings().hide();
    })
})

3.2 jQuery 樣式操作

3.2.1 操作 css 方法

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

1. 引數只寫屬性名，則返回屬性值

   console.log($('div').css('width'));  // 200px
   

2. 引數是屬性名、數值、逗號分隔，是設定一組樣式；屬性必須加引號，值如果是數字可以不用跟單位和引號

   $('div').css('width', '300px');
   $('div').css('width', 300);  // 正常
   

3. 引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號分隔，屬性可以不用加引號，如果是複合屬性則必須採取駝峰命名法，如果屬性值不是數字，則不需要加引號。

   $('div').css({
       width: 300,
       height: 300,
       backgroundColor: 'red'
   });
   

3.2.2 設定類樣式方法

作用等同於原生 JS 的 classList，可以操作類樣式。注意操作類裡面的引數不要加點 .。

1. 新增類

   $('div').addClass('current');
   

2. 移除類

   $('div').removeClass('current');
   

3. 切換類

   $('div').toggleClass('current');
   

3.3 jQuery 效果

jQuery 封裝了很多動畫效果，常見的有：

1. 顯示隱藏
   • show()
   • hide()
   • toggle()
2. 滑動
   • slideDown()
   • slideUp()
   • slideToggle()
3. 淡入淡出
   • fadeIn()
   • fadeOut()
   • fadeToggle()
   • fadeTo()
4. 自定義動畫
   • animate()

3.3.1 顯示隱藏

語法規範

show([speed, [easing], [fn]])
hide([speed, [easing], [fn]])
toggle([speed, [easing], [fn]])

顯示引數

1. 引數都可以省略，無動畫直接顯示
2. speed：三種預定速度之一的字串或表示動畫時長的毫秒數值（如：1000）
   • "slow"
   • "normal"
   • "fast"
3. easing：用來指定切換效果，預設是“swing”，可用引數“linear”
4. fn：回撥函式，在動畫完成時執行的函式，每個元素執行一次。

$('div').show(1000, function() {
    
})
$('div').hide("slow", function() {
    
})

3.3.2 事件切換

語法規則

hover([over,]out)

1. over：滑鼠移到元素上要觸發的函式（相當於 mouseenter）
2. out：滑鼠移出元素要出發的函式（相當於 mouseleave）

$(function() {
    // 滑鼠經過
    $('.nav>li').mouseover(function() {
        $(this).children('ul').slideDown(200);
    });
    // 滑鼠經過
    $('.nav>li').mouseout(function() {
        $(this).children('ul').slideUp(200);
    });
    
    // 1. 事件切換：是滑鼠經過和離開的複合寫法
    $('.nav>li').hover(function() {
        $(this).children('ul').slideDown(200);
    }, function() {
        $(this).children('ul').slideUp(200);
    });
    
    // 2. 事件切換：如果只寫一個函式，那麼滑鼠經過和滑鼠離開都會觸發這個函式
    $('.nav>li').hover(function() {
        $(this).children('ul').slideToggle(200);
    });
})

3.3.4 動畫佇列及其停止排隊方法

1. 動畫或效果佇列

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

2. 停止排隊

   stop()

   $(".nav>li").hover(function() {
       // stop 方法寫在動畫的前面
       $(this).children("ul").stop().slideToggle(200);
   });
   

3.3.3 淡入淡出效果

語法規則

fadeIn([speed, [easing], [fn]])
fadeOut([speed, [easing], [fn]])
fadeToggle([speed, [easing], [fn]])
fadeTo([speed, opacity, [easing], [fn]])

效果引數

1. opacity 透明度必須寫，取值 0~1 之間；
2. fadeTo() 的 speed 必須寫。

$(function() {
    $(".wrap li").hover(function() {
        // 滑鼠經過，其他的 li 標籤透明度設為 0.5
        $(this).siblings().stop().fadeTo(400, 0.5);
    }, function() {
        // 滑鼠離開，其他 li 透明度改為 1
        $(this).siblings().stop().fadeTo(400, 1);
    });
});

3.3.4 自定義動畫 animate

語法規則

animate(params, [speed], [easing], [fn])

效果引數

1. params：想要更改的樣式屬性，以物件形式出傳遞；必須寫。屬性名可以不用帶引號，如果是複合屬性則需要採取駝峰命名法；其餘引數都可以省略。

$(function() {
    $("button").click(function() {
        $("div").animate({
            left: 500,  // 注意 div 元素要有定位
            top: 300,
            opacity: .4
        }, 300);
    })
})

手風琴效果：

<head>
    <style>
        // 當前選中的 li 顯示大圖，不顯示小圖
        .king li.current .big {
            display: block;
        }
        
        .king li.current .small {
            display: none;
        }
    </style>
    
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 滑鼠經過某個 li 有兩步操作：
            $(".king li").mouseenter(function() {
                // 1. 當前li 寬度變為 224px，同時裡面的小圖片淡出，大圖片淡入
                $(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>
</head>
<body>
    <div class="king">
        <ul>
            <li class="current">
                <a href="javaScript:;">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="javaScript:;">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
</body>

3.4 jQuery 屬性操作

3.4.1 設定或獲取元素固有屬性值 prop()

固有屬性：元素本身自帶的屬性，如 <a> 元素的 href，<input> 元素的 type。

1. 獲取屬性

   prop("屬性名")

2. 設定屬性

   prop("屬性名", "屬性值")

<body>
    <a href="http://www.baidu.com" title="">百度</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2"></div>
    
    <script>
        $(function() {
            console.log($("a").prop("href"));
            $("a").prop("title", "百度");
            
            $("input").change(function() {
                console.log($(this).prop("checked"))
            })
        })
        </script>
</body>

全選功能實現：

$(function() {
    $(".checkall").change(function() {
        $(".checkbox, .checkall").prop("checked", $(this).prop("checked"));
    })
    $(".checkbox").change(function() {
        // 全部選中
        if ($(".checkbox:checked").length === $(".checkbox").length) {
            $(".checkall").prop("checked", true);
        }
        else {
            $(".checkall").prop("checked", false);
        }
    })
})

3.4.2 設定或獲取元素自定義屬性 attr()

自定義屬性：使用者自己給元素新增的屬性。

1. 獲取屬性

   attr("屬性名")

   類似原生的 getAttribute() 方法

2. 設定屬性

   attr("屬性名", "屬性值")

   類似原生的 setAttribute()

console.log($("div").attr("index"));
$("div").attr("idnex", "4");

console.log($("div").attr("data-index"));

3.4.3 資料快取 data()

data() 方法可以在指定的元素上存取資料，並不會修改 DOM 元素結構。一旦頁面重新整理，之前存放的資料都將被移除。

$("span").data("username", "Tom");
console.log($("span").data("username"));
// data() 方法獲取 data-index（h5自定義屬性）與 attr() 有兩個區別
// 1. 不用寫 data- 字首
// 2. 返回的是數字型
console.log($("div").data("index"));

3.5 jQuery 內容文字值

1. 普通元素內容 html()

   相當於原生 JS 的 innerHTML()。

   // 獲取元素內容
   console.log($("div").html());
   // 設定元素內容
   $("div").html("abc");
   

2. 普通元素文字內容 text()

   相當於原生 JS 的 innerText()。

   // 獲取元素的文字內容
   console.log($("div").text());
   // 設定元素的文字內容
   $("div").text("abc");
   

3. 表單的值 val()

   相當於原生 JS 的 value()。

   // 獲取元素的文字內容
   console.log($("input").val());
   // 設定元素的文字內容
   $("input").val("abc");
   

   增減商品功能：

   $(".increment").click(function() {
       var num = $(this).siblings(".goodsNum").val();
       num++;
       $(this).siblings(".goodsNum").val(num);
       // 當前商品單價
       var price = $(this).parents(".num").siblings(".price").html;
       // 去掉人民幣符號
       price = price.substr(1);
       // 小計修改
       // parents(".num") 選擇類名為 num 的上級元素
       // toFixed(2) 保留兩位小數
       $(this).parents(".num").siblings(".sum").html("￥" + (price * num).toFixed(2));
   })
   $(".decrement").click(function() {
       var num = $(this).siblings(".goodsNum").val();
       if (num === 1) {
           return false;
       }
       num--;
       $(this).siblings(".goodsNum").val(num);
       // 當前商品單價
       var price = $(this).parents(".num").siblings(".price").html;
       // 去掉人民幣符號
       price = price.substr(1);
       // 小計修改
       $(this).parents(".num").siblings(".sum").html("￥" + (price * num).toFixed(2));
   })
   
   $(".goodsNum").change(function() {
       // 商品數量
       var num = $(this).val();
       // 當前商品單價
       var price = $(this).parents(".num").siblings("price").html();
       price = price.substr(1);
       $(this).parents(".num").siblings(".sum").html("￥" + (price * num).toFixed(2));
   })
   

3.6 jQuery 元素操作

3.6.1 遍歷元素

jQuery 隱式迭代是對同一類元素做了同樣的操作。如果想要給同一類元素做不同操作，就需要用遍歷。

語法規則1

$("div").each(function(index, domEle) {

})

1. each() 方法遍歷匹配的每一個元素。主要用 DOM 處理。
2. 回撥函式有兩個引數：index 是每個元素的索引號；domEle 是每個 DOM 元素物件，不是 jQuery 物件；
3. 想要使用 jQuery 方法，需要給這個 DOM 元素物件轉換為 jQuery 的物件 $(domEle)。

$(function() {
    var sum = 0;
    var arr = ["red", "green", "blue"];
    
    $("div").each(function(index, domEle) {
        $(domEle).css("color", arr[index]);
        
        sum += parseInt($(domEle).text());
    })
})

語法規則2

$.each(object, function(index, element) {

})

1. $.each() 方法可用於遍歷任何物件。主要用於資料處理，比如陣列、物件
2. 回撥函式有兩個引數：index 是每個元素的索引號；element 遍歷內容

$.each($("div"), function(index, domEle) {

})

var arr = ["1", "2"];
$.each(arr, function(index, element) {

})

$.each({
    name: "Tom",
    age: 18
}, function(key, value) {

})

商品總額計算：

calculateSum();
function calculateSum() {
    var count = 0;  // 商品總件數
    var money = 0;  // 商品總價格
    
    $(".goodsNum").each(function(index, domEle) {
        count += parseInt($(domEle).val());
    })
    $(".total-sum em").text(count);
    
    $(".sum").each(function(index, domEle) {
        money += parseFloat($(domEle).text().substr(1));
    })
    $(".price-sum em").text("￥" + money.toFixed(2));
}

3.6.2 建立元素

語法規則

$("<li></li>");

動態的建立了一個 li 標籤。

3.6.3 新增元素

1. 內部新增

   element.append("內容")

   把內容放入匹配元素內部最末尾，類似原生 JS 的 appendChild。

   var li = $("<li></li>");
   //$("ul").append(li)  // 內部新增，放到 ul 的最末尾
   $("ul").prepend(li)  // 內部新增，放到 ul 的最前面
   

2. 外部新增

   element.after("內容")
   element.before("內容")

   after 把內容放入目標元素後面，before 把內容放入目標元素前面。

• 內部新增元素，生成之後，它們是上下級關係
• 外部新增元素，生成之後，它們是同級關係

3.6.4 刪除元素

element.remove() 刪除匹配的元素本身
element.empty() 刪除匹配的元素集合中的所有子節點
element.html("") 清空匹配的元素內容

刪除商品模組：

// 刪除單個商品
$(".p-action a").click(function() {
    $(this).parents('.cart-item').remove();
    calculateSum();
})
// 刪除勾選的商品
$(".remove-batch").click(function() {
    $(".checkbox:checked").parents('.cart-item').remove();
    calculateSum();
})
// 清空購物車
$(".clear-all").click(function() {
    $(".cart-item").remove();
    calculateSum();
})

3.7 jQuery 事件

3.7.1 jQuery 事件註冊

語法規則

element.事件(function() {})
$("div").click(function() { })

其他事件和原生 JS 基本一致。

比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等。

$(function() {
    // 1. 單個事件註冊
    $("div").click(function() {
        $(this).css("background", "orange");
    })
    $("div").mouseenter(function() {
        $(this).css("background", "skyblue");
    })
})

one() 方法在匹配元素上繫結一個或多個事件的事件處理函式。

$(function() {
    // 2. 事件處理 on
    $("div").on({
        mouseenter: function() {
            $(this).css("background", "red");
        },
        mouseleave: function() {
            $(this).css("background", "green");
        },
        click: function() {
            $(this).css("background", "blue");
        }
    });
    // 3. 複合寫法
    $("div").on("mouseenter mouseleave", function() {
        $(this).toggleClass('current');
    })
})

on() 方法可以實現事件委派。

事件委派：把原來加在子元素身上的事件繫結在父元素身上，就是把事件委派給父元素。

// 隱式迭代，每個 li 都綁定了事件
$("ul li").click(function() {})

// 事件只繫結在 ul，觸發在 li
$("ul").on("click", "li", function() {

})

在此之前有 bind()、live()、delegate() 等方法來處理事件繫結和事件委派，自新版本的用 on() 代替它們。

on() 可以給未來動態建立的元素繫結事件。

// 這種事件註冊方式不能為之後動態新增的 li 繫結事件
$("ol li").click(function() {
    alert(1);
});

$("ol").on("click", "li", function() {
    alert(2);
})

var li = $("<li>li</li>");
$("ol").append(li);

微博釋出功能:

<body>
    <script>
        // 1. 點擊發布按鈕，動態建立一個 li，放入文字框的內容和刪除按鈕，然後新增到 ul 中 
        $(".btn").on("click", function() {
            var li = $("<li></li>");
            li.html($(".txt").val + "<a href="javascript:;">刪除</a>");
            $("ul").prepend(li);
            li.slideDown();
            $(".txt").val("");
        })

        // 2. 點選刪除按鈕，刪除當前的微博留言 li
        //$("ul a").click(function() {  // 不能為動態建立的 a 新增事件
        //})
        $("ul").on("click", "a", function() {
            $(this).parent().slideUp(function() {
                $(this).remove();
            })
        })
    </script>

    <div class="box" id="weibo">
        <span>微博釋出</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">釋出</button>
        <ul>
        </ul>
    </div>
</body>

off() 方法可以移除通過 on() 方法新增的事件處理程式。

// 解綁 div 元素所有事件處理程式
$("div").off();
// 解綁 div 元素上的點選事件處理程式
$("div").off("click");
// 解綁事件委託
$("ul").off("click", "li");

如果有的事件只想觸發一次，可以使用 one() 來繫結事件。

$("div").one("click", function() {

});

3.7.2 自動觸發事件

$(function() {
    $("div").on("click", function() {
        alert(1);
    })
    // 自動觸發事件的三種方式
    // 1. 元素.事件()
    $("div").click();
    // 2. 元素.trigger("事件")
    $("div").trigger("click");
    // 3. 元素.triggerHandler("事件")
    $("div").triggerHandler("click");
    
    $("input").on("focus", function() {
        $(this).val("你好");
    })
    // 不會觸發元素的預設行為：自動顯示“你好”時不會有游標
    $("input").triggerHandler("focus");
})

事件觸發，就會有事件物件的產生。

element.on(events, [selector], function(event) {})

阻止預設行為：event.preventDefault() 或 return false
阻止冒泡：event.stopPropagation()

3.8 jQuery 物件拷貝

如果想要把某個物件拷貝（合併）給另一個物件使用，可以使用 $.extend() 方法。

語法規則

$.extend([deep], target, object1, [objectN])

1. deep：如果為 true 表示深拷貝，預設為 false 淺拷貝
2. target：要拷貝的目標物件
3. object1：待拷貝到第一個物件的物件

$(function() {
    var targetObj = {
        id: 0,
        msg: {
            gender: '男'
        }
    };
    var sourceObj = {
        id: 1,
        name: "Tom",
        msg: {
            age: 18
        }
    };
    // 淺拷貝
    $.extend(targetObj, sourceObj);
    console.log(targetObj);  // 會覆蓋 targetObj 原來的資料
    targetObj.msg.age = 20;
    console.log(targetObj.msg.age);  // 20
    console.log(sourceObj.msg.age);  // 20
    
    // 深拷貝
    $.extend(true, targetObj, sourceObj);
})

• 淺拷貝把原來物件裡面的複雜資料型別地址拷貝給目標物件
• 深拷貝把原來物件裡面的資料完全複製一份給目標物件，如果裡面有不衝突的屬性，會合併到一起。

3.9 jQuery 多庫共存

jQuery 使用 $ 作為識別符號，隨著 jQuery 的流行，其他 JS 庫也會用 $ 作為識別符號，這樣一起使用會引起衝突。

<script src="jquery.min.js"></script>
<script>
    $(function() {
        // 自定義的 $ 方法
        function $(element) {
            return document.querySelector(element);
        }
        console.log($("div"));
        $.each();  // 報錯。因為自定義的 $ 方法中沒有 each() 方法
    })
</script>

此時需要一個解決方案，讓 jQuery 和其他 JS 庫不存在衝突，同時存在，這就是多庫共存。

jQuery 的解決方案：

1. 使用 jQuery 而不用 $
2. 讓 jQuery 釋放對 $ 控制權，由使用者自定義

// 1. 使用 jQuery
jQuery.each();
// 2. 讓 jQuery 釋放對 $ 控制權，由使用者自定義
var my$ = jQuery.noConflict();
console.log(my$("span"));
my$.each();

3.10 jQuery 外掛庫

1. jQuery外掛庫
2. jQuery之家

• 瀑布流
• 圖片懶載入
• 全屏滾動

bootstrap JS 外掛

bootstrap 框架也是依賴於 jQuery 開發的，因此裡面的 JS 外掛使用，也必須引入 jQuery 檔案。

<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

3.11 jQuery 尺寸、位置操作

3.11.1 jQuery 尺寸

• 引數為空，則是獲取相應的值，返回結果是數字型
• 如果傳入引數為數字，則是修改相應值
• 引數可以不寫單位

3.11.2 jQuery 位置

位置主要有三個：offset()、position()、scrollTop()、scrollLeft()。

1. offset() 設定或獲取元素偏移
   • offset() 方法設定或返回被選元素相對於文件的偏移座標，跟父級沒有關係。
   • 返回值為物件，裡面有 top、left 屬性。offset().top 用於獲取距離文件頂部的距離，offset().left 用於獲取距離文件左側的距離。
   • 設定元素的偏移：offset( { top: 100, left: 100} );
2. position() 獲取元素偏移
   • position() 獲取距離帶有定位的父級的偏移
   • 這個方法只能獲取不能設定
3. scrollTop()/scrollLeft() 設定或獲取元素被捲去的頭部和左側
   • scrollTop() 方法設定或返回被選元素被捲去的頭部

$(function() {
    // 設定滾動被捲去的頭部
    $(document).scrollTop(100);
    
    var boxTop = $(".container").offset().top;
    // 滾動事件
    $(window).scroll(function() {
        if ($(document).scrollTop() >= boxTop) {
            $(".back").fadeIn();
        } else {
            $(".back").fadeOut();
        }
    })
    // 返回頂部
    $(".back").click(function() {
        // 無動畫
        //$(document).scrollTop(0);
        
        // 不會發生滾動。動畫要作用在元素上，不能是文件
        //$(document).stop().animate({
        //    scrollTop: 0
        //});
        
        $("body, html").stop().animate({
            scrollTop: 0
        });
    })
})