jQuery类扩展和实例扩展
来源:互联网 发布:阿里云研究报告 编辑:程序博客网 时间:2024/06/05 02:32
jQuery开发插件的两种方式
最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验讲讲插件开发。jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法。第二种是对象扩展的方式开发插件,即jQuery对象添加方法。
类扩展的插件
类扩展的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类扩展的插件开发可以采用如下几种形式进行扩展:
1.添加全局函数
$.ltrim = function( str ) {
return
str.replace( /^\s+/,
""
);
};
调用方式
var
str=
" 去除左空格 "
;
console.log(
"去除前:"
+str.length+
"去除后:"
+$.ltrim(str).length);
2.添加多个全局函数
$.ltrim = function( str ) {
return
str.replace( /^\s+/,
""
);
};
$.rtrim = function( str ) {
return
str.replace( /\s+$/,
""
);
};
上面那种如果你写的全局函数比较少的情况下使用挺好,如果多的话建议使用 使用$.extend(object)
$.extend({
ltrim:function( str ) {
return
str.replace( /^\s+/,
""
);
},
rtrim:function( str ) {
return
str.replace( /\s+$/,
""
);
}
});
3.独立的命名空间
虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。
$.myPlugin={
ltrim:function( str ) {
return
str.replace( /^\s+/,
""
);
},
rtrim:function( str ) {
return
str.replace( /\s+$/,
""
);
}
};
使用独立的插件名,可以避免命名空间内函数的冲突,调用方式:
var
str=
" 去除左空格 "
;
console.log(
"调用前:"
+str.length+
"调用后:"
+$.myPlugin.ltrim(str).length);
对象扩展的插件
1.添加一个对象扩展方法
$.fn.changeColor=
function
() {
this
.css(
"color"
,
"red"
);
};
$.fn.changeFont=
function
() {
this
.css(
"font-size"
,
"24px"
);
};
调用方式:
$(
function
() {
$(
"a"
).showColor();<br> $(
"div"
).changeFont();
});
2.添加多个对象扩展方法
(
function
($){
$.fn.changeColor=
function
() {
this
.css(
"color"
,
"red"
);
};
$.fn.changeFont=
function
() {
this
.css(
"font-size"
,
"24px"
);
};
})(jQuery);
兼容写法(防止前面的函数漏写了;):
;(
function
($){
$.fn.changeColor=
function
() {
this
.css(
"color"
,
"red"
);
};
$.fn.changeFont=
function
() {
this
.css(
"font-size"
,
"24px"
);
};
})(jQuery);
上面都定义了一个jQuery函数,形参是$,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.
3. 使用$.fn.extend(object)
题外话,查看jQuery源码(版本1.11.1)可以看到:
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
......................
},
jQuery是一个封装得非常好的类,比如语句$("a") 会生成一个 jQuery类的实例。jQuery.fn.extend(object)实际上是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
$.fn.extend({
changeColor:
function
() {
this
.css(
"color"
,
"red"
);
},
changeFont:
function
() {
this
.css(
"font-size"
,
"24px"
);
}
});
介绍了基本是关于对象扩展的基础的用法,下面开发一个简单的类似于代码高亮的功能,如下:
(
function
($) {
$.fn.highlight =
function
(options) {
//插件参数的可控制性,外界可以修改默认参数
var
defaults=$.extend($.fn.highlight.defaults, options );
//遍历函数,然后根据参数改变样式
return
this
.each(
function
() {
var
elem = $(
this
);
var
markup = elem.html();
markup = $.fn.highlight.format( markup );
elem.html(markup);
elem.css({
color: defaults.color,
fontSize:defaults.fontSize,
backgroundColor: defaults.backgroundColor
});
});
};
//参数默认值
$.fn.highlight.defaults={
color:
"#556b2f"
,
backgroundColor:
"white"
,
fontSize:
"48px"
};
//格式化字体
$.fn.highlight.format =
function
( txt ) {
return
"<strong>"
+ txt +
"</strong>"
;
};
})(jQuery);
$(
function
() {
//调用插件
$(
"a"
).highlight({color:
"red"
,fontSize:
"24px"
});
});
- jQuery类扩展和实例扩展
- jQuery扩展实例方法和静态方法
- jQuery插件扩展实例
- Jquery注意事项(扩展和ajax)
- JS和JQuery扩展方法
- JQuery实例扩展,限制输入长度。
- 给jquery对象添加自定义方法和扩展jquery类
- 给jquery对象添加自定义方法和扩展jquery类
- JQuery 扩展
- jquery扩展
- jquery 扩展
- jquery 扩展
- Jquery 扩展
- jquery扩展
- jquery扩展
- Jquery扩展
- jquery扩展
- jQuery扩展
- 前端之js方法总结
- vue-router 页面传参的俩种方法
- apache/httpd 服务器开启rewrite模式总结 解决404错误
- 使用FlexboxLayout完成优雅的布局
- 深度学习(一)深度学习学习资料
- jQuery类扩展和实例扩展
- 速度收藏 | 100+大数据开源处理工具汇总
- configure脚本
- Linux下C语言TCP编程01
- 查看Mac的IP地址
- 二级配置器的实现部分源码剖析
- 互联网协议入门(二)
- day_10_进程管理
- JavaScript调用浏览器打印功能