jQuery插件机制

jQuery 有两种语法：
一、$(selector).action() jQuery的基本语法

二、($ . ) jQuery工具 语法
例如：
$.each 遍历对象和数组
$.isArray 判断一个数据是否是数组，返回一个布尔值
$.merge 合并数组
$.type 检测数据类型

jQuery的插件机制(这也是jQuery经久不衰的原因)

$.extend()
用来在jQuery命名空间添加函数
它是jQuery的核心函数
jQuery所有的工具 都是用这个方法来实现的 $.ajax $.get

1. $.extend 给jQuery添加工具

$.extend({PI: 3.14,max: function() {return Math.max.apply(Math, arguments);}});console.log($.PI);//打印结果3.14console.log($.max(4124, 56, 55, 1, 22, 43345, 234, 1, 13)); //打印结果43345

2. 合并对象
将后传入的对象的属性 合并到 第一个对象
（后传入的对象不发生改变，改变的是第一个对象）
如果后面对象的属性名 于前面的对象相同 则覆盖

var a = {username: \'zhangsan\',}var b = {age: 20,username: \'lisi\'}console.log($.extend( a, b ));//打印结果{username: \"lisi\", age: 20}

这是个浅拷贝 涉及引用类型时，直接赋值地址

当然还有深拷贝的情况，使用 extend进行对象属性合并时，第一个参数传入布尔值true，表示的是深拷贝，不再赋值地址，堆中的引用类型数据也同样拷贝走

接下来讲一下 $.fn.extend()

console.log($.extend === $.fn.extend);//结果为true

虽然打印的结果显示true，其实两个是不一样的东西

$ .fn.extend()： 在jQuery原型对象上扩展方法
思考：$.fn是什么？
回答：是jquery的原型

console.log($.fn);

打印结果为：

那么我们就可以在$.fn.extend()内封装属性或方法，然后通过实例访问原型上的属性或方法

举个例子：

封装一个选项卡（tabs）插件：
首先DOM结构必须是以这样的形式

类名可以随意

封装的jquery.tabs.js插件内容

!function($){//接受jQuery对象$.fn.extend({tabs:function(options){let defaults={//设置默认参数event:\'click\',btn:\'actived\',content:\'show\'};$.extend(defaults,options);//合并对象// console.log(this);//这里的this指代的就是实例化对象//是一个jQuery对象---$(\'#tabs\')let oBtn=this.children(\'ul\').children(\'li\');let oDiv=this.children(\'div\');oBtn.on(defaults.event,function(){let index=oBtn.index(this);//点击的li的索引$(this).addClass(defaults.btn).siblings().removeClass(defaults.btn);oDiv.eq(index).addClass(defaults.content).siblings().removeClass(defaults.content);})}})}(jQuery);//传jQuery对象

在外面直接$(’#tabs’).tabs();调用即可