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.14
console.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();调用即可