基于jQuery编写插件

    写在前面：相信很多使用过框架的人都不会再想着用jQuery库去找选择器，对DOM树进行复杂的操作了吧，但是用jQuery去扩展插件和方法还是很有用途的，最起码对自己的编程基础还是很有用的，jQuery库相对稳定，自己扩展出来的方法或函数方便后期维护和提高自己的开发效率。

    1. 我们最常接触的插件分为封装对象方法的插件和封装全局函数的插件两种。但是最主要的还是封装对象方法的插件，可以发挥出jQuery选择器的优势。

    对象方法应该写在jQuery.fn对象上，全局函数应该写在jQuery对象本身上。

    2. 再开发插件的时候一定要先理解闭包的含义，利用闭包的特性，可以避免内部声明的变量影响全局空间，也可以再插件内部使用$作为jQuery的别名，一般形式：

;（function($){
    //此处为jQuery插件代码
}）(jQuery); // 将jQuery作为实参传递给匿名函数

【注】：开始前的分号是为了更好的兼容性，所有的插件都应该以分号结尾，否则压缩的时候可能出现问题。所以开始前的分号是为了避免他人不规范的代码带来影响。

3.  扩展jQuery功能的两个方法：jQuery.fn.extend() 和 jQuery.extend()

;（function($){
    //此处为jQuery插件代码
    $.fn.extend({ 
        "sayName":function(opt){ 
             //插件代码
         }
    });
}）(jQuery); // 将jQuery作为实参传递给匿名函数

手风琴组件：

html调用：

  <h3>手风琴插件</h3>

  <div class="accordion">
    <h4>《西游记》简介</h4>
    <p class="active">《西游记》简介《西游记》简介《西游记》简介《西游记》简介</p>
    <h4>《三国志》简介</h4>
    <p>《三国志》简介《三国志》简介《三国志》简介《三国志》简介《三国志》简介《三国志》简介</p>
    <h4>《水浒传》简介</h4>
    <p>《水浒传》简介《水浒传》简介《水浒传》简介《水浒传》简介《水浒传》简介</p>
  </div>
  
  <script>
    $(".accordion").accordion();
  </script> 

组件js

//如果jQuery对象无效,就报错: 依赖于jquery.js
if(!window.jQuery){
  throw new Error("依赖于jquery.js");
}
//在jquery的原型对象中定义accordion方法
jQuery.fn.accordion=function(){
  //this->当前找到的父元素的jquery对象
  //为当前元素下的直接子元素h4绑定单击事件
  this.on("click","h4",function(e){
    var $target=$(e.target);//获得目标元素
    //为当前h4的下一个兄弟添加active类,再找兄弟中class为.active的，移除其class
    $target.next().addClass("active")
                  .siblings(".active")
                  .removeClass("active");
  })
}