目录:
1.基本JQ扩展插件js的格式
2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.click()同理
3.对JQ自身的方法扩展,调用类似于$.ajax();
一、基本JQ扩展插件的格式
一个扩展插件的格式一般是:
(function($){.........})(jQuery); 当然,为了防止压缩合并等操作时,它前面的js代码没有结束分号而引起错误,这里可以在前面加个;就是: ;(function($){.........})(jQuery); 传入参数可以有多个,比如: ;(function($, window,document,undefined){.........})(jQuery,window, document);
引用这种写法的插件时,务必要在引入jquery本身之后,再引入插件。
二、对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod()
类似于.click(),.show()这种调用方式的方法。。属于对jQuery.fn的扩展,所以,扩展自己的方法,这样写:
$.fn.extend({
myMethod: function () {
//用this可以拿到调用该方法的jq dom元素
//do your work
}
});
或者:
$.fn.myMethod = function(){
//用this可以拿到调用该方法的jq dom元素
//do your work
}; $("#dd").click();
例如:
封装一个方法:alertWhileClick,点击input时控制台打印出当前input输入框的内容
$.fn.alertWhileClick = function(){
$(this).click(function () {
console.log($(this).val());
});
调用:
$("#demo1Input").alertWhileClick();
试一下:
https://hamupp.github.io/gitblog/app/jquery/extendDemo.html
二、对JQ自身的扩展,调用如$.ajax()
$.extend({
myMethod: function (param1, param2....需要传入的参数) {
//do your work }
});
例如扩展一个得到最大最小值的方法:
$.extend({
min: function (a, b) {
//do your work
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
}
});
调用如下:
var result = $.max(10,20);//得到10和20中最大的树