What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
簡單點就是用在前端上的JS，是一個Javascript函數庫，裏面封裝了js對頁面的所有操作。
在使用jQuery之前要到官網http://jquery.com/下載jQuery的文件，現在最新版本是jquery-3.1.1.js，要把它放到我們的項目中，在jsp中才可以使用它。
入門
由於初次學習jQuery，所以今天的代碼都是很簡單的。
one.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技術</title>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<script type="text/javascript">
//jQuery核心函數1：jQuery(callback) 頁面一加載完就立即執行回掉函數callback
//該方式的功能類似於:window.οnlοad=function(){....}
jQuery( function(){
//jQuery核心函數2：選擇頁面上的元素 jQuery([sel,[context]]) 功能：根據選擇器(參數sel)選中頁面中的元素，並把它轉換成jQuery對象，這樣就可以調用jQuery中的方法了
jQuery("#btn1").click( function(){
alert("Hello World");
});
});
//利用別名$
$(function(){
$("#btn2").click(function(){
alert("一般都是使用別名 '$()'.");
});
});
//$(fn)和window.load=fn的區別：jQuery是添加fn事件(可重複添加，順序執行),而後者則是將當前fn事件來替換掉舊的事件
$(function(){
$("#btn1").click(function(){
alert("第二個fn ...");
});
});
</script>
</head>
<body>
<button id="btn1">--btn1--</button><br><br><br>
<button id="btn2">--btn2--</button><br><br><br>
</body>
</html>
結果圖：
two.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技術</title>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
</head>
<body>
<button id="btn1">--btn1--</button><br><br><br>
<button >--按鈕2--</button><br><br><br>
<button >--按鈕3--</button><br><br><br>
<script type="text/javascript">
$(function(){
var btn=$("#btn1");
btn.click(function(){
//學習設置一個頁面元素的屬性
$("button").attr("disabled","disabled");//元素選擇器 選擇所有<button>標籤
alert("噔噔...");
alert("噔噔...噔噔噔噔");
$("button").removeAttr("disabled");//從每一個匹配的元素中刪除一個屬性
});
});
</script>
</body>
</html>
結果：
three.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery技術</title>
<style type="text/css">
div{
width: 60%;
height: 150px;
background: yellow;
margin: 10px;
}
</style>
<script type="text/javascript" src="<c:url value='/js/jquery-3.1.0.js' />"></script>
<script type="text/javascript">
/*jQuery選擇器和CSS的一樣,如：
1. "#"爲id選擇器
2. "E"爲元素選擇器
3. "E E2"爲包含選擇器
4. "."爲類選擇器
5. "input[name='age']"屬性選擇器
6. ":"冒號選擇器
*/
$(function(){
//1. "#"爲id選擇器
$("#btn1").click(function(){
//2. "E"爲元素選擇器
$("#d1").html("這裏是div1......");//會把id爲"#d1"中的所有html內容替換
$("div:first").html("看，，下雪了....");
$("div:eq(2)").html("..................");//eq(index)獲取第N個元素，index>=0,從0算起;index<0,從最後一個元素開始倒數.
//3. "E E2"爲包含選擇器
//$("div p").html("包含選擇器演示......");
$("#d1~div").html("今天天氣不錯...");//prev ~ siblings 匹配 prev 元素之後的所有 siblings 元素(找到所有同輩的 元素,本身不算)
//4. "."爲類選擇器
$(".fd1").css("background","blue").html("類選擇器").css("border","1px solid red");
//5. "input[name='age']"屬性選擇器
var text=$("input[name='name']").val();//選擇name值爲"name"的<input>標籤，並獲取其中的值
//alert(text);
$("input[name='age']").val("22");//設置值
//6. ":"冒號選擇器
var len=$(":input").length;
alert(len);
});
});
</script>
</head>
<body>
<input type="button" value="演示jQuery選擇器" id="btn1">
<div id="d1">
<p>div1----ppppppppp</p>
</div>
<div id="d2">
<p>div2----ppppppppp</p>
</div>
<div id="d3">
<p>div3----ppppppppp</p>
</div>
<div id="d4">
<b>bold
<p>div4----ppppppppp</p>
</b>
</div>
<form>
<div class="fd1">aaaa</div>
Name:<input type="text" name="name"/>
Age: <input type="text" name="age"/>
</form>
</body>
</html>
未點擊按鈕之前：
點擊按鈕之後：
