day01 - jQuery

學習目標：

能夠說出什么是 jQuery
能夠說出 jQuery 的優點
能夠簡單使用 jQuery
能夠說出 DOM 物件和 jQuery 物件的區別
能夠寫出常用的 jQuery 選擇器
能夠操作 jQuery 樣式
能夠寫出常用的 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 >我是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. 篩選選擇器

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

案例代碼

<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中的通過一個節點找另外一個節點，父、子、兄以外有所加強，

偏重于記憶，演示代碼略，

1.3.4 知識鋪墊

jQuery 設定樣式

$('div').css('屬性', '值')

jQuery 里面的排他思想

// 想要多選一的效果，排他思想：當前元素設定樣式，其余的兄弟元素清除樣式，
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隱式迭代

// 遍歷內部 DOM 元素（偽陣列形式存盤）的程序就叫做隱式迭代，
// 簡單理解：給匹配到的所有元素進行回圈遍歷，執行相應的方法，而不用我們再進行回圈，簡化我們的操作，方便我們呼叫，
$('div').hide();  // 頁面中所有的div全部隱藏，不用回圈操作

鏈式編程

// 鏈式編程是為了節省代碼量，看起來更優雅，
$(this).css('color', 'red').sibling().css('color', '');

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

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

? 代碼實作略，(詳情參考源代碼)

1.4. jQuery 樣式操作

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

1.4.1. 方法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. 方法2: 設定類樣式方法

? 作用等同于以前的 classList，可以操作類樣式，注意操作類里面的引數不要加點，

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

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

// 2.洗掉類
$("div").removeClass("current");

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

? 注意：

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

1.4.3. 案例：tab 欄切換

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

? 代碼實作略，(詳情參考源代碼)

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

? 淡入淡出影片，常見有四個方法：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.4 自定義影片

? 自定義影片非常強大，通過引數的傳遞可以模擬以上所有影片，方法為：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.5 停止影片排隊

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

? 停止影片排隊的方法為：stop() ;

stop() 方法用于停止影片或效果，
stop() 寫到影片或者效果的前面，相當于停止結束上一次的影片，

? 總結: 每次使用影片之前，先呼叫 stop() ,在呼叫影片，

1.5.6. 事件切換

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

語法

hover([over,]out)     // 其中over和out為兩個函式

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

hover事件和停止影片排列案例

<body>
    <ul >
        <li>
            <a href="https://www.cnblogs.com/zk2020/p/#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="https://www.cnblogs.com/zk2020/p/#">微博</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.7. 案例：王者榮耀手風琴效果

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

? 代碼實作略，(詳情參考源代碼)

1.6. 今日總結

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/308403.html

標籤：jQuery

上一篇：百度地圖API——多點路徑連線問題

下一篇：Ajax的使用

jQuery-01

day01 - jQuery

1.1. jQuery 介紹

1.1.1 JavaScript 庫

1.1.2 jQuery的概念

1.1.3 jQuery的優點

1.2. jQuery 的基本使用

1.2.1 jQuery 的下載

1.2.2. 體驗jQuery

1.2.3. jQuery的入口函式

1.2.4. jQuery中的頂級物件$

1.2.5. jQuery 物件和 DOM 物件

1.2.6. jQuery 物件和 DOM 物件轉換

1.3. jQuery 選擇器

1.3.1. 基礎選擇器

1.3.2. 層級選擇器

1.3.3. 篩選選擇器

1.3.4 知識鋪墊

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

1.4. jQuery 樣式操作

1.4.1. 方法1: 操作 css 方法

1.4.2. 方法2: 設定類樣式方法

1.4.3. 案例：tab 欄切換

1.5. jQuery 效果

1.5.1. 顯示隱藏

1.5.2. 滑入滑出

1.5.3 淡入淡出

1.5.4 自定義影片

1.5.5 停止影片排隊

1.5.6. 事件切換

1.5.7. 案例：王者榮耀手風琴效果

1.6. 今日總結