当前位置: 首页 >> JavaScript/jQuery >> jQuery插件高级编程 >> 正文

jQuery插件高级编程

3年前 (2016-07-25)     作者:4869     分类:JavaScript/jQuery     阅读次数:1361     评论(0)    文章页统计代码
  1. 通过$.extend()来扩展jQuery

  2. 通过$.fn向jQuery中添加新方法

  3. 通过$.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>


除非注明,发表在“石马人山的博客”的文章『jQuery插件高级编程』版权归4869所有。 转载请注明出处为“本文转载于『石马人山的博客』原地址http://longlonggo.com/post/313.html
文章页分享代码

评论

发表评论   

昵称*

E-mail*(建议输入,以便收到博主回复的提示邮件)

网站