嘿嘿，小白又来了。今天我们来学习jQuery插件的简单使用。

要会使用jQuery插件，首先我们需要了解什么是 json ?

1.JSON是JavaScript Object Notation的简写，它是一种JavaScript Object Notation的简写，它是一种轻量级的数据交换格式，容易阅读和编写，它基于JavaScript的一个子集；

2.JSON有三种数据的形式，分别是：

2.1：对象对象是一个无序的名称：值 “对” 集合。

列如：{sid:'s01',sname:'zs'}

2.2：数组是用一对中括号括在一组，中间用英文模式下的的逗号 ‘,’隔开的JavaScript的值。

列如：[1,3,4,5]

2.3：混合混用对象与数组组成的一个新对象。

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

下图展示代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
          //json对象的字符串体现形式
          var jsonObj1 = {
        		  sid:'s001',
        		  sname:'hudawushitang'
          };
          //控制台调试
          console.log(jsonObj1);

          //json的数组的字符串体现形式
          var jsonArray1 = [1,5,2,4,6];
          console.log(jsonArray1);

          //json混合模式的字符串体现形式
          var jsons  =  {id:3,hobby:['打球','听歌','上网']};
          console.log(jsons);
         
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>

游览器控制台调试如下：

$.extend与$.fn.extend的区别

1.首先我们先把jQuery看成了一个类，那么jQuery.extend()就是jQuery这个类

2.jQuery.extend(object)在jQuery这个类中添加类方法。（添加静态的方法 static）

3.jQuery.extend (object1,object2,object3)后面的对象扩充到前面的对象，但是前面被扩充的属性被后面扩充的覆盖，如果有新的属性，就会继续被扩充

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript">
       
          //$.extend是用来扩充jQuery类属性或者方法所用
          var jsonObj2 = {};	
          //后面的对象扩充第一个对象
          //之前已经扩充的属性会被后面的对象所给覆盖，如果对象有新的属性，会继续扩充
          $.extend(jsonObj2,jsonObj1,jsons);
          console.log(jsonObj2);
          
          //$.fn.extend是用来扩充jQuery实例的属性或方法所用
          $.fn.extend({
        	  sayHello:function(){
        		  alert('湖大五食堂');
        	  }
          });
          $("#yellow").sayHello();
</script>
</head>
<body>
<span id="yellow">yellow</span>
</body>
</html>

下面展示一个jQuery插件的鼠标放上变色的实例

jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/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">
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function (){
	$("table").bgColor({
		head : 'green',
		out : 'yello',
		orver : 'blue'
	});
})
</script>
</head>
<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>

JavaScript代码

$(function(){
	var defaults = {
			head : 'fen',
			out : 'yello',
			orver : '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.orver);
				},function(){
					$(this).removeClass().addClass(defaults.out);
				});
			});
		}
	});
 
})

css代码

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

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

jsp页面效果图

小白第二篇：jQuery插件的使用和简单介绍

要会使用jQuery插件，首先我们需要了解什么是 json ?

$.extend与$.fn.extend的区别

下面展示一个jQuery插件的鼠标放上变色的实例

猜你喜欢