Jquery 複習
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 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. 篩選選擇器
篩選選擇器，顧名思義就是在所有的選項中選擇滿足條件的進行篩選選擇。常見如下 :
案例程式碼
<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 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.7. 案例：王者榮耀手風琴效果
思路分析:
1.滑鼠經過某個小li 有兩步操作：
2.當前小li 寬度變為 224px， 同時裡面的小圖片淡出，大圖片淡入
3.其餘兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
程式碼實現略。(詳情參考原始碼)