jQuery插件使用

1.什么是jQuery插件？

往jquery类库里面去扩展方法，这类方法就是jquery插件。

2.json的三种格式

1 对象 2 列表/数组 3 混合模式（下面由代码演示）

3.$.extend和$.fn.extend！

//$.extend是用来扩充jQuery类属性或方法所用var e3={};//用后面的对象来扩充前面的对象$.extend(e3,i1);//如果两个对象里面有键是一样的 之前的会被后面的所覆盖 新的会扩充到里面去$.extend(e3,i1,i3);console.info(e3);//$.fn.extend是用来扩充jQuery实例属性或方法所用$.fn.extend({hello:function(){alert('上午好');}});$('#a1').hello();//通过选择器调取到实例的方法<a href="#" id='a1'>ene</a>

4.jQuery插件的添加。

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

首先添加插件命名规则：jquery.xxx.js 里面再写一个js文件是用来写$(function(){ }) 里面的代码外面这个$(function(){ }) 里可以调用这个方法还有一些css文件都可放入这里

下面写一个鼠标浮上去变颜色的例子：

当前jsp页面：<%@ include file="/jsp/head.jsp" %>里面已经提取了所有公用的那些引入jQuery文件多行集于一行。

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ include file="/jsp/head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type="text/javascript">//这边直接用标签调方法 里面传参$(function(){$('table').bgColor({yellow:'pnk',red:'green',green:'fen'});});</script>
</head>
<body>
<body><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>
</body>
</html>

js文件：

$(function(){//写一个默认的颜色var i={yellow:'yellow',red:'red',green:'green'}$.fn.extend({//使用return原因是让实例方法支持链编程 好比stringbufferbgColor:function(option){//把后面传的参数覆盖默认的参数$.extend(i,option);//有多个实例 所以需要遍历调用这个方法的实例//这里this指插件本身 可以看成一个jQuery实例return this.each(function(){//给默认值 eq下标第一个  gt匹配所有大于给定值的元素//this是当前元素 $("tr:eq(0)",this).addClass(i.yellow);$("tr:gt(0)",this).addClass(i.red);//添加动态效果$("tr:gt(0)",this).hover(function(){//鼠标附上去当前这个颜色变成后面设置的这个$(this).removeClass().addClass(i.green);},function(){//鼠标移开就变回去$(this).removeClass().addClass(i.red);});});}});});

效果如下：

有关jQuery插件就介绍到这啦。

jQuery插件使用相关推荐

jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
自己开发开源jquery插件--给jquery.treeview加上checkbox
很多时候需要把树状的数据显示除来,比如分类,中国省份.城市信息,等,因此这方面的javascript插件也有很多.比如性能优异的jquery.treeview和国人开发的功能强大的zTree. 我最近 ...
推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序 ...
动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
【JQUBAR1.1】jQuery 插件发布
[JQUBAR1.1]jQuery 插件发布 JQUBAR1.1 简介 2010-11-22在博客园发布了柱状图JQUBar1.0 jQuery 插件.现将该插件升级为1.1版本. 1.1版本修复了部 ...
240个jquery插件
240个jquery插件 http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ File uplo ...
基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
51 jQuery插件库
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery插件 jQuery功能比较有限,想要更复杂的特效功能,可以借助于jQuer ...
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件 1.轮播图样式上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用文件的目录路径为: 需要轮播图插件的 ...
jquery插件制作
jquery插件丰富,很多都是很好用的,最近学习了一下如何制作jquery插件,发现jquery插件制作其实很简单,这里介绍一下. jquery插件的基本格式: (function($){$.fn.t ...