jQuery

===========part1============

1.1. jQuery 介紹

1.1.1 JavaScript 庫

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

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

比如 jQuery，就是為了快速方便的操作DOM，里面基本都是函數(shù)（方法）。

常見的JavaScript 庫：jQuery、Prototype、YUI、Dojo、Ext JS、移動端的zepto等，這些庫都是對原生 JavaScript 的封裝，內(nèi)部都是用 JavaScript 實現(xiàn)的，我們主要學(xué)習(xí)的是 jQuery。

1.1.2 jQuery的概念

jQuery總體概況如下 :

  • jQuery 是一個快速、簡潔的 JavaScript 庫，其設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。

  • j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能。

  • jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作、事件處理、動畫設(shè)計和 Ajax 交互。

  • 學(xué)習(xí)jQuery本質(zhì)： 就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）。

  • jQuery 出現(xiàn)的目的是加快前端人員的開發(fā)速度，我們可以非常方便的調(diào)用和使用它，從而提高開發(fā)效率。

1.1.3 jQuery的優(yōu)點(diǎn)

  1. 輕量級。核心文件才幾十kb，不會影響頁面加載速度。
  2. 跨瀏覽器兼容，基本兼容了現(xiàn)在主流的瀏覽器。
  3. 鏈?zhǔn)骄幊獭㈦[式迭代。
  4. 對事件、樣式、動畫支持，大大簡化了DOM操作。
  5. 支持插件擴(kuò)展開發(fā)。有著豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等。
  6. 免費(fèi)、開源。

1.2. jQuery 的基本使用

1.2.1 jQuery 的下載

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

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

版本介紹：

1x ：兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新

2x ：不兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新

3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護(hù)的版本

1.2.2. 體驗jQuery

步驟：
  • 引入jQuery文件。
  • 在文檔最末尾插入 script 標(biāo)簽，書寫體驗代碼。
  • $('div').hide() 可以隱藏盒子。

1.2.3. jQuery的入口函數(shù)

jQuery中常見的兩種入口函數(shù)：

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

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

總結(jié)：
  1. 等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
  2. 相當(dāng)于原生 js 中的 DOMContentLoaded。
  3. 不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執(zhí)行內(nèi)部代碼。
  4. 更推薦使用第一種方式。

1.2.4. jQuery中的頂級對象$

  1. $是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ 。
  2. $是jQuery的頂級對象，相當(dāng)于原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調(diào)用jQuery 的方法。

1.2.5. jQuery 對象和 DOM 對象

使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結(jié)如下 :
  1. 用原生 JS 獲取來的對象就是 DOM 對象
  2. jQuery 方法獲取的元素就是 jQuery 對象。
  3. jQuery 對象本質(zhì)是： 利用$對DOM 對象包裝后產(chǎn)生的對象（偽數(shù)組形式存儲）。

注意：

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

1.2.6. jQuery 對象和 DOM 對象轉(zhuǎn)換

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

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

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

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

總結(jié)：實際開發(fā)比較常用的是把DOM對象轉(zhuǎn)換為jQuery對象，這樣能夠調(diào)用功能更加強(qiáng)大的jQuery中的方法。

1.3. jQuery 選擇器

原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統(tǒng)一標(biāo)準(zhǔn)。

1.3.1. 基礎(chǔ)選擇器

$("選擇器")   //  里面選擇器直接寫 CSS 選擇器即可，但是要加引號
基礎(chǔ)選擇器.png

1.3.2. 層級選擇器

層級選擇器最常用的兩個分別為：后代選擇器和子代選擇器。
層級選擇器.png

基礎(chǔ)選擇器和層級選擇器案例代碼

<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. 篩選選擇器

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

案例代碼

<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中的通過一個節(jié)點(diǎn)找另外一個節(jié)點(diǎn)，父、子、兄以外有所加強(qiáng)。


1.3.4 知識鋪墊

  • jQuery 設(shè)置樣式
$('div').css('屬性', '值')
  • jQuery 里面的排他思想
// 想要多選一的效果，排他思想：當(dāng)前元素設(shè)置樣式，其余的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
  • 隱式迭代
// 遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲）的過程就叫做隱式迭代。
// 簡單理解：給匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法，而不用我們再進(jìn)行循環(huán)，簡化我們的操作，方便我們調(diào)用。
$('div').hide();  // 頁面中所有的div全部隱藏，不用循環(huán)操作
  • 鏈?zhǔn)骄幊?/li> 
// 鏈?zhǔn)骄幊淌菫榱斯?jié)省代碼量，看起來更優(yōu)雅。
$(this).css('color', 'red').sibling().css('color', '');

1.3.5 案例：淘寶服飾精品案例

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

1.4. jQuery 樣式操作

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

1.4.1. 方法1: 操作 css 方法

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

常用以下三種形式 : 

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

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

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


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

1.4.2. 方法2: 設(shè)置類樣式方法

作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的參數(shù)不要加點(diǎn)。

常用的三種設(shè)置類樣式方法：

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

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

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


注意：
  1. 設(shè)置類樣式方法比較適合樣式多時操作，可以彌補(bǔ)css()的不足。
  2. 原生 JS 中 className 會覆蓋元素原先里面的類名，jQuery 里面類操作只是對指定類進(jìn)行操作，不影響原先的類名。

1.4.3. 案例：tab 欄切換

思路分析:
1.點(diǎn)擊上部的li，當(dāng)前l(fā)i 添加current類，其余兄弟移除類。
2.點(diǎn)擊的同時，得到當(dāng)前l(fā)i 的索引號
3.讓下部里面相應(yīng)索引號的item顯示，其余的item隱藏

代碼實現(xiàn)略。(詳情參考源代碼)

1.5. jQuery 效果

jQuery 給我們封裝了很多動畫效果，最為常見的如下：
  • 顯示隱藏：show() / hide() / toggle() ;
  • 劃入畫出：slideDown() / slideUp() / slideToggle() ;
  • 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
  • 自定義動畫：animate() ;

注意：

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

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

1.5.1. 顯示隱藏

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

語法規(guī)范如下:
show.png

hide.png

toggle.png

代碼演示

<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);
            })
            // 一般情況下，我們都不加參數(shù)直接顯示隱藏就可以了
        });
    </script>
</body>

1.5.2. 滑入滑出

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

語法規(guī)范如下:
slideDown.png

slideUp.png

slideToggle.png

代碼演示

<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 淡入淡出

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

語法規(guī)范如下:
fadeIn.png

fadeOut.png

fadeToggle.png

fadeTo.png

代碼演示

<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.4 自定義動畫

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

語法規(guī)范如下:
animate.png

代碼演示

<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.5 停止動畫排隊

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

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

  • stop() 方法用于停止動畫或效果。

  • stop() 寫到動畫或者效果的前面， 相當(dāng)于停止結(jié)束上一次的動畫。

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

1.5.6. 事件切換

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

語法

hover([over,]out)     // 其中over和out為兩個函數(shù)
  • over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)（相當(dāng)于mouseenter）
  • out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave）
  • 如果只寫一個函數(shù)，則鼠標(biāo)經(jīng)過和離開都會觸發(fā)它

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() {
            // 鼠標(biāo)經(jīng)過
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 當(dāng)前元素  this不要加引號
            //     // show() 顯示元素  hide() 隱藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠標(biāo)離開
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切換 hover 就是鼠標(biāo)經(jīng)過和離開的復(fù)合寫法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切換 hover  如果只寫一個函數(shù)，那么鼠標(biāo)經(jīng)過和鼠標(biāo)離開都會觸發(fā)這個函數(shù)
            $(".nav>li").hover(function() {
                // stop 方法必須寫到動畫的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

===========part2============

1.1. jQuery 屬性操作

jQuery 常用屬性操作有三種：prop() / attr() / data() ;

1.1.1 元素固有屬性值 prop()

所謂元素固有屬性就是元素本身自帶的屬性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。

語法

prop.png

注意：prop() 除了普通屬性操作，更適合操作表單屬性：disabled / checked / selected 等。

1.1.2 元素自定義屬性值 attr()

用戶自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加 index =“1”。

語法

attr.png

注意：attr() 除了普通屬性操作，更適合操作自定義屬性。（該方法也可以獲取 H5 自定義屬性）

1.1.3 數(shù)據(jù)緩存 data()

data() 方法可以在指定的元素上存取數(shù)據(jù)，并不會修改 DOM 元素結(jié)構(gòu)。一旦頁面刷新，之前存放的數(shù)據(jù)都將被移除。

語法

data.png

注意：同時，還可以讀取 HTML5 自定義屬性  data-index ，得到的是數(shù)字型。

演示代碼

<body>
    <a  title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("屬性名") 獲取元素固有的屬性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我們都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定義屬性 我們通過 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 數(shù)據(jù)緩存 data() 這個里面的數(shù)據(jù)是存放在元素的內(nèi)存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 這個方法獲取data-index h5自定義屬性 第一個 不用寫data-  而且返回的是數(shù)字型
            console.log($("div").data("index"));
        })
    </script>
</body>

1.2. jQuery 文本屬性值

jQuery的文本屬性值常見操作有三種：html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 、innerText 和 value 屬性。

1.2.1 jQuery內(nèi)容文本值

常見操作有三種：html() / text() / val() ; 分別對應(yīng)JS中的 innerHTML 、innerText 和 value 屬性，主要針對元素的內(nèi)容還有表單的值操作。

語法

html.png

注意：html() 可識別標(biāo)簽，text() 不識別標(biāo)簽。

演示代碼

<body>
    <div>
        <span>我是內(nèi)容</span>
    </div>
    <input type="text" value="請輸入內(nèi)容">
    <script>
        // 1. 獲取設(shè)置元素內(nèi)容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 獲取設(shè)置元素文本內(nèi)容 text()
        console.log($("div").text());
        $("div").text("123");
        // 3. 獲取設(shè)置表單值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

1.3. jQuery 元素操作

jQuery 元素操作主要講的是用jQuery方法，操作標(biāo)簽的遍歷、創(chuàng)建、添加、刪除等操作。

1.3.1. 遍歷元素

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

語法1

each1.png

注意：此方法用于遍歷 jQuery 對象中的每一項，回調(diào)函數(shù)中元素為 DOM 對象，想要使用 jQuery 方法需要轉(zhuǎn)換。

語法2

each2.png

注意：此方法用于遍歷 jQuery 對象中的每一項，回調(diào)函數(shù)中元素為 DOM 對象，想要使用 jQuery 方法需要轉(zhuǎn)換。

演示代碼

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果針對于同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強(qiáng)大）
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍歷元素 
            $("div").each(function(i, domEle) {
                // 回調(diào)函數(shù)第一個參數(shù)一定是索引號  可以自己指定索引號號名稱
                // console.log(i);
                // 回調(diào)函數(shù)第二個參數(shù)一定是 dom 元素對象，也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要轉(zhuǎn)換 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍歷元素 主要用于遍歷數(shù)據(jù)，處理數(shù)據(jù)
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 輸出的是 name age 屬性名
                console.log(ele); // 輸出的是 andy  18 屬性值
            })
        })
    </script>
</body>

1.3.2. 創(chuàng)建、添加、刪除

jQuery方法操作元素的創(chuàng)建、添加、刪除方法很多，則重點(diǎn)使用部分，如下：
create.png

append1.png

append2.png

remove.png
注意：以上只是元素的創(chuàng)建、添加、刪除方法的常用方法，其他方法請參詳API。

案例代碼

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 創(chuàng)建元素
            var li = $("<li>我是后來創(chuàng)建的li</li>");
      
            // 2. 添加元素
            //  2.1 內(nèi)部添加
            // $("ul").append(li);  內(nèi)部添加并且放到內(nèi)容的最后面 
            $("ul").prepend(li); // 內(nèi)部添加并且放到內(nèi)容的最前面
            //  2.2 外部添加
            var div = $("<div>我是后媽生的</div>");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 刪除元素
            // $("ul").remove(); 可以刪除匹配的元素 自殺
            // $("ul").empty(); // 可以刪除匹配的元素里面的子節(jié)點(diǎn) 孩子
            $("ul").html(""); // 可以刪除匹配的元素里面的子節(jié)點(diǎn) 孩子
        })
    </script>
</body>

1.4. jQuery 尺寸、位置操作

jQuery中分別為我們提供了兩套快速獲取和設(shè)置元素尺寸和位置的API，方便易用，內(nèi)容如下。

1.4.1. jQuery 尺寸操作

 jQuery 尺寸操作包括元素寬高的獲取和設(shè)置，且不一樣的API對應(yīng)不一樣的盒子模型。

語法

size.png

代碼演示

<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 獲取設(shè)置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  獲取設(shè)置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  獲取設(shè)置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 獲取設(shè)置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

注意：有了這套 API 我們將可以快速獲取和子的寬高，至于其他屬性想要獲取和設(shè)置，還要使用 css() 等方法配合。

1.4.2. jQuery 位置操作

jQuery的位置操作主要有三個： offset()、position()、scrollTop()/scrollLeft() , 具體介紹如下:

語法

offset.png

position.png

scroll.png

代碼演示

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回頂部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 獲取設(shè)置距離文檔的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 獲取距離帶有定位父級位置（偏移） position   如果沒有帶有定位的父級，則以文檔為準(zhǔn)
            // 這個方法只能獲取不能設(shè)置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
            // 3. 被卷去的頭部
            $(document).scrollTop(100);
            // 被卷去的頭部 scrollTop()  / 被卷去的左側(cè) scrollLeft()
            // 頁面滾動事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回頂部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文檔而是 html和body元素做動畫
            })
        })
    </script>
</body>

===========part3============

1.1. jQuery 事件注冊

jQuery 為我們提供了方便的事件注冊機(jī)制，是開發(fā)人員抑郁操作優(yōu)缺點(diǎn)如下：
  • 優(yōu)點(diǎn): 操作簡單，且不用擔(dān)心事件覆蓋等問題。
  • 缺點(diǎn): 普通的事件注冊不能做事件委托，且無法實現(xiàn)事件解綁，需要借助其他方法。

語法

register.png

演示代碼

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 單個事件注冊
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

1.2. jQuery 事件處理

因為普通注冊事件方法的不足，jQuery又開發(fā)了多個處理方法，重點(diǎn)講解如下：
  • on(): 用于事件綁定，目前最好用的事件綁定方法
  • off(): 事件解綁
  • trigger() / triggerHandler(): 事件觸發(fā)

1.2.1 事件處理 on() 綁定事件

因為普通注冊事件方法的不足，jQuery又創(chuàng)建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

語法

on1.png

on2.png

on3.png

演示代碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on可以綁定1個或者多個事件處理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以實現(xiàn)事件委托（委派）
            // click 是綁定在ul 身上的，但是 觸發(fā)的對象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以給未來動態(tài)創(chuàng)建的元素綁定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后來創(chuàng)建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

1.2.2. 事件處理 off() 解綁事件

當(dāng)某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱為事件解綁。jQuery 為我們提供 了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有只觸發(fā)一次的事件綁定方法 one()，在這里我們重點(diǎn)講解一下 off() ;

語法

off.png

演示代碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <p>我是一個P標(biāo)簽</p>
    <script>
        $(function() {
            // 事件綁定
            $("div").on({
                click: function() {
                    console.log("我點(diǎn)擊了");
                },
                mouseover: function() {
                    console.log('我鼠標(biāo)經(jīng)過了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解綁 off 
            // $("div").off();  // 這個是解除了div身上的所有事件
            $("div").off("click"); // 這個是解除了div身上的點(diǎn)擊事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能觸發(fā)事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

1.2.3. 事件處理 trigger() 自動觸發(fā)事件

有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發(fā), 比如輪播圖自動播放功能跟點(diǎn)擊右側(cè)按鈕一致?？梢岳枚〞r器自動觸發(fā)右側(cè)按鈕點(diǎn)擊事件，不必鼠標(biāo)點(diǎn)擊觸發(fā)。由此 jQuery 為我們提供了兩個自動觸發(fā)事件 trigger() 和 triggerHandler() ;

語法


演示代碼

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 綁定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自動觸發(fā)事件
      // 1. 元素.事件()
      // $("div").click();會觸發(fā)元素的默認(rèn)行為
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");會觸發(fā)元素的默認(rèn)行為
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不會觸發(fā)元素的默認(rèn)行為
      $("input").on("focus", function() {
        $(this).val("你好嗎");
      });
      // 一個會獲取焦點(diǎn)，一個不會
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

1.3. jQuery 事件對象

jQuery 對DOM中的事件對象 event 進(jìn)行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發(fā)，就會有事件對象的產(chǎn)生。

語法

event.png

演示代碼

<body>
    <div></div>

    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("點(diǎn)擊了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("點(diǎn)擊了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 對象使用，可以借鑒 API 和 DOM 中的 event 。

1.4. jQuery 拷貝對象

jQuery中分別為我們提供了兩套快速獲取和設(shè)置元素尺寸和位置的API，方便易用，內(nèi)容如下。

語法

extend.png

演示代碼

 <script>
        $(function() {
            // 1.合并數(shù)據(jù)
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
            // 2. 會覆蓋 targetObj 里面原來的數(shù)據(jù)
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

1.5. jQuery 多庫共存

實際開發(fā)中，很多項目連續(xù)開發(fā)十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運(yùn)行的情況下，新的功能使用新的jQuery版本實現(xiàn)，這種情況被稱為，jQuery 多庫共存。

語法

noconfig.png

演示代碼

<script>
    $(function() {
        // 讓jquery 釋放對$ 控制權(quán) 讓用自己決定
        var suibian = jQuery.noConflict();
        console.log(suibian("span"));
    })
</script>

1.6. jQuery 插件

jQuery 功能比較有限，想要更復(fù)雜的特效效果，可以借助于 jQuery 插件完成。 這些插件也是依賴于jQuery來完成的，所以必須要先引入

jQuery文件，因此也稱為 jQuery 插件。

jQuery 插件常用的網(wǎng)站：
  1. jQuery 插件庫 http://www.jq22.com/
  2. jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步驟：

  1. 引入相關(guān)文件。（jQuery 文件 和 插件文件）
  2. 復(fù)制相關(guān)html、css、js (調(diào)用插件)。

1.6.1. 瀑布流插件（重點(diǎn)講解）

我們學(xué)習(xí)的第一個插件是jQuery之家的開源插件，瀑布流。我們將重點(diǎn)詳細(xì)講解，從找到插件所在網(wǎng)頁，然后點(diǎn)擊下載代碼，到插件的使用等，后面的插件使用可參考瀑布流插件的使用。

下載位置

water.png

download.png

代碼演示

插件的使用三點(diǎn)：   1. 引入css.           2.引入JS            3.引入html。 （有的簡單插件只需引入html和js，甚至有的只需引入js）
  • 1.引入css.
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
  
<!-- 下面的樣式代碼為頁面布局，可以引入，也可以自己寫，自己設(shè)計頁面樣式，一般為直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>
  • 2.引入js.
<!-- 前兩個必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的為啟動瀑布流代碼，參數(shù)可調(diào)節(jié)屬性，具體功能可參考readme.html -->
<script type="text/javascript">
    $(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
    });
</script>
  • 3.引入html.
    <!-- html結(jié)構(gòu)一般為事先寫好，很難修改結(jié)構(gòu)，但可以修改內(nèi)容及圖片的多少（article標(biāo)簽） -->
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
    </section>

總結(jié)：jQuery插件就是引入別人寫好的：html 、css、js （有時也可以只引入一部分，讀懂后也可以修改部分內(nèi)容）

1.6.2. 圖片懶加載插件

圖片的懶加載就是：當(dāng)頁面滑動到有圖片的位置，圖片才進(jìn)行加載，用以提升頁面打開的速度及用戶體驗。（下載略）

代碼演示

懶加載只需引入html 和 js操作 即可，此插件不涉及css。
  • 1.引入js
<script src="js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>
  • 2.引入html
 <img data-lazy-src="upload/floor-1-3.png" alt="">

1.6.3. 全屏滾動插件

全屏滾動插件比較大，所以，一般大型插件都會有幫助文檔，或者網(wǎng)站。全屏滾動插件介紹比較詳細(xì)的網(wǎng)站為：

http://www.dowebok.com/demo/2014/77/

代碼演示

全屏滾動因為有多重形式，所以不一樣的風(fēng)格html和css也不一樣，但是 js 變化不大。所以下面只演示js的引入，html和css引入根據(jù)自己實際

項目需要使用哪種風(fēng)格引入對應(yīng)的HTML和CSS。

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
    $(function() {
        $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
        });
    });
</script>

注意：實際開發(fā)，一般復(fù)制文件，然后在文件中進(jìn)行修改和添加功能。

1.6.4. bootstrap組件

Bootstrap是 Twitter 公司設(shè)計的基于HTML、CSS、JavaScript開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，他依靠jQuery實現(xiàn)，且支持響應(yīng)式

布局，使得 Web 開發(fā)更加方便快捷。

**凡是在軟件開發(fā)中用到了軟件的復(fù)用，被復(fù)用的部分都可以稱為組件，凡是在應(yīng)用程序中已經(jīng)預(yù)留接口的組件就是插件**。Bootstrap組件使

用非常方便: 1.引入bootstrap相關(guān)css和js 2.去官網(wǎng)復(fù)制html

代碼演示

  1. 引入bootstrap相關(guān)css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
  1. 去官網(wǎng)復(fù)制html的功能模塊
    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

1.6.5. bootstrap插件（JS）

bootstrap中的js插件其實也是組件的一部分，只不過是需要js調(diào)用功能的組件，所以一般bootstrap的js插件一般會伴隨著js代碼（有的也可以

省略js，用屬性實現(xiàn)）。

步驟： 1.引入bootstrap相關(guān)css和js        2.去官網(wǎng)復(fù)制html        3.復(fù)制js代碼，啟動js插件。

代碼演示

  1. 引入bootstrap相關(guān)css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
  1. 去官網(wǎng)復(fù)制html的功能模塊
<!-- 模態(tài)框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            里面就是模態(tài)框
        </div>
    </div>
</div>
  1. 復(fù)制js代碼，啟動js插件。
<script>
    // 當(dāng)我們點(diǎn)擊了自己定義的按鈕，就彈出模態(tài)框
    $(".myBtn").on("click", function() {
        // alert(11);
        $('#btn').modal()
    })
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 頭條寫好文章，看一篇本專業(yè)的文章。 寫好演課稿，看一篇課文的教案。 保持好情緒，低調(diào)做人，不看，不聽，不評論。 喜...
    那畔千潯閱讀 161評論 0贊 2
  • 投射我兒能適應(yīng)大學(xué)生活，越來越會調(diào)節(jié)自己的情緒和壓力，情緒平和穩(wěn)定，對自己的未來有清晰的目標(biāo)，并為此不斷努力。 投...
    花開生兩面閱讀 152評論 0贊 0
  • 七律 冬松 松樹有著高風(fēng)亮節(jié)、堅忍頑強(qiáng)、傲骨崢嶸的品質(zhì)，松樹主桿挺拔雄偉，看上去就像是一位頂天立地的英雄，而且松...
    9f91e43aee4f閱讀 151評論 0贊 0
  • 感恩！六點(diǎn)簽到4257天 所謂白日做夢，就是明明每天都做著同樣的事情， 卻幻想得到完全不一樣的結(jié)果。 如果你想改變...
    感恩學(xué)習(xí)相信小陶閱讀 102評論 0贊 0
  • 心心念念的網(wǎng)紅橋，終于和亞琴打了卡，帶著少女心的兔耳朵，吃著糖葫蘆，欣賞著美景。五光十色，光怪陸離，看著橋下的人間...
    快雪時清閱讀 145評論 0贊 0

友情鏈接更多精彩內(nèi)容