-
通过$.fn向jQuery中添加新方法
-
通过$.widget应用jQuery UI部件工厂方式创建
通过$.extend()方式添加:
仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而已,所以调用添加的jQuery方法时,
直接通过$符号调用如:$.function(),而不需要选中dom元素$('#example').myfunction()
$.extend({ seyHello: function(name){ console.log('Hello '+(name?name:'Dude')+'!'); } }) $.seyHello(); $.seyHello('跃跃');
$.extend()方法定义一些辅助方法是比较方便的,比如定义一个console,输出特定格式的信息,定义一次后,
可以通过jQuery在程序中任何需要的地方调用它,
$.extend({ log : function(message){ var now = new Date(), y = now.getFullYear(),//js的月份从0开始 m = now.getMonth()+1, d = now.getDay(), h = now.getHours(), min = now.getMinutes(), s = now.getSeconds(), time = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s; console.log(time + ',' + message); } }); $.log('好晚了啊!');
通过$.fn上面添加一个方法
其中名称是插件的名称,然后插件的代码在这个方法里面展开,比如调用插件时,被调用的元素字体颜色改为红色。这里this代表jQuery选择器返回的集合,通过jQuery的each方法遍历处理集合的单个元素,在each方法内部,this指带的是普通的dom元素,如果调用jQuery的方法就需要用$重新包裹下,比如
<ul> <li> <a href="http://www.webo.com/liuwayong">我的微博</a> </li> <li> <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a> </li> <li> <a href="http://wayouliu.duapp.com/">我的小站</a> </li> </ul> <script type="text/javascript"> $.fn.myPlugin=function(options){ var defaults = { 'color' : 'red', 'fontSize' : '12px' }; //注意这里的extends方法,它会将多个对象进行合并如: //var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) //执行extend方法后 //result={name:"Jerry",age:21,sex:"Boy"} var setting = $.extend(defaults, options); return this.css({ 'color' : setting.color, 'fontSize' : setting.fontSize }) } $(function() { $('a').myPlugin({ 'color' : '#000', 'fontSize' : '50px' }); }) </script>