全文介紹

jQuery 中入口函數(shù)
jQuery 對(duì)象和 DOM 對(duì)象
jQuery 選擇器
jQuery 樣式操作
jQuery 效果

1.jQuery 介紹

1.1 JavaScript 庫

JavaScript 庫：即 library锰悼，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。從封裝一大堆函數(shù)的角度理解庫倦踢，就是在這個(gè)庫中兴使，封裝了很多預(yù)先定義好的函數(shù)在里面，比如動(dòng)畫 animate搅荞、hide拄查、show 等菇怀。
簡單理解就是一個(gè) JS 文件，里面對(duì)原生 JS 代碼進(jìn)行了封裝咽筋，存放到里面溶推。這樣我們就可以快速而方便的使用封裝好的功能。
比如 jQuery，就是為了快速方便的操作 DOM蒜危，里面基本都是函數(shù)（方法）虱痕。
常見的 JavaScript 庫：jQuery、Prototype辐赞、YUI皆疹、Dojo、Ext.js占拍、移動(dòng)端的 zepto 等略就，這些庫都是對(duì)原生 JS 的封裝，內(nèi)部都是用 JS 實(shí)現(xiàn)的晃酒。

1.2 jQuery 的概念

jQuery 總體概況如下表牢。

jQuery 是一個(gè)快速、簡潔的 JavaScript 庫贝次，其設(shè)計(jì)的宗旨是 “write less, do more”崔兴，即倡導(dǎo)寫更少的代碼，做更多的事情蛔翅。
j 就是 JavaScript敲茄；Query 是查詢；意思是指將 JavaScript 中的 DOM 做了封裝山析，我們可以快速的使用里面的功能堰燎。
jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作笋轨、事件處理秆剪、動(dòng)畫設(shè)計(jì)和 Ajax 交互。
學(xué)習(xí) jQuery 的本質(zhì)：就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）爵政。
jQuery 出現(xiàn)的目的是加快前端人員的開發(fā)速度仅讽，我們可以非常方便的調(diào)用和使用它，從而提升開發(fā)效率钾挟。

在這里插入圖片描述

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

輕量級(jí)洁灵，核心文件才幾十 kb，不會(huì)影響頁面加載速度掺出。
跨瀏覽器兼容徽千，基本兼容了現(xiàn)在主流的瀏覽器。
鏈?zhǔn)骄幊讨肱椤㈦[式迭代罐栈。
對(duì)事件、樣式泥畅、動(dòng)畫支持，大大簡化了 DOM 操作。
支持插件擴(kuò)展開發(fā)位仁，有著豐富的第三方插件柑贞，例如：樹型菜單、日期控件聂抢、輪播圖等钧嘶。
免費(fèi)、開源琳疏。

2.jQuery 的基本使用

2.1 jQuery 的下載

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

版本介紹：

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

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

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

2.2 體驗(yàn) jQuery

步驟：

引入 jQuery 文件
在文檔最末尾插入 script 標(biāo)簽揽趾，書寫體驗(yàn)代碼台汇。
$("div").hide() 可以隱藏盒子。

2.3 jQuery 的入口函數(shù)

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

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

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

總結(jié)：

等著 DOM 結(jié)構(gòu)渲染完畢俐筋，即可執(zhí)行內(nèi)部代碼牵素。不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝澄者。
相當(dāng)于原生 JS 的 DOMContentLoaded两波。
不同于原生 JS 中的 load 事件是等頁面文檔、外部的 js 文件闷哆、外部的 css 文件腰奋、圖片加載完成才執(zhí)行內(nèi)部代碼。
更推薦使用第一種方式抱怔。

2.4 jQuery 的頂級(jí)對(duì)象 $

$ 是 jQuery 的別稱劣坊，在代碼中可以使用 jQuery 代替，但是為了方便屈留，一般都是用 $局冰。
$ 是 jQuery 的頂級(jí)對(duì)象，相當(dāng)于原生 js 中的 window灌危。把元素利用 $ 包裝成 jQuery 對(duì)象康二，就可以調(diào)用 jQuery 的方法。

2.5 jQuery 對(duì)象和 DOM 對(duì)象

使用 jQuery 方法和原生 JS 獲取的元素是不一樣的勇蝙，總結(jié)如下：

用原生 JS 獲取的對(duì)象就是 DOM 對(duì)象沫勿。
jQuery 方法獲取的元素就是 jQuery 對(duì)象
jQuery 對(duì)象的本質(zhì)是：利用 $ 對(duì) DOM 對(duì)象包裝后產(chǎn)生的對(duì)象（偽數(shù)組形式存儲(chǔ)）。

注意：只有 jQuery 對(duì)象才能使用 jQuery 方法，DOM 對(duì)象則使用原生的 JS 方法产雹。

在這里插入圖片描述

2.3 jQuery 對(duì)象和 DOM 對(duì)象轉(zhuǎn)換

DOM 對(duì)象與 jQuery 對(duì)象之間是可以相互轉(zhuǎn)換的诫惭。因?yàn)樵?JS 比 jQuery 更大，原生的一些屬性和方法 jQuery 沒有封裝蔓挖，想要使用這些屬性和方法需要把 jQuery 對(duì)象轉(zhuǎn)換成 DOM 對(duì)象才能使用夕土。

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

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

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

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

3.jQuery 選擇器

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

3.1 基礎(chǔ)選擇器

$("選擇器")   //  里面選擇器直接寫 CSS 選擇器即可咽扇，但是要加引號(hào)

在這里插入圖片描述

3.2 層級(jí)選擇器

層級(jí)選擇器最常用的兩個(gè)分別是：后代選擇器和子代選擇器。

在這里插入圖片描述

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

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

3.3 篩選選擇器

篩選選擇器陕壹，顧名思義就是在所有選項(xiàng)中選擇滿足條件的進(jìn)行篩選選擇质欲，常見如下：

在這里插入圖片描述

<body>
    <ul>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
    </ul>
    
    <ol>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
        <li>多個(gè)里面篩選幾個(gè)</li>
    </ol>

    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "pink");
            $("ol li:odd").css("color", "skyblue");
        })
    </script>
</body>

在這里插入圖片描述

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">兒子</div>
        </div>
    </div>
    
    <div class="nav">
        <p>我是 p</p>
        <div>
            <p>我是 p</p>
        </div>
    </div>
    <script>
        // 注意：都是方法，要帶括號(hào)
        $(function() {
            // 1.父
            console.log($(".son").parent());
            
            // 2.子
            // (1) 選擇親兒子糠馆，類似子代選擇器
            console.log($(".nav").children("p"));
            // (2) 選擇所有后代嘶伟，類似后代選擇器
            $(".nav").find("p").css("color", "red");

            // 3.兄
            console.log($(".nav").siblings());
        })
    </script>
</body>

3.4 知識(shí)鋪墊

jQuery 設(shè)置樣式
```
$('div').css('屬性', '值');
```

jQuery 里面的排他思想

// 想要多選一的效果，排他思想：當(dāng)前元素設(shè)置樣式又碌，其余的兄弟元素清除樣式九昧。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隱式迭代

// 遍歷內(nèi)部 DOM 元素（偽數(shù)組形式存儲(chǔ)）的過程就叫做隱式迭代。
// 簡單理解：給匹配到的所有元素進(jìn)行循環(huán)遍歷毕匀，執(zhí)行相應(yīng)的方法铸鹰，而不用我們?cè)龠M(jìn)行循環(huán)，簡化我們的操作皂岔，方便我們調(diào)用蹋笼。
$('div').hide();  // 頁面中所有的div全部隱藏，不用循環(huán)操作

鏈?zhǔn)骄幊?

// 鏈?zhǔn)骄幊淌菫榱斯?jié)省代碼量躁垛，看起來更優(yōu)雅剖毯。
$(this).css('color', 'red').sibling().css('color', '');

4.jQuery 樣式操作

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

4.1 操作 css 方法

jQuery 可以使用 css 方法來修改簡單元素樣式：也可以操作類教馆，修改多個(gè)樣式逊谋。
常用一下三種方式：

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

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

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

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

4.2 設(shè)置類樣式方法

作用等同于以前的 classList窟赏，可以操作類樣式。
注意：操作類里面的參數(shù)不可以加 .箱季。

常用的三種方式：

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

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

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

注意：

設(shè)置類樣式的方法比較適合樣式多時(shí)操作涯穷，可以彌補(bǔ) css() 的不足。
原生 JS 中className 會(huì)覆蓋元素原先里面的類名藏雏，jQuery 里面類操作只是對(duì)指定類進(jìn)行操作拷况，不影響原先的類名。

5.jQuery 效果

jQuery 給我們封裝了很多動(dòng)畫效果掘殴，最為常見的如下：

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

注意：

動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行赚瘦，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行奏寨。
jQuery 提供了一個(gè)方法起意，可以停止動(dòng)畫排隊(duì)：stop()。

5.1 顯示隱藏

顯示隱藏動(dòng)畫病瞳，常見方法有 3 個(gè)：show() / hide() / toggle()

語法規(guī)范如下：

在這里插入圖片描述

代碼演示：

$(function() {
    // 顯示
    $(".show").click(function() {
        $("div").show();
    })

    // 隱藏
    $(".hide").click(function() {
        $("div").hide(1000, function() {
            alert(11);
        });
    })

    // 切換
    $(".toggle").click(function() {
        $("div").toggle();
    })
})

5.2 劃入劃出

滑入滑出動(dòng)畫揽咕，常見有三個(gè)方法：slideDown() / slideUp() / slideToggle() ;

語法規(guī)范如下:

在這里插入圖片描述

代碼演示：

$(function() {
    $("button").eq(0).click(function() {
        // 下拉滑動(dòng) solidDown()
        $("div").slideDown();
    })

    $("button").eq(1).click(function() {
        // 上拉滑動(dòng) solidUp()
        $("div").slideUp();
    })

    $("button").eq(2).click(function() {
        // 切換滑動(dòng) solidToggle()
        stop();
        $("div").slideToggle();
    })
})

5.3 淡入淡出

?淡入淡出動(dòng)畫，常見有四個(gè)方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

?語法規(guī)范如下:

在這里插入圖片描述

代碼演示：

<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() 這個(gè)速度和透明度要必須寫
            $("div").fadeTo(1000, 0.5);
        });
    });
</script>

5.4 停止動(dòng)畫排隊(duì)

動(dòng)畫或者效果一旦觸發(fā)就得執(zhí)行套菜，如果多次觸發(fā)就會(huì)造成動(dòng)畫或者效果排隊(duì)執(zhí)行亲善，停止動(dòng)畫排隊(duì)的方法是：stop()。

stop() 方法用于停止動(dòng)畫或效果
stop() 寫到動(dòng)畫或者效果的前面逗柴，相當(dāng)于停止結(jié)束上一次動(dòng)畫

總結(jié)：每次使用動(dòng)畫之前蛹头，先調(diào)用 stop()，再調(diào)用動(dòng)畫嚎于。

5.5 自定義動(dòng)畫

自定義動(dòng)畫非常強(qiáng)大掘而，通過參數(shù)的傳遞可以模擬以上所有動(dòng)畫，方法為 animate()于购。

語法規(guī)范如下：

在這里插入圖片描述

代碼演示：

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

jQuery 學(xué)習(xí)筆記（一）

jQuery 學(xué)習(xí)筆記（一）

全文介紹

1.jQuery 介紹

1.1 JavaScript 庫

1.2 jQuery 的概念

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

2.jQuery 的基本使用

2.1 jQuery 的下載

2.2 體驗(yàn) jQuery

2.3 jQuery 的入口函數(shù)

2.4 jQuery 的頂級(jí)對(duì)象 $

2.5 jQuery 對(duì)象和 DOM 對(duì)象

2.3 jQuery 對(duì)象和 DOM 對(duì)象轉(zhuǎn)換

3.jQuery 選擇器

3.1 基礎(chǔ)選擇器

3.2 層級(jí)選擇器

3.3 篩選選擇器

3.4 知識(shí)鋪墊

4.jQuery 樣式操作

4.1 操作 css 方法

4.2 設(shè)置類樣式方法

5.jQuery 效果

5.1 顯示隱藏

5.2 劃入劃出

5.3 淡入淡出

5.4 停止動(dòng)畫排隊(duì)

5.5 自定義動(dòng)畫