jQuery公告栏文字滚动插件

jQuery插件

关于jQuery插件,http://www.cnblogs.com/ajianbeyourself/p/5815689.html 这篇文章写得真心不错

(1)通过$.extend()来扩展jQuery  (2)通过$.fn 向jQuery添加新的方法

方法一仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($('#example').myfunction()),因此它无法利用jQuery强大的选择器带来的便利,要处理DOM元素以及将插件更好地运用于所选择的元素身上(jQuery实例上),还是需要使用第二种开发方式。

插件开发方法

简单举例

(function($){
	$.fn.myLink = function(options){
		var defaults = {
			'color' : '#333',
			'fontSize' : '14px'
		};
		var settings = $.extend({},defaults,options);

		this.each(function(){
			$(this).append(' ' + $(this).attr('href'));
		});

		return this.css({
			'color': settings['color'],
			'fontSize': settings['fontSize']
		});
		
	};
})(jQuery);

(1)把 jQuery 传递给 IIFE(立即调用函数),并通过它映射成 $ ,这样就避免了在执行的作用域里被其它库所覆盖。

(2)往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。

(3)在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。this指代jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。

(4)Query一个时常优雅的特性是支持链式调用,选择好DOM元素后可以不断地调用其他方法。要让插件不打破这种链式调用,只需return一下this即可。

(5)在处理插件参数的接收上,通常使用jQuery的extend方法。在插件里定义一个保存插件参数默认值的对象(defaults),使用settings = $.extend({},defaults,options);同时将接收来的参数对象(options)合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。

文字滚动插件

代码                     DEMO

你可能感兴趣的:(JavaScript学习笔记)