jQuery 07 编写插件
来源:互联网 发布:虚拟机linux怎么上网 编辑:程序博客网 时间:2024/04/30 02:14
编写插件的目的是封装已经有的一系列方法或函数,以便在其他地方重复使用。jQuery插件主要分为3种类型:
1 对象方法的插件,将对象方法封装起来,通过选择器获取的jQuery对象进行操作,是最常见的一种插件。有相当一部分的jQuery的方法,都是通过这样方式插在内核上的,例如parent(),appendTo()。
2 全局函数的插件,可以将独立的函数加到jQuery命名空间之下。
3 选择器插件,个别情况下,会用到选择器插件。
jQuery插件的文件名推荐为jquery.[插件名].js
所有的对象方法都应当附加在jQuery.fn对象上,所有的全局函数都应到附加在jQuery对象本身上。
在插件内部,this指向的是当前通过选择器获取的jQuery对象
可以通过this.each来遍历所有元素
所有的方法或函数插件,都应当以分号结尾。为了更稳妥,甚至可以在插件头部先加上一个分号。
插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的数量。
避免在插件内部使用$作为jQuery对象的别名,应该使用完整的jQuery来表示。也可以用闭包方式。
常见的插件格式
;(function($){
//在此处编写jQuery插件代码
})(jQuery);
jQuery提供了两个用于扩展jQuery功能的方法,jQuery.fn.extend()和jQuery.extend()方法。
jQuery.extend() 经常用于设置插件方法的默认参数。
function(options){
//设置默认值
options=jQuery.extend()({
//设置默认值
options=jQuery.extend()({
odd:"odd", /* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
封装jQuery对象方法的插件
<script type="text/javascript">
//插件编写
;(function($) {
jQuery.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
//插件应用
$(function(){
$("div").click(function(){
var color = $(this).text();
$("div").color( color ); //设置所有的div的字体颜色
})
})
</script>
//插件编写
;(function($) {
jQuery.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
//插件应用
$(function(){
$("div").click(function(){
var color = $(this).text();
$("div").color( color ); //设置所有的div的字体颜色
})
})
</script>
<script type="text/javascript">
//插件编写
;(function($) {
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
options=$.extend({
odd:"odd", /* 偶数行样式*/
even:"even", /* 奇数行样式*/
selected:"selected" /* 选中行样式*/
},options);
$("tbody>tr:odd",this).addClass(options.odd);
$("tbody>tr:even",this).addClass(options.even);
$('tbody>tr',this).click(function() {
//判断当前是否选中
var hasSelected=$(this).hasClass(options.selected);
//如果选中,则移出selected类,否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked',!hasSelected);
});
// 如果单选框默认情况下是选择的,则高色.
$('tbody>tr:has(:checked)',this).addClass(options.selected);
return this; //返回this,使方法可链。
}
});
})(jQuery);
//插件应用
$(function(){
$("#table2")
.alterBgColor() //应用插件
.find("th").css("color","red");//可以链式操作
})
</script>
全局函数插件
<script type="text/javascript">
//插件编写
;(function($) {
$.extend({
ltrim : function( text ) {
return (text || "").replace( /^\s+/g, "" )
//插件编写
;(function($) {
$.extend({
ltrim : function( text ) {
return (text || "").replace( /^\s+/g, "" )
},
rtrim : function(text ) {
return (text || "").replace( /\s+$/g, "" )
}
});
})(jQuery);
//插件应用
$(function(){
$("#trimTest").val(
jQuery.trim(" test ") + "\n" +
jQuery.ltrim(" test ") + "\n" +
jQuery.rtrim(" test ")
);
})
</script>
rtrim : function(text ) {
return (text || "").replace( /\s+$/g, "" )
}
});
})(jQuery);
//插件应用
$(function(){
$("#trimTest").val(
jQuery.trim(" test ") + "\n" +
jQuery.ltrim(" test ") + "\n" +
jQuery.rtrim(" test ")
);
})
</script>
自定义选择器插件
jQuery的选择符解析器首先会使用一组正则表达式来解析选择器,然后针对解析出的每个选择符执行一个函数,称为选择器函数。最后根据这个选择器函数的返回值决定是否保留这个元素。
例如:$("div:gt(1)"),选择器首先会获取所有的<div>元素,然后隐式遍历这些元素,并逐个将这些<div>元素作为参数,连同括号里的 1 等参数,一起传递给gt对应的选择器函数进行判断。
:gt()选择器在jQuery源文件中的代码如下:
gt: function(a,i,m){
return i>m[3]-0;
}
选择器函数一共接受3个参数:
参数a,指向当前遍历到的DOM元素。
参数i,指向当前遍历的DOM元素的索引值,从0开始。
参数m,是有jQuery正则解析引擎进一步解析后的产物(用match匹配出来),是一个数组。
m[0],以上面的$("div:gt(1)")为例,是:gt(1)部分。
m[1],是选择器的引导符,上例中为 :
m[2],即例子中的gt,
m[3],即括号中的数据1
m[4],这个比较罕见,例如$("div:l(ss(dd))"),m[4]就指向了(dd)部分,此时m[3]的值是ss(dd)
<script type="text/javascript">
//插件编写
;(function($) {
$.extend(jQuery.expr[":"], {
between : function( a , i ,m ) {
var tmp=m[3].split(","); //将传递进来的m[3]以逗号为分隔符,切成一个数组
return tmp[0]-0<i && i<tmp[1]-0; //用tmp[0]-0可以转换为数字
}
});
})(jQuery);
//插件应用
$(function(){
alert("执行前");
$("div:between(2,5)").css("background","white");
alert("执行后");
})
</script>
- jQuery 07 编写插件
- 编写jquery扩展插件
- 编写jquery扩展插件
- JQuery编写插件
- jquery插件编写方法
- Jquery插件编写
- 编写jquery扩展插件
- 编写jquery插件
- jQuery插件编写
- 编写JQuery插件
- Jquery插件编写
- jquery插件编写
- jQuery插件编写
- jquery 插件编写教程
- jquery插件编写
- Jquery插件编写
- 如何编写jquery插件
- jquery 插件编写
- CF——#182div2B
- jQuery 05 表单操作/表格操作
- Android之条码扫描二维码扫描
- 关于Android Repo
- jQuery 06 Ajax
- jQuery 07 编写插件
- [LIS]Longest Increasing Sequence:nlogn算法和两种普通DP的实现
- Ubuntu下编译android的linux内核
- &和&&的区别
- java防止表单重复提交
- Android框架浅析之锁屏(Keyguard)机制原理
- 关于intentservice和handlerthread的一点小理解
- 杭电2015偶数求和
- Linux_查看正在运行的命令_top