第26课
ps：轮播插件最后一张图片与第一张图片切换不自然，插件并不完美；代码注重新手推敲过程，非新手可路过。
一些面试题
-
What does a doctype do?
doctype 有什么作用 -
What's the difference between standards mode and quirks mode?
浏览器的标准模式和怪异模式（以及兼容模式） -
What's the difference between HTML and XHTML?
HTML 和 XHTML 的区别是什么？
答案：解答
jQuery插件基础
什么是jQuery插件
对 jQuery 的功能的扩展
1.jQuery 不能操作 Cookie，你只能用 DOM API
2.jQuery 不能方便的生成轮播组件
3.其他 jQuery 没有的功能……
我们可以通过给 jQuery 和 jQuery.fn 添加方法，来达到扩展 jQuery 的目的
扩展jQuery
- 给 jQuery 添加方法
http://js.jirengu.com/qeruluqine/1/edit
通过 jQuery.xxx 调用 - 给 jQuery.fn 添加方法
jQuey.fn===jQuery.prototype
http://js.jirengu.com/laq/1/edit?html,css,js,output
通过 $node.xxx 调用
详细原理会在进阶部分阐述
1. 为什么给 fn 添加方法就能在 $node 上调用？
2. 为什么 this 总在变？
插件一：回到顶部
结合 CSS 与 jQuery 知识
需求：点击回到顶部按钮，滚动到顶部
Demo 1 http://js.jirengu.com/kaw/9/edit?html,css,js,output
插件提供者帮助使用者准备 HTML
Demo 2http://js.jirengu.com/suf/1/edit?html,css,js,output
使用者自备 HTML
提示：jQuery对象用jQuery再包一遍还是jQuery对象，但不是原内存，不绝对相对。
可优化点：
- 提供 template 选项
- 提供动画选项
- 检测 window scroll
- 还有很多可以优化，等待你去发掘……
Demo 3 http://js.jirengu.com/lujuxadigu/2/edit?html,css,js
知识点：c=a||b =>if(a){c=a}else{c=b}
插件二：手风琴
效果：
点击任意 item，该 item 展开，其他 item 折叠
思路：
- CSS中隐藏img=>display:none;或者heigh:0;
- CSS中添加.selected:block;或者heigh:200px;
- JS中给被点击的元素addClass（'selected'）,并移除兄弟元素siblings('.selected').removeClass('selected')
问题：多组手风琴同一页面，如何功能避免相互干扰？
答：1. 尽量通过this，做到由里往外找API
2. 不要操作样式，只操作className
技巧：如何知道this值？
答：1. console.log(this)
2. 看jQuery源码
3. 看jQuery文档
可优化点：
- 添加动画
- HTML 结构更灵活（不一定是子节点）
手风琴代码
插件三：轮播
重点：
- 对内容结构（HTML）进行思考
- 对样式（CSS）进行思考
- 对行为（JS）进行思考
思路：
- 一个列表滚来滚去
- 将消失的元素插入末尾
- 只显示一个元素，其他元素隐藏
过程：
用户需求：
- 用户提供：html=>div.arts>div.pic*n
- 调用slides（{width: ,height: ,auto:true}）
插件提供者编写过程：
- 定义$.fn.slides()方法。
$.fn.slides=function(){}
- 在方法中拿到arts。
var $arts=this.eq(0)
- 在div.pic外包一个div.list,并设置$pics的CSS属性
$pics=$arts.children().wrapAll('<div class=list></>').css({float:'left'})
- 在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})
- 添加按钮，并实现其功能。构造prev()/next()函数
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()})
- 声明current=0，表示第几张。声明timer，表示自动播放功能，声明hover=false，表示图片被悬停状态。修改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})}
- 构造go()函数，注意：animate()中回调函数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)}`
- 控制边界张数,go()函数中添加if语句，判断index<0和index>$pics.length-1
var go=function(){ if(index<0){index=$pics.length-1}; if(index>$pics.length-1){index=0};...}
- 自动播放功能，setInterval(function(){},2000)
if(auto===true){timer=setInterval(function(){next()},2000)}
- 悬停功能，构造autoplay()函数
var autoplay=function(){timer=setInterval(function(){next()},2000)} $pics.on('mouseenter',function(){window.clearInterval(timer);hover=true}) $pics.on('mouseleave',function(){autoplay();hover=false})
- 按钮与自动播放功能断点问题,hover状态判断autoplay(),在go()函数中添加if语句判断；思考：在autoplay()函数中判断断点问题的可行性？
var go=function(){ if(timer){window.clearInterval(timer)}; if(!hover){autoplay()};...}
- stop(true,true).animate(...),处理多组arts问题
var $arts=this $arts.each(function(){ var $art=$(this) 将上述代码放入，并修改其中$arts=>$art })
思考
- 如果传给插件的 jQuery 对象包含不止一个元素，怎么办？
- 插件的返回值是什么？
- 组件化：页面上可以存在插件的实例，它们之间互不影响
答案
- $node.each 遍历
- 返回当前 jQuery 对象，以实现链式调用
作业：slides.html
自己实现轮播插件（尽量从不同的思路来考虑）
网友评论