1. 什么是jquery
? JQuery 對 js 做了封裝。jQuery 由美國人 John Resig 創建,至今已吸引了來自世界各地的眾多,javascript 高手加入其 team。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。
它是輕量級的 js 庫(壓縮后只有 21k) ,還兼容各種瀏覽器 。jQuery 是一個快速的,簡潔的 javaScript,庫,使用戶能更方便地處理 HTML documents、events、實現動畫效果,并且方便地為網站提供 AJAX 交互。
jQuery 還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。
<br/>
2. jquery 的引入
JQuery 的 js 文件:(MyEclipse 中引入壓縮版會報錯,但可使用)

Jquery 的引入:
~~~html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }">/c:set
<!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="${path }/js/jquery-1.8.3.js"> </script>
<!--強烈建議使用絕對路徑-->
<title>Insert title here</title>
</head>
<body>
</body>
</html>
~~~
<br/>
3. jquery的主函數
第一種方式:
~~~html
<script type="text/javascript">//先來定義 jquery 的主函數。jquery 的主函數的含義在于把整個文檔加載完畢后再去執行主函數。
$(document).ready(function()
var div1 = document.getElementById("div1");
alert(div1);
});
</script>
~~~
第二種方式(建議使用):
~~~html
<script type="text/javascript">
$(function(){
...
})
</script>
~~~
**4.Jquery 對象**
jQuery對象就是通過 jQuery包裝 DOM 對象后產生的對象。Jquery對象能和 DOM 對象之間做一些轉換。
jQuery對象是jQuery 獨有的,如果一個對象是jQuery對象,那么它就可以使用jQuery里的方法。雖然jQuery對象是包裝 DOM 對象后產生的,
但是 jQuery無法使用 DOM 對象的任何方法,同理 DOM 對象也不能使用jQuery里的方法,亂使用會報錯。
- **DOM 對象轉成 jQuery 對象**
對于已經是一個 DOM 對象,只需要用$()把 DOM 對象包裝起來,就可以獲得一個 jQuery 對象了。$(DOM 對象) 。轉換后就可以使用 jQuery 中的方法了。
~~~html
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function myclick(){
var myinput = document.getElementById("myinput");
var jq_myiput = $(myinput);
alert(jq_myiput.val());
}
</script>
</head>
<body>
<input type="text" id="myinput">
<input type="button" value="submit" onclick="myclick()">
</body>
//為什么點擊觸發事件后能獲取到 myinput?因為當點擊提交按鈕時文檔已經加載完。
~~~
<br/>
**JQuery 對象轉換成 dom 對象(很少用)**
~~~js
function myclick(){
var div1 = document.getElementById("myinput"); //把dom轉換成jQuery對象
var jdiv1 = $(div1); //jdiv是一個數組。
//把jQuery對象轉換成dom對象方式1: jQuery對象是一個數組對象,可以通過[index]的方法,來得到相應的DOM對象
alert(jdiv1[0].value);
//把jQuery對象轉換成dom對象方式2: jQuery本身提供,通過.get(index)方法,得到相應的DOM對象
alert(jdiv1.get(0).value);
}
~~~