作者:心若在梦就在_2012 | 来源:互联网 | 2022-03-30 05:55
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)"),该选择器首先会获取所有的
元素,然后隐式地遍历这些
元素,并逐个将这些
元素作为参数,连同括号里的“1”等一些参数一起传递给gt对应的选择器函数进行判断。如果返回true则保留,否则不保留,这样得到的结果就是一个符合要求的
元素的集合。
选择器的函数一共接受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
命名: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]} }); })(jQuery);
注:这里用+temp[0]、+temp[1]把字符串形式的数字转换成了数字 插件测试: http://demo.jb51.net/js/2012/jquery_demo/jQuery自定义选择器插件DEMO.html 小结 本文主要介绍了jQuery插件的种类,机制,并针对每种类型进行了实战,希望能对大家有所帮助。本人也是jQuery的初学者,欢迎大家拍砖。 参考书籍:《锋利的jQuery》(人民邮电出版社)
推荐阅读
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ...
[详细]
蜡笔小新 2023-12-09 17:40:33
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ...
[详细]
蜡笔小新 2023-12-13 10:50:43
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ...
[详细]
蜡笔小新 2023-12-12 14:56:31
本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
[详细]
蜡笔小新 2023-12-11 12:06:41
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ...
[详细]
蜡笔小新 2023-12-10 04:03:11
本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ...
[详细]
蜡笔小新 2023-12-09 17:59:12
本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ...
[详细]
蜡笔小新 2023-12-09 10:26:04
心若在梦就在_2012
这个家伙很懒,什么也没留下!