jQuery之插件机制

博客信息

jQuery之插件机制

发布时间：『 2019-03-08 20:30』博客类别：前端框架阅读(718)

1. 插件机制简介

就是用jquery写的一些js代码，他能实现具体的功能，比如上传图片，弹出遮罩层，直接将js文件引入进页面就可以调用了，达成快速开发的效果。

2. json的三种格式

2.1 对象

{sid:'s01',sname:'zs'}

2.2 列表/数组

[1,3,4,5]

2.3 混合模式

{id:3,hobby:['a','b','c']}

2. $.extend和$.fn.extend

2.1 $.extend：对象的扩展(或继承)

$.extend(obj1,obj2,obj3[,...])

$.extend(obj1,obj2)

$.extend(obj1)/$.method=function(options){...};

2.2 $.fn.extend

$.fn.extend(obj1)//$.fn.method=function(options){...};

3. jQuery插件的添加

其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中

4. jQuery插件开发实例

4.1 命名

jquery.xxx.js

4.2 扩展实例方法

4.3 如何面向集合

4.4 如何多行集于一行

4.5 命名参数的写法

$.extend(defaults,options);

相关代码

jquery.table.css

@charset "UTF-8";
.fen {
	background: #ff66ff;
}

.yellow {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

jquery.table.js

$(function(){
	var defaults = {
			head : 'fen',
			out  : 'yellow',
			over : 'red'
	}
	$.fn.extend({
		//使用return的原因是让该实例方法支持链编程，好比stringbuffer
		bgColor:function(option){
			$.extend(defaults,option);
			//这里的this指的是插件本身，可以看成一个jquery实例。
			return this.each(function(){
				//this指的是当前元素
				$("tr:eq(0)",this).addClass(defaults.head);
				$("tr:gt(0)",this).addClass(defaults.out);
				
				//添加动态效果
				$("tr:gt(0)",this).hover(function(){
					$(this).removeClass().addClass(defaults.over);
				},function(){
					$(this).removeClass().addClass(defaults.out);
				});
			});
		}
	});

html中使用

$(function(){
		$("table").bgColor({
			head : 'yellow',
			out  : 'red',
			over : 'blue'
	});
		
})

<table id="t1" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>

	<table id="t2" border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>

小李飞刀_jQuery

关键字： jQuery

博主信息

javaxl_小李飞刀

(知识改变命运，教育改变生活)

按日志类别

按日志日期

友情链接