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 () { ...
}) ;
$(document
).ready(function(){...
});
? 總結：
等著 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。相當于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。更推薦使用第一種方式。
1.2.4. jQuery中的頂級對象$
$是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ 。$是jQuery的頂級對象，相當于原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title><script src="jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div></div><script>jQuery(function() {jQuery('div').hide();});</script>
</body></html>
1.2.5. jQuery 對象和 DOM 對象
? 使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結如下 :
用原生 JS 獲取來的對象就是 DOM 對象jQuery 方法獲取的元素就是 jQuery 對象。jQuery 對象本質是： 利用$對DOM 對象包裝后產生的對象（偽數組形式存儲）。
注意：
只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title><script src="jquery.min.js"></script><style>div {width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div></div><span></span><script>var myDiv = document.querySelector('div'); var mySpan = document.querySelector('span'); console.dir(myDiv);$('div'); $('span'); console.dir($('div'));</script>
</body></html>
1.2.6. jQuery 對象和 DOM 對象轉換
? DOM 對象與 jQuery 對象之間是可以相互轉換的。因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對象轉換為DOM對象才能使用。
var box
= document
.getElementById('box');
var jQueryObject
= $(box
);
var domObject1
= $('div')[0]
var domObject2
= $('div').get(0)
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><meta http
-equiv
="X-UA-Compatible" content
="ie=edge"><title
>Document
</title
><script src
="jquery.min.js"></script
>
</head
><body
><video src
="mov.mp4" muted
></video
><script
>var myvideo
= document
.querySelector('video');$('video')[0].play()$('video').get(0).play()</script
>
</body
></html
>
總結：實際開發比較常用的是把DOM對象轉換為jQuery對象，這樣能夠調用功能更加強大的jQuery中的方法。
1.3. jQuery 選擇器
? 原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統一標準。
1.3.1. 基礎選擇器
$("選擇器")
?
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中的通過一個節點找另外一個節點，父、子、兄以外有所加強。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title><script src="jquery.min.js"></script>
</head><body><ol><li>我是ol 的li
</li><li>我是ol 的li
</li><li class="item">我是ol 的li
</li><li>我是ol 的li
</li><li>我是ol 的li
</li><li>我是ol 的li
</li></ol><ul><li>我是ol 的li
</li><li>我是ol 的li
</li><li>我是ol 的li
</li><li>我是ol 的li
</li><li>我是ol 的li
</li><li>我是ol 的li
</li></ul><div class="current">俺有current
</div><div>俺木有current
</div><script>$(function() {$("ol .item").siblings("li").css("color", "red");var index = 2;console.log($("div:first").hasClass("current"));console.log($("div:last").hasClass("current"));});</script>
</body></html>
偏重于記憶，演示代碼略。
案例：新浪下拉菜單：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>新浪下拉菜單
</title><style type="text/css">* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}.nav {width: 402px;height: 50px;border: 1px solid #ccc;margin: 200px auto;} .nav>li {float: left;width: 100px;height: 50px;text-align: center;}.nav>li:hover {background-color: #FFC0CB;}.nav>li a {display: block;height: 50px;line-height: 50px;}.dropdown {display: none;}.dropdown>li {width: 100px;height: 50px;line-height: 50px;border: 1px solid #FFC0CB;border-top: 0;}</style><script src="./js/jquery-3.5.0.js"></script></head><body><ul class="nav"><li><a href="#">微博
</a><ul class="dropdown"><li><a href="">私信
</a></li><li><a href="">評論
</a></li><li><a href="">@我
</a></li></ul></li><li><a href="#">微博
</a><ul class="dropdown"><li><a href="">私信
</a></li><li><a href="">評論
</a></li><li><a href="">@我
</a></li></ul></li><li><a href="#">微博
</a><ul class="dropdown"><li><a href="">私信
</a></li><li><a href="">評論
</a></li><li><a href="">@我
</a></li></ul></li><li><a href="#">微博
</a><ul class="dropdown"><li><a href="">私信
</a></li><li><a href="">評論
</a></li><li><a href="">@我
</a></li></ul></li> </ul><script type="text/javascript">$(function() {$(".nav>li").mouseover(function() {$(this).children("ul").show();})$(".nav>li").mouseout(function() {$(this).children("ul").hide();})})</script></body>
</html>
1.3.4 知識鋪墊
$('div').css('屬性', '值')
$(this).css(“color”
,”red”
);
$(this).siblings(). css(“color”
,””
);
$('div').hide();
$(this).css('color', 'red').sibling().css('color', '');
1.3.5 案例：淘寶服飾精品案例
思路分析:
1.核心原理：鼠標經過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其余的圖片隱藏。
2.需要得到當前小li 的索引號，就可以顯示對應索引號的圖片
3.jQuery 得到當前元素索引號 $(this).index()
4.中間對應的圖片，可以通過 eq(index) 方法去選擇
5.顯示元素 show() 隱藏元素 hide()
? 代碼實現:
<!DOCTYPE html
>
<html
><head
><meta
charset="utf-8"><title
>淘寶精品服飾案例
</title
><script src
="./js/jquery-3.5.0.js"></script
><style
type="text/css">* {margin:
0;padding:
0;box
-sizing: border
-box
;}li {list
-style: none
;}a {
text-decoration: none
;}width:
302px
;height:
272px
;border:
1px solid pink
;margin:
200px auto
;}
.left {
float:
left;width:
100px
;}
.left li {width:
100%;height:
30px
;line
-height:
30px
;text-align: center
;border
-bottom:
1px solid pink
;border
-right:
1px solid pink
;}
.left li:hover {background
-color: pink
;}
.left li:
last-child {border
-bottom:
0;}
float:
left;width:
200px
;height:
272px
;}width:
200px
;height:
272px
;display: none
;}display: block
;}width:
200px
;height:
272px
;}
</style
></head
><body
><div id
="box"><ul class
="left"><li
><a href
="">女靴
</a
></li
><li
><a href
="">雪地靴
</a
></li
><li
><a href
="">冬裙
</a
></li
><li
><a href
="">呢大衣
</a
></li
><li
><a href
="">毛衣
</a
></li
><li
><a href
="">棉服
</a
></li
><li
><a href
="">女褲
</a
></li
><li
><a href
="">羽絨服
</a
></li
><li
><a href
="">牛仔褲
</a
></li
></ul
><div id
="content"><div class
="current"><a href
="#"><img src
="./img/女靴.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/雪地靴.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/冬裙.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/呢大衣.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/毛衣.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/棉服.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/女褲.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/羽絨服.jpg" alt
=""></a
></div><div><a href
="#"><img src
="./img/牛仔褲.jpg" alt
=""></a
></div></div></div><script
type="text/javascript">$
(function() {$
("#box>ul li").mouseover
(function() {var
index = $
(this
).index();$
("#box #content>div").eq
(index).show().siblings
("div").hide
();}
)}
)</script
></body
>
</html
>
1.4. jQuery 樣式操作
? jQuery中常用的樣式操作有兩種：css() 和 設置類樣式方法
1.4.1. 方法1: 操作 css 方法
? jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。
? 常用以下三種形式 :
var strColor
= $(this).css('color');
$(this).css(''color
'', ''red
'');
$(this).css({ "color":"white","font-size":"20px"});
? 注意：
1）css() 多用于樣式少時操作，多了則不太方便。
2）如果是復合屬性則必須采取駝峰命名法，如果值不是數字，則需要加引號
1.4.2. 方法2: 設置類樣式方法
? 作用等同于以前的 classList，可以操作類樣式， 注意操作類里面的參數不要加點。
? 常用的三種設置類樣式方法：
$("div").addClass("current");
$("div").removeClass("current");
$("div").toggleClass("current");
? 注意：
設置類樣式方法比較適合樣式多時操作，可以彌補css()的不足。原生 JS 中 className 會覆蓋元素原先里面的類名，jQuery 里面類操作只是對指定類進行操作，不影響原先的類名,相當于追加一個類名！。
1.4.3. 案例：tab 欄切換
思路分析:
1.點擊上部的li，當前li 添加current類，其余兄弟移除類。
2.點擊的同時，得到當前li 的索引號
3.讓下部里面相應索引號的item顯示，其余的item隱藏
? 代碼實現：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style><script src="jquery.min.js"></script>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介紹
</li><li>規格與包裝
</li><li>售后保障
</li><li>商品評價（50000）
</li><li>手機社區
</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容
</div><div class="item">規格與包裝模塊內容
</div><div class="item">售后保障模塊內容
</div><div class="item">商品評價（50000）模塊內容
</div><div class="item">手機社區模塊內容
</div></div></div><script>$(function() {$(".tab_list li").click(function() {$(this).addClass("current").siblings().removeClass("current");var index = $(this).index();console.log(index);$(".tab_con .item").eq(index).show().siblings().hide();});})</script>
</body></html>
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() {$("div").slideDown();})$("button").eq(1).click(function() {$("div").slideUp(500);})$("button").eq(2).click(function() {$("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() {$("div").fadeIn(1000);})$("button").eq(1).click(function() {$("div").fadeOut(1000);})$("button").eq(2).click(function() {$("div").fadeToggle(1000);});$("button").eq(3).click(function() {$("div").fadeTo(1000, 0.5);});});</script
>
</body
>
案例:高亮顯示
代碼演示：
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style><script src="jquery.min.js"></script><script>$(function() {$(".wrap li").hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {$(this).siblings().stop().fadeTo(400, 1);})});</script>
</head><body><div class="wrap"><ul><li><a href="#"><img src="images/01.jpg" alt="" /></a></li><li><a href="#"><img src="images/02.jpg" alt="" /></a></li><li><a href="#"><img src="images/03.jpg" alt="" /></a></li><li><a href="#"><img src="images/04.jpg" alt="" /></a></li><li><a href="#"><img src="images/05.jpg" alt="" /></a></li><li><a href="#"><img src="images/06.jpg" alt="" /></a></li></ul></div>
</body></html>
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:鼠標移到元素上要觸發的函數（相當于mouseenter）
- out:鼠標移出元素要觸發的函數（相當于mouseleave）
- 如果只寫一個函數，則鼠標經過和離開都會觸發它
hover事件和停止動畫排列案例(新浪下拉菜單案例優化)
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8"><title
>新浪下拉菜單
</title
><style type
="text/css">* {margin
: 0;padding
: 0;box
-sizing
: border
-box
;}li
{list
-style
: none
;}a
{text
-decoration
: none
;}.nav
{width
: 402px
;height
: 50px
;border
: 1px solid #ccc
;margin
: 200px auto
;}.nav
>li
{float
: left
;width
: 100px
;height
: 50px
;text
-align
: center
;}.nav
>li
:hover
{background
-color
: #
FFC0CB;}.nav
>li a
{display
: block
;height
: 50px
;line
-height
: 50px
;}.dropdown
{display
: none
;}.dropdown
>li
{width
: 100px
;height
: 50px
;line
-height
: 50px
;border
: 1px solid #
FFC0CB;border
-top
: 0;}</style
><script src
="./js/jquery-3.5.0.js"></script
></head
><body
><ul
class="nav"><li
><a href
="#">微博
</a
><ul
class="dropdown"><li
><a href
="">私信
</a
></li
><li
><a href
="">評論
</a
></li
><li
><a href
="">@我
</a
></li
></ul
></li
><li
><a href
="#">微博
</a
><ul
class="dropdown"><li
><a href
="">私信
</a
></li
><li
><a href
="">評論
</a
></li
><li
><a href
="">@我
</a
></li
></ul
></li
><li
><a href
="#">微博
</a
><ul
class="dropdown"><li
><a href
="">私信
</a
></li
><li
><a href
="">評論
</a
></li
><li
><a href
="">@我
</a
></li
></ul
></li
><li
><a href
="#">微博
</a
><ul
class="dropdown"><li
><a href
="">私信
</a
></li
><li
><a href
="">評論
</a
></li
><li
><a href
="">@我
</a
></li
></ul
></li
></ul
><script type
="text/javascript">$(function() {$(".nav>li").hover(function() {$(this).children("ul").stop().slideToggle();})})</script
></body
>
</html
>
1.5.7. 案例：王者榮耀手風琴效果
思路分析:
1.鼠標經過某個小li 有兩步操作：
2.當前小li 寬度變為 224px， 同時里面的小圖片淡出，大圖片淡入
3.其余兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出
? 代碼實現:
<!doctype html>
<html><head><meta charset="utf-8"><title>手風琴案例
</title><style type="text/css">* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}.king {width: 852px;margin: 100px auto;background: url(images/bg.png) no-repeat;overflow: hidden;padding: 10px;}.king ul {overflow: hidden;}.king li {position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}</style></head><body><script src="js/jquery.min.js"></script><script type="text/javascript">$(function() {$(".king li").mouseenter(function() {$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})});</script><div class="king"><ul><li class="current"><a href="#"><img src="images/m1.jpg" alt="" class="small"><img src="images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="images/l1.jpg" alt="" class="small"><img src="images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="images/c1.jpg" alt="" class="small"><img src="images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="images/w1.jpg" alt="" class="small"><img src="images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="images/z1.jpg" alt="" class="small"><img src="images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="images/h1.jpg" alt="" class="small"><img src="images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="images/t1.jpg" alt="" class="small"><img src="images/t.png" alt="" class="big"></a></li></ul></div>
</body></html>
1.6. 今日總結
總結
以上是生活随笔為你收集整理的jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
