jQuery插件使用
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
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原因是让实例方法支持链编程 好比stringbuffer bgColor: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插件就介绍到这啦。
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
最新文章
