版权声明:仅供学习 https://blog.csdn.net/qq_41304019/article/details/82789420
嘿嘿,小白又来了。今天我们来学习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页面效果图