小白第二篇：jQuery外掛的使用和簡單介紹
阿新 • • 發佈：2018-11-13
嘿嘿，小白又來了。今天我們來學習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頁面效果圖
