一些面试题

• 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

1. 给 jQuery 添加方法

详细原理会在进阶部分阐述

1. 为什么给 fn 添加方法就能在 $node 上调用？
2. 为什么 this 总在变？

2. 给 jQuery.fn 添加方法

http://js.jirengu.com/hix/1/edit 通过 jQuery.xxx 调用

http://js.jirengu.com/laq/1/edit?html,css,js,output 

通过 $node.xxx 调用

插件一：回到顶部

结合 CSS 与 jQuery 知识

Demo 1 http://js.jirengu.com/kaw/9/edit

插件提供者帮助使用者准备 HTML

Demo 2 http://js.jirengu.com/suf/1/edit?html,css,js,output

使用者自备 HTML

插件一：回到顶部

可优化点：

1. 提供 template 选项
2. 提供动画选项
3. 检测 window scroll
4. 还有很多可以优化，等待你去发掘……

插件二：手风琴

插件二：手风琴

http://js.jirengu.com/hoh/1/edit

效果：

点击任意 item，该 item 展开，其他 item 折叠

可优化点：

• 添加动画
• HTML 结构更灵活（不一定是子节点）

插件三：轮播

重点：

1. 对内容结构（HTML）进行思考
2. 对样式（CSS）进行思考
3. 对行为（JS）进行思考

http://js.jirengu.com/peq/7/edit

思路：

1. 一个列表滚来滚去
2. 将消失的元素插入末尾
3. 只显示一个元素，其他元素隐藏

思考

1. 如果传给插件的 jQuery 对象包含不止一个元素，怎么办？
2. 插件的返回值是什么？

3. 组件化：页面上可以存在插件的实例，它们之间互不影响

答案

1. $node.each 遍历
2. 返回当前 jQuery 对象，以实现链式调用

完

作业： slides.html

自己实现轮播插件（尽量不要和方方的思路一样）