为jQuery写插件
2015-12-24 19:05
781 查看
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider。
如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成slider,比起slider($('#slider'))更贴近jQuery的链式调用写法,可读性和通用性更好些。
那么,我们也来为jQuery写插件。便于项目中的组件化。
方法是非常简单的,那就写一个测试的demo来作为基础的验证吧。
定义html,假设我们要把test div修改成宽高都是200px,背景色为红色的这么一个插件功能。
写一个名为test的插件函数,完成插件的功能。这里可以直接使用this,表示选择器选择的那个元素封装对象。
完成一个自执行函数,将jQuery传进去,关键就是把插件函数挂到jQuery.fn中去。
调用的时候,就用jQuery选择器选择test div后直接链式调用test插件函数即可。
如此,最简单的插件就完成了。
代码:
写一个名为test的插件函数,完成插件的功能。这里可以直接使用this,表示选择器选择的那个元素封装对象。
如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成slider,比起slider($('#slider'))更贴近jQuery的链式调用写法,可读性和通用性更好些。
那么,我们也来为jQuery写插件。便于项目中的组件化。
方法是非常简单的,那就写一个测试的demo来作为基础的验证吧。
定义html,假设我们要把test div修改成宽高都是200px,背景色为红色的这么一个插件功能。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id='test'></div> <script type='text/javascript' src="jquery-1.11.3.min.js"></script> <script type='text/javascript'> </script> </body> </html>
写一个名为test的插件函数,完成插件的功能。这里可以直接使用this,表示选择器选择的那个元素封装对象。
function test(){ this.css('background-color','red'); this.css('width', '200'); this.css('height', '200'); }
完成一个自执行函数,将jQuery传进去,关键就是把插件函数挂到jQuery.fn中去。
(function(jquery){ jquery.fn.test = test; })(jQuery);
调用的时候,就用jQuery选择器选择test div后直接链式调用test插件函数即可。
$('#test').test();
如此,最简单的插件就完成了。
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id='test'></div> <script type='text/javascript' src="jquery-1.11.3.min.js"></script> <script type='text/javascript'> function test(){ this.css('background-color','red'); this.css('width', '200'); this.css('height', '200'); } (function(jquery){ jquery.fn.test = test; })(jQuery); $('#test').test(); </script> </body> </html>
写一个名为test的插件函数,完成插件的功能。这里可以直接使用this,表示选择器选择的那个元素封装对象。
相关文章推荐
- 为jQuery写插件
- jQuery : eq() vs get()
- 手机日期插件jquery mobiscroll 实例
- jQuery的加载
- HTML Jquery;marquee标签
- jquery datatable 通过ajax读取数据实例
- jquery 练习题
- JQuery $.each用法
- 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据
- jquery 获取select框选中的值示例一则
- jQuery通过AJAX快速批量提交表单数据
- 如何用JQuery处理select标签
- JqueryEasyUI教程入门篇
- 如何通过jQuery获取input中的值
- JQuery里面金额的格式化
- 使用jquery的tmpl动态加载数据模板
- 类型:Jquery;问题:jquery调用后台带参数方法;结果:利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
- jquery submit()提交异步问题
- jquery 选择对象随心所欲,遍历数组更是易如反掌
- javascript与jquery中的this关键字用法实例分析