- 浏览: 65037 次
文章分类
最新评论
-
小色帝:
我是天才是打发
Jquery实现的Tabs页 -
小色帝:
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝:
1111而温热
Jquery实现的Tabs页
jQuery插件原来如此简单 jQuery插件的机制及实战
作者: 字体:[增加 减小] 类型:转载 时间:2012-02-07 我要评论
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件
jQuery插件的种类
1、封装对象方法
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如parent()方法,appendTo()方法等。
2、封装全局函数
可以将独立的函数加到jQuery命名空间下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法,都是jQuery内部作为全局函数的插件附加到内核上去的。
3、选择器插件
虽然jQuery的选择器十分强大,但在少数情况下,还是会需要用到选择器插件来扩充一些自己喜欢的选择器。
jQuery插件的机制
jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能。
jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种,jQuery.extend()用于扩展后两种插件。这两个方法都接受一个参数,类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。
编写jQuery插件的一些Tips
1、jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
2、所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。
3、在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
4、所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题
5、除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
6、利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。
jQuery插件结构
jQuery插件结构如下:
复制代码 代码如下:
;(function($){
/*这里放插件代码,可以将$作为jQuery的别名*/
})(jQuery);
封装jQuery对象方法插件实战
功能:设置选择的元素的颜色,获取选择的首个元素的颜色
命名:jquery.color.js
结构:
复制代码 代码如下:
;(function($){
$.fn.extend({
//这里写插件代码
});
})(jQuery);
思路:设置一个参数value,如果调用时传递了value这个参数,就是设置颜色,否则为获取颜色。获取和设置颜色可以用jQuery提供的css方法即可
完整代码:
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);
由于css()方法在获取颜色时已有取第一个元素的判断,所以这里直接用this.css("color")即可。
如果是一组插件,可以用如下写法:
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代码
},
"border":function(value){
//插件代码
},
"background":function(value){
//插件代码
}
});
})(jQuery);
插件测试: http://demo.jb51.net/js/2012/jquery_demo/封装jQuery对象方法插件Demo.html
封装全局函数插件实战
功能:单独去除左侧或单独去除右侧的空格
命名:jquery.lrtrim.js
结构:
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代码
},
rtrim:function(text){
//插件代码
}
});
})(jQuery);
思路:这类插件是在jQuery命名空间内部添加一个函数,直接用正则表达式即可。
完整代码:
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
插件测试: http://demo.jb51.net/js/2012/jquery_demo/封装全局函数jQuery插件Demo.html
自定义选择器插件实战
jQuery以其强大的选择器著称,那么jQuery的选择器的工作原理是什么呢?
jQuery的选择解析器首先会使用一组正则表达式来解析选择器,然后针对解析出的每一个选择符执行一个函数,称为选择函数。最后根据这个选择函数的返回值为true还是false来决定是否保留这个元素,这样就可以找到匹配的元素节点。
如$("div:gl(1)"),该选择器首先会获取所有的<div>元素,然后隐式地遍历这些<div>元素,并逐个将这些<div>元素作为参数,连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留,否则不保留,这样得到的结果就是一个符合要求的<div>元素的集合。
选择器的函数一共接受3个参数,形式如下:
复制代码 代码如下:
function (a,i,m){
//...
}
第一个参数为a,指的是当前遍历到的DOM元素。
第二个参数为i,指的是当前遍历到的DOM元素的索引值,从0开始。
第三个参数是m,它是由jQuery正则解析引擎进一步解析后的产物,是一个数组:其中最重要的一个是m[3],在$("div:gl(1)")中即为括号里的数字“1”。
在jQuery中已经有lt,gt和eq选择器,因此这里写一个介于两者之间(between)的选择器。
功能:选择索引值为a到b之间(a<b,a、b为正整数)的元素
命名:jquery.between.js
结构:
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代码
}
});
})(jQuery);
思路:在上面的三个参数中,m[3]为"a,b"的形式,因此把m[3]用","分隔,然后跟索引值i进行对比,如果i在m[3]表示的范围之间就返回true,否则为false
完整代码:
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
return +temp[0]<i&&i<+temp[1];
}
});
})(jQuery);
注:这里用+temp[0]、+temp[1]把字符串形式的数字转换成了数字
插件测试: http://demo.jb51.net/js/2012/jquery_demo/jQuery自定义选择器插件DEMO.html
小结
本文主要介绍了jQuery插件的种类,机制,并针对每种类型进行了实战,希望能对大家有所帮助。本人也是jQuery的初学者,欢迎大家拍砖。
参考书籍:《锋利的jQuery》(人民邮电出版社)
前台实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>封装全局函数jQuery插件Demo</title>
<script src="/jslib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
function trimTest(){
alert("a"+jQuery.trim(" test ")+"b");
}
function ltrim(){
alert("a"+jQuery.ltrim(" test ")+"b");
}
function rtrim(){
alert("a"+jQuery.rtrim(" test ")+"b");
}
</script>
</head>
<body>
<input type="button" onclick="trimTest()" value="trim"/>
<input type="button" onclick="ltrim()" value="ltrim"/>
<input type="button" onclick="rtrim()" value="rtrim"/>
</body>
</html>
作者: 字体:[增加 减小] 类型:转载 时间:2012-02-07 我要评论
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件
jQuery插件的种类
1、封装对象方法
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如parent()方法,appendTo()方法等。
2、封装全局函数
可以将独立的函数加到jQuery命名空间下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法,都是jQuery内部作为全局函数的插件附加到内核上去的。
3、选择器插件
虽然jQuery的选择器十分强大,但在少数情况下,还是会需要用到选择器插件来扩充一些自己喜欢的选择器。
jQuery插件的机制
jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能。
jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种,jQuery.extend()用于扩展后两种插件。这两个方法都接受一个参数,类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。
编写jQuery插件的一些Tips
1、jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
2、所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身。
3、在插件头部加上一个分号,以免他人的不规范代码给插件带来影响。
4、所有的方法或函数插件,都应当以分号结尾,以免压缩时出现问题
5、除非插件需要返回的是一些需要获取的变量,插件应该返回一个jQuery对象,以保证插件的可链式操作。
6、利于jQuery.extend()方法设置插件方法的默认参数,增加插件的可用性。
jQuery插件结构
jQuery插件结构如下:
复制代码 代码如下:
;(function($){
/*这里放插件代码,可以将$作为jQuery的别名*/
})(jQuery);
封装jQuery对象方法插件实战
功能:设置选择的元素的颜色,获取选择的首个元素的颜色
命名:jquery.color.js
结构:
复制代码 代码如下:
;(function($){
$.fn.extend({
//这里写插件代码
});
})(jQuery);
思路:设置一个参数value,如果调用时传递了value这个参数,就是设置颜色,否则为获取颜色。获取和设置颜色可以用jQuery提供的css方法即可
完整代码:
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);
由于css()方法在获取颜色时已有取第一个元素的判断,所以这里直接用this.css("color")即可。
如果是一组插件,可以用如下写法:
复制代码 代码如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代码
},
"border":function(value){
//插件代码
},
"background":function(value){
//插件代码
}
});
})(jQuery);
插件测试: http://demo.jb51.net/js/2012/jquery_demo/封装jQuery对象方法插件Demo.html
封装全局函数插件实战
功能:单独去除左侧或单独去除右侧的空格
命名:jquery.lrtrim.js
结构:
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代码
},
rtrim:function(text){
//插件代码
}
});
})(jQuery);
思路:这类插件是在jQuery命名空间内部添加一个函数,直接用正则表达式即可。
完整代码:
复制代码 代码如下:
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
插件测试: http://demo.jb51.net/js/2012/jquery_demo/封装全局函数jQuery插件Demo.html
自定义选择器插件实战
jQuery以其强大的选择器著称,那么jQuery的选择器的工作原理是什么呢?
jQuery的选择解析器首先会使用一组正则表达式来解析选择器,然后针对解析出的每一个选择符执行一个函数,称为选择函数。最后根据这个选择函数的返回值为true还是false来决定是否保留这个元素,这样就可以找到匹配的元素节点。
如$("div:gl(1)"),该选择器首先会获取所有的<div>元素,然后隐式地遍历这些<div>元素,并逐个将这些<div>元素作为参数,连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留,否则不保留,这样得到的结果就是一个符合要求的<div>元素的集合。
选择器的函数一共接受3个参数,形式如下:
复制代码 代码如下:
function (a,i,m){
//...
}
第一个参数为a,指的是当前遍历到的DOM元素。
第二个参数为i,指的是当前遍历到的DOM元素的索引值,从0开始。
第三个参数是m,它是由jQuery正则解析引擎进一步解析后的产物,是一个数组:其中最重要的一个是m[3],在$("div:gl(1)")中即为括号里的数字“1”。
在jQuery中已经有lt,gt和eq选择器,因此这里写一个介于两者之间(between)的选择器。
功能:选择索引值为a到b之间(a<b,a、b为正整数)的元素
命名:jquery.between.js
结构:
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代码
}
});
})(jQuery);
思路:在上面的三个参数中,m[3]为"a,b"的形式,因此把m[3]用","分隔,然后跟索引值i进行对比,如果i在m[3]表示的范围之间就返回true,否则为false
完整代码:
复制代码 代码如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
return +temp[0]<i&&i<+temp[1];
}
});
})(jQuery);
注:这里用+temp[0]、+temp[1]把字符串形式的数字转换成了数字
插件测试: http://demo.jb51.net/js/2012/jquery_demo/jQuery自定义选择器插件DEMO.html
小结
本文主要介绍了jQuery插件的种类,机制,并针对每种类型进行了实战,希望能对大家有所帮助。本人也是jQuery的初学者,欢迎大家拍砖。
参考书籍:《锋利的jQuery》(人民邮电出版社)
前台实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>封装全局函数jQuery插件Demo</title>
<script src="/jslib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s+/g,"");
},
rtrim:function(text){
return (text||"").replace(/\s+$/g,"");
}
});
})(jQuery);
function trimTest(){
alert("a"+jQuery.trim(" test ")+"b");
}
function ltrim(){
alert("a"+jQuery.ltrim(" test ")+"b");
}
function rtrim(){
alert("a"+jQuery.rtrim(" test ")+"b");
}
</script>
</head>
<body>
<input type="button" onclick="trimTest()" value="trim"/>
<input type="button" onclick="ltrim()" value="ltrim"/>
<input type="button" onclick="rtrim()" value="rtrim"/>
</body>
</html>
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件,挺好用的,特意总结下 ... -
jquery常用事件(整理)
2017-02-13 17:47 233Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1160开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 299这个标题似乎有些奇怪,但这些都是合法有效的jQuery选择器。 ... -
type="button" ,"submit" 的区别(转)
2016-07-22 11:16 450type="button" ,"submit" 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 390Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 499【简介】 zTree 是利用 jQuery 的核心代码,实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 397本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 392jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 299jQuery.data() 所属分类:数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 378jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 540Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树(组织结构)
2016-05-15 11:19 2898最近看到不少人有类似的需求,实现组织架构的横向展开,显示,无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 367http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1031<!DOCTYPE html PUBLIC " ... -
Echarts 仪表盘实例
2016-05-14 00:51 5228HTML 首先引入Echarts,然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 535jQuery自定义类封装 jQuery自定义类封装: ( ... -
Jquery 选择器总结
2015-04-15 19:21 480jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 961工作半年了,接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 19871.find() 方法获得当前元素集合中每个元素的后代,通过选 ...
相关推荐
书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨,生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之一,能用最少的代码实现最多的功能。...
jQuery Mobile移动应用实战赠送15款jQuery Mobile插件
书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨,生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery 是目前最受欢迎的javascript/Ajax库之一,能用最少的代码实现最多的功能。 ...
书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨,生动描述了jQuery如何与其他工具和框架交互以及如何生成jQuery插件。jQuery是目前最受欢迎的JavaScript/Ajax库之一,能用最少的代码实现最多的功能。...
jquery是目前最受欢迎的javascript/ajax库之一,能用...书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨,生动描述了jquery如何与其他工具和框架交互以及如何生成jquery插件。 本书适合各层次web开发人员。
《jQuery Mobile权威指南》由资深专家根据jQuery Mobile最新版本撰写,是一本全面而系统的jQuery Mobile教程,对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的...
jquery是目前最受欢迎的javascript/ajax库之一,能用最少的代码实现最多的功能.... 书中紧紧地围绕"用实际的示例来解释每一个新概念"这一宗旨,生动描述了jquery如何与其他工具和框架交互以及如何生成jquery插件.
第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的使用;第三篇是跨平台APP实战篇,介绍了6个使用jQuery Mobile开发的实际APP;第四篇是发布和推广应用篇,介绍了在开发...
书中不仅详细讲解了jQuery的各种组件的功能特性和jQuery应用开发的流程与方法,而且还讲解了jQuery UI和jQuery Mobile等扩展及插件的用法,可以帮助读者迅速掌握jQuery的用法并具备实战能力。 书中精选了jQuery的...
[jQuery入门到精通]第11章:实战表单验证与自动完成提示插件.doc
第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加深入地探讨了jQuery的各种特性及一些高级技术。附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中...
实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI. 如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择. 使用插件有太多的坏处: 1....
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 ...从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
jQuery 是目前最受欢迎的 JavaScript/Ajax 库之一,能用最少的代码实现最多的...书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨,生动描述了 jQuery 如何与其他工具和框架交互以及如何生成 jQuery 插件。