第26課
ps：輪播插件最后一張圖片與第一張圖片切換不自然，插件并不完美；代碼注重新手推敲過程，非新手可路過。

一些面試題

• What does a doctype do?
  doctype 有什么作用

• What's the difference between standards mode and quirks mode?
  瀏覽器的標(biāo)準(zhǔn)模式和怪異模式（以及兼容模式）

• What's the difference between HTML and XHTML?
  HTML 和 XHTML 的區(qū)別是什么？

答案：解答

jQuery插件基礎(chǔ)

什么是jQuery插件

對 jQuery 的功能的擴(kuò)展
1.jQuery 不能操作 Cookie，你只能用 DOM API
2.jQuery 不能方便的生成輪播組件
3.其他 jQuery 沒有的功能……
我們可以通過給 jQuery 和 jQuery.fn 添加方法，來達(dá)到擴(kuò)展 jQuery 的目的

擴(kuò)展jQuery

1. 給 jQuery 添加方法
   http://js.jirengu.com/qeruluqine/1/edit
   通過 jQuery.xxx 調(diào)用
2. 給 jQuery.fn 添加方法
   jQuey.fn===jQuery.prototype
   http://js.jirengu.com/laq/1/edit?html,css,js,output
   通過 $node.xxx 調(diào)用

詳細(xì)原理會在進(jìn)階部分闡述
1. 為什么給 fn 添加方法就能在 $node 上調(diào)用？
2. 為什么 this 總在變？

插件一：回到頂部

結(jié)合 CSS 與 jQuery 知識

需求：點擊回到頂部按鈕，滾動到頂部

Demo 1 http://js.jirengu.com/kaw/9/edit?html,css,js,output
插件提供者幫助使用者準(zhǔn)備 HTML
Demo 2http://js.jirengu.com/suf/1/edit?html,css,js,output
使用者自備 HTML
提示：jQuery對象用jQuery再包一遍還是jQuery對象，但不是原內(nèi)存，不絕對相對。

可優(yōu)化點：

1. 提供 template 選項
2. 提供動畫選項
3. 檢測 window scroll
4. 還有很多可以優(yōu)化，等待你去發(fā)掘……
   Demo 3 http://js.jirengu.com/lujuxadigu/2/edit?html,css,js
   知識點：c=a||b =>if(a){c=a}else{c=b}

插件二：手風(fēng)琴

效果：

點擊任意 item，該 item 展開，其他 item 折疊

思路：

1. CSS中隱藏img=>display:none;或者h(yuǎn)eigh:0;
2. CSS中添加.selected:block;或者h(yuǎn)eigh:200px;
3. JS中給被點擊的元素addClass（'selected'）,并移除兄弟元素siblings('.selected').removeClass('selected')

問題：多組手風(fēng)琴同一頁面，如何功能避免相互干擾？

答：1. 盡量通過this，做到由里往外找API
    2. 不要操作樣式，只操作className

技巧：如何知道this值？

答：1. console.log(this)
    2. 看jQuery源碼
    3. 看jQuery文檔

可優(yōu)化點：

• 添加動畫
• HTML 結(jié)構(gòu)更靈活（不一定是子節(jié)點）
  手風(fēng)琴代碼

插件三：輪播

重點：

1. 對內(nèi)容結(jié)構(gòu)（HTML）進(jìn)行思考
2. 對樣式（CSS）進(jìn)行思考
3. 對行為（JS）進(jìn)行思考

思路：

1. 一個列表滾來滾去
2. 將消失的元素插入末尾
3. 只顯示一個元素，其他元素隱藏

過程：

用戶需求：

1. 用戶提供：html=>div.arts>div.pic*n
2. 調(diào)用slides（{width: ,height: ,auto:true}）

插件提供者編寫過程：

1. 定義$.fn.slides()方法。

$.fn.slides=function(){}

2. 在方法中拿到arts。

var $arts=this.eq(0)

1. 在div.pic外包一個div.list,并設(shè)置$pics的CSS屬性

$pics=$arts.children().wrapAll('<div class=list></>').css({float:'left'})

1. 在div.list外包一個div.viewpoint，并編寫$list、$viewpoint的CSS屬性

$list=$arts.children().wrapAll('<div class=viewpoint>/div>') .css({position:'relative',left:0,overflow:'hidden',width:$pics.length*options.width})
$viewpoint=$list.parent().css({width:options.width})

5. 添加按鈕，并實現(xiàn)其功能。構(gòu)造prev()/next()函數(shù)

var $prev=$('<button>prev</button>').appendTo($arts) $prev.on('click',function(){$list.animate({left:'+='+options.width})}) 同理得“next”按鈕 var prev=function({$list.animate({left:'+='+options.width})} $prev.on('click',function(){prev()})

6. 聲明current=0，表示第幾張。聲明timer，表示自動播放功能，聲明hover=false，表示圖片被懸停狀態(tài)。修改prev()。

var current=0;var timer;var hover=false; var prev=function(){var left=-(current-1)*options.width; $list.animate({left:left},function(){current-=1})}

7. 構(gòu)造go()函數(shù)，注意：animate()中回調(diào)函數(shù)function(){current=index}

`var go=function(index){var left=-index*options.width;

$list.animate({left:left},function(){current=index})}
var prev=function(){go(current-1)}`

8. 控制邊界張數(shù),go()函數(shù)中添加if語句，判斷index<0和index>$pics.length-1

var go=function(){ if(index<0){index=$pics.length-1}; if(index>$pics.length-1){index=0};...}

9. 自動播放功能，setInterval(function(){},2000)

if(auto===true){timer=setInterval(function(){next()},2000)}

10. 懸停功能，構(gòu)造autoplay()函數(shù)

var autoplay=function(){timer=setInterval(function(){next()},2000)} $pics.on('mouseenter',function(){window.clearInterval(timer);hover=true}) $pics.on('mouseleave',function(){autoplay();hover=false})

11. 按鈕與自動播放功能斷點問題,hover狀態(tài)判斷autoplay(),在go()函數(shù)中添加if語句判斷；思考：在autoplay()函數(shù)中判斷斷點問題的可行性？

var go=function(){ if(timer){window.clearInterval(timer)}; if(!hover){autoplay()};...}

12. stop(true,true).animate(...),處理多組arts問題

var $arts=this $arts.each(function(){ var $art=$(this) 將上述代碼放入，并修改其中$arts=>$art })

輪播代碼
面向?qū)ο筝啿ゲ寮?/a>