什么是Jquery？
Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作
就是封裝了JavaScript，能夠簡化我們寫代碼的一個JavaScript庫
為什么要使用Jquery？
我覺得非常重要的理由就是：它能夠兼容市面上主流的瀏覽器，我們學習AJAX就知道了，IE和FireFox獲取異步對象的方式是不一樣的，而Jquery能夠屏蔽掉這些不兼容的東西...
- （1）寫少代碼,做多事情【write less do more】
- （2）免費，開源且輕量級的js庫，容量很小
- 注意：項目中，提倡引用min版的js庫 - （3）兼容市面上主流瀏覽器，例如 IE，Firefox，Chrome
- 注意：jQuery不是將所有JS全部封裝，只是有選擇的封裝 - （4）能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供異步AJAX功能
- （5）文檔手冊很全，很詳細
- （6）成熟的插件可供選擇
- （7）提倡對主要的html標簽提供一個id屬性，但不是必須的
- （8）出錯后，有一定的提示信息
- （9）不用再在html里面通過
<script>標簽插入一大堆js來調用命令了
回顧javascript
JavaScript定位到HTML的控件有三種基本的方式：
- （A）通過ID屬性：document.getElementById()
- （B）通過NAME屬性：document.getElementsByName()
- （C）通過標簽名：document.getElementsByTagName()
我們發現，JavaScript的方法名太長了，不易於書寫代碼......
封裝優化
這些方法名太長了，獲取ID屬性、NAME屬性、標簽名屬性的控件也用不着三個方法，我們定義下規則就好了
- 傳入的參數是"#"號開頭的字符串，那么就是id屬性
- 傳入的參數是沒有"#"號開頭的字符串，也沒有前綴修飾的字符串就是標簽名屬性
到這里，我們就可以根據傳入的參數判斷它是獲取ID屬性的控件還是標簽名的控件了。在內部還是調用document.getElementById()這些方法。我們真正在使用的時候直接寫上我們自定義規則的字符串就可以獲取對應的控件了。
<script type="text/javascript">
//$()表示定位指定的標簽
function $(str){
//獲取str變量的類型
var type = typeof(str);
//如果是string類型的話
if(type == "string"){
//截取字符串的第一個字符
var first = str.substring(0,1);
//如果是#號的話
if("#" == first){
//獲取#號之后的所有字符串
var end = str.substring(1,str.length);
//根據id定位標簽
var element = document.getElementById(end);
//如果找到了
if(element != null){
//返回標簽
return element;
}else{
alert("查無此標簽");
}
}else{
}
}else{
alert("參數必須是字符串類型");
}
}
</script>
JQuery對象與JavaScript對象之間的關系
- 用JavaScript語法創建的對象叫做JavaScript對象
- 用JQurey語法創建的對象叫做JQuery對象
- Jquery對象只能調用Jquery對象的API
- JavaScript對象只能調用JavaScript對象的API
JQuery對象與JavaScript對象是可以互相轉化的，一般地，由於Jquery用起來更加方便，我們都是將JavaScript對象轉化成Jquery對象
Jquery轉成JavaScript對象
在Jquery中對象都是當成是數組的。因此Jquery轉成JavaScript對象語法如下：獲取數組的下標，出來的結果就是JavaScript對象了。
- jQuery對象[下標，從0開始]
- jQuery對象.get(下標，從0開始)
再次重申：Jquery對象只能調用Jquery對象的API，JavaScript對象只能調用JavaScript對象的API
JavaScript對象轉成Jquery
值得注意的是：在JavaScript腳本內，this是代表JavaScript對象的。
JavaScript對象轉成Jquery對象語法也非常簡單：在${}內寫上JavaScript對象，就變成了JQuery對象了。
- 語法：$(js對象)---->jQuery對象
一般地，我們習慣在Jquery對象的變量前面寫上$，表示這是JQuery對象\
選擇器
Jquery提供了九個選擇器給我們用來定位HTML控件..
- 目的：通過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標簽
- （1）基本選擇器
- 直接定位id、類修修飾器、標簽
- （2）層次選擇器
- 有父子，兄弟關系的標簽
- （3）增強基本選擇器
- 大於、小於、等於、奇偶數的標簽
- （4）內容選擇器
- 定義內容為XXX、內容中是否有標簽器、含有子元素或者文本的標簽
- （5）可見性選擇器
- 可見或不可見的標簽
- （6）屬性選擇器
- 與屬性的值相關
- （7）子元素選擇器
- 匹配父標簽下的子標簽
- （8）表單選擇器
- 匹配表單對應的控件屬性
- （9）表單對象屬性選擇器
- 匹配表單屬性具體的值
- （1）基本選擇器
通過這九種的選擇器，我們基本可以能獲取HTML中任何位置的標簽。
Jquery關於DOM的API
前面使用Jquery的選擇器來獲取到了HTML標簽，單純得到標簽是沒有用的。我們要對其進行增刪改，這樣在網頁上才能做出“動態”的效果...
JavaScript的DOM能夠操作CSS,HTML從而在網頁上做出動態的效果..
Jquery是對JavaScript的封裝，那么Jquery在得到HTML標簽后，也有對應的方法來獲取標簽的內容，動態創建、刪除、修改標簽。從而在網頁上做出動態的效果
追加
- append()：追加到父元素之后
- prepend()：追加到父元素之前
- after()：追加到兄弟元素之后
- before()：追加到兄弟元素之前
查詢層次關系
我們發現在選擇器上就有層次關系的選擇器，在API上也有層次關系的方法。一般地，我們用方法來定位到對應的控件比較多。
- children()：只查詢子節點，不含后代節點
- next()：下一下兄弟節點
- prev()：上一下兄弟節點
- siblings()：上下兄弟節點
css樣式
- addClass()：增加已存在的樣式
- removeClass()：刪除已存在的樣式
- hasClass()：判斷標簽是否有指定的樣式，true表示有樣式，false表示無樣式
- toggleClass()：如果標簽有樣式就刪除，否則增加樣式
動畫效果
往這些方法下設置參數，那么就可以控制它的隱藏、顯示時間
- show()：顯示對象
- hide()：隱藏對象
- fadeIn()：淡入顯示對象
- fadeOut()：淡出隱藏對象
- slideUp()：向上滑動
- slideDown()：向下滑動
- slideToggle()：上下切換滑動，速度快點
CSS尺寸屬性
直接調用無參就是獲取，給指定的參數就是修改
- offset()：獲取對象的left和top坐標
- offset({top:100,left:200})：將對象直接定位到指定的left和top坐標
- width()：獲取對象的寬
- width(300)：設置對象的寬
- height()：獲取對象的高
- height(500)：設置對象的高
標簽內容和屬性
- val()：獲取value屬性的值
- val("")：設置value屬性值為""空串，相當於清空
- text()：獲取HTML或XML標簽之間的值
- text("")：設置HTML或XML標簽之間的值為""空串
- html()：得到標簽下HTML的值
- **attr(name,value)：給符合條件的標簽添加key-value屬性對 **
- removeAttr()：刪除已存在的屬性
增刪改標簽
- **
$("<div id='xxID'>HTML代碼</div>")：創建元素，屬性，文本 ** - remove()：刪除自已及其后代節點
- clone()：只復制樣式，不復制行為
- clone(true)：既復制樣式，又復制行為
- replaceWith()：替代原來的節點
迭代
由於Jquery對象都是被看成是一個數組，each()方法就是專門用來操作數組的。
- each()：是jQuery中專用於迭代數組的方法，參數為一個處理函數，this表示當前需要迭代的js對象
Jquery事件API
JavaScript一大特性就是事件驅動，當用戶用了執行了某些動作以后，JavaScript就會響應事件，在事件的方法上，我們就可以對用戶的動作“回饋”一些信息給用戶！
Jquery也對JavaScript事件進行了封裝，我們看一下以下的API：
- window.onload：在瀏覽器加載web頁面時觸發，可以寫多次onload事件，但后者覆蓋前者
- ready：在瀏覽器加載web頁面時觸發，可以寫多次ready事件，不會后者覆蓋前者，依次從上向下執行，我們常用$(函數)簡化
- ready和onload同時存在時，二者都會觸發執行，ready快於onload
- change：當內容改變時觸發
- focus：焦點獲取
- select：選中所有的文本值
- keyup/keydown/keypress：演示在IE和Firefox中獲取event對象的不同
- mousemove：在指定區域中不斷移動觸發
- mouseover：鼠標移入時觸發
- mouseout：鼠標移出時觸發
- submit：在提交表單時觸發，true表示提交到后台，false表示不提交到后台
- click：單擊觸發
- dblclick：雙擊觸發
- blur：焦點失去
值得注意的是：當用戶執行動作的時候，瀏覽器會自動創建事件對象，傳遞進去給響應事件的方法【類似與監聽器的原理】，那么我們在響應方法上就可以獲取一些屬性：
Jquery對ajax常用的API
我們在開始使用JavaScript學習AJAX的時候，創建異步對象時，需要根據不同的瀏覽器來創建不同的對象....裝載XML文件的時候，也有兼容性的問題。
Jquery就很好地屏蔽了瀏覽器不同的問題，不需要考慮瀏覽器兼容的問題，這是非常非常方便我們開發的。
- **$.ajax([options]) **
- load(url, [data], [callback])
- **$.get(url, [data], [fn], [type]) **
- $post(url, [data], [callback], [type])
- serialize()
前4個方法的功能都是差不多的，都是向服務器發送請求，得到服務器返回的數據。
最后一個是對表單的數據進行封裝，將表單的數據封裝成JSON格式
load()
首先，我們來使用一下load()這個方法吧。在文檔中對它的解釋是這樣子的。
我來補充一下：
- 第一個參數：表示的是要請求的路徑
- 第二個參數：要把哪些參數帶過去給服務器端，需要的是JSON格式的
- 第三個參數：回調方法，服務器返回給異步對象的時候，會調用該方法
回調方法也有三個參數：
- 回調函數中參數一：backData表示返回的數據，它是js對象
- 回調函數中參數二：textStatus表示返回狀態的文本描述，例如：success，error，
- 回調函數中參數三：xmlHttpRequest表示ajax中的核心對象
一般地，我們只需要用到第一個參數！
我們來使用這個方法來獲取當前的時間，對這個方法熟悉一下：
調用load方法的jquery對象，返回結果自動添加到jQuery對象代表的標簽中間
- 如果帶參數就自動使用post，不帶參數自動使用get。
- 使用load方法時，自動進行編碼，無需手工編碼
<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/18
Time: 13:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
當前時間是：<span id="time"></span><br>
<input type="button" id="button" value="獲取當前時間">
<script type="text/javascript">
$("#button").click(function () {
//請求服務器端的路徑
var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime();
//沒有要參數要帶過去
//var sendData = null;
/*
* function方法的三個參數：
* 第一個參數表示服務器端帶回來的數據，是JS對象
* 第二個參數表示的是返回狀態的文字描述【用處不大】
* 第三個參數表示的是異步對象，一般我們用來看服務器端返回的JSON的值是什么【用處還行】
* 因為第一個參數返回的是JS對象，因此我們是看不見具體JSON的值是什么，所以有的時候要用第三個參數
*
* 值得注意的是：
* 要想使用第三個參數，就必須把前兩個參數給寫上！
* 調用load方法的jquery對象，返回結果自動添加到jQuery對象代表的標簽中間
* */
$("#time").load(url);
});
</script>
</body>
</html>
- Servlet代碼：
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String date = dateFormat.format(new Date());
PrintWriter writer = response.getWriter();
writer.write(date);
writer.flush();
writer.close();
}
- 效果：
$.get()
上面的load()方法，當我們帶參數給服務器的時候，就自動轉化成post、不帶參數的時候就轉換成get。$.get()就是指定是get方法
load()方法是使用Jquery對象來調用的，並且調用過后，會把數據自動填充到Jquery對象的標簽中間，而$.get()並不是特定的Jquery對象來調用！
$.get(url, [data], [fn], [type])參數和load()是完全類似的，我們在上面的例子中該一下就行了。
由於$.get()是沒有將返回的數據自動填充到標簽之中，因此需要手動地添加到指定的標簽之中！
$.get(url, function (backData) {
//得到客戶端返回的數據【JS對象】
$("#time").append(backData);
});
- 效果：
$.post()
$.post()和$.get()是十分類似的，只不過是把請求方式改變了，一般情況下，我們有參數傳遞給服務器的時候，都是用post方式的。
使用$.post()方法是需要設定編碼的，它和load()方法是不一樣的！
下面使用檢查用戶名和密碼是否合法的案例來說明這兩個方法：
<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/18
Time: 13:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--使用異步操作，表單的form和method都不是必須的，如果指定了，還是會根據后面Jquery的方法和參數來決定--%>
<form>
<table>
<tr>
<td>用戶名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password"></td>
</tr>
<tr>
<td><input type="button" value="檢查"></td>
</tr>
</table>
<span id="backData"></span>
</form>
<script type="text/javascript">
$(":button").click(function () {
var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();
//要傳送過去的數據必須是JSON格式的
var sendData = {
username: $(":text").val(),
password: $(":password").val()
};
$.post(url, sendData, function (backData) {
//得到返回的數據，填充到相對應的位置
$("#backData").text(backData);
});
});
</script>
</body>
</html>
- Servlet代碼：
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by ozc on 2017/5/21.
*/
@WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//設定編碼
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String backData = "用戶名和密碼合法";
if ("哈哈".equals(username) && "123".equals(password)) {
backData = "用戶名或密碼不合法";
}
response.getWriter().write(backData);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
serialize()
上面在介紹參數的時候已經說了，發送給服務器端的參數是需要JSON格式的，但是呢，如果我在表單中有很多很多的參數呢？？？那不是要我自己一個一個地去拼接？？？？
於是乎，Jquery也提供了serialize()這么一個方法，給我們自動把表單中的數據封裝成JSON格式的數據
使用之前要注意的是：
- 為每個jQuery對象設置一個name屬性，因為name屬性會被認為請求參數名
- 必須在
<form>標簽元素之內
根據上面的例子，我們來使用一下，我們調用serialize()方法，不自己去拼接JSON
<%--
Created by IntelliJ IDEA.
User: ozc
Date: 2017/5/18
Time: 13:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--使用異步操作，表單的form和method都不是必須的，如果指定了，還是會根據后面Jquery的方法和參數來決定--%>
<form>
<table>
<%--要想使用serialize這個方法，就必須在表單之內，並且給上對應的name屬性--%>
<tr>
<td>用戶名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td><input type="button" value="檢查"></td>
</tr>
</table>
<span id="backData"></span>
</form>
<script type="text/javascript">
$(":button").click(function () {
var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();
//要傳送過去的數據必須是JSON格式的
/* var sendData = {
username: $(":text").val(),
password: $(":password").val()
};*/
var sendData = $("form").serialize();
$.post(url, sendData, function (backData) {
//得到返回的數據，填充到相對應的位置
$("#backData").text(backData);
});
});
</script>
</body>
</html>
- 效果：
$.ajax()
對於這個方法，我們又使用二級聯動這個案例來講解吧。我們曾經使用過JavaScript來解析XML、JSON來實現二級聯動。這次我使用Jquery+Struts2+JSON來實現二級聯動。
$.ajax()這個方法接收的參數是一個JSON類型，JSON里面有幾個參數：
- type【請求類型】
- url【請求路徑】
- data【發送給服務器的數據，也是一個JSON類型】
- success【回調函數】
這里遇到的問題：動態獲取選擇下拉框的值時候，調用的是val()而不是text()....
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省份-城市，基於jQuery的AJAX二級聯動</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>
<%--############前台頁面##############################--%>
<select name="province" id="provinceId">
<option>請選擇省份</option>
<option>廣東</option>
<option>北京</option>
</select>
<select name="city" id="cityId">
<option>請選擇城市</option>
</select>
<%--############監聽省份##############################--%>
<script type="text/javascript">
$("#provinceId").change( function() {
//每次調用的時候，把城市的值清空，除了第一項
$("#cityId option:gt(0)").remove();
//得到具體選擇的值，講道理這里應該是test的，可是test()沒反應，要用val()
var province = $("#provinceId option:selected").val();
//如果不是“請選擇省份”，才觸發事件
if ("請選擇省份" != province) {
//它接收的是一個JSON類型的數據
$.ajax(
{
type: "POST",
url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(),
data: {"province": province},
success: function (backData, aaa, ajax) {
//看下服務器帶過來的數據是什么樣的，然后再對JSON進行解析
//alert(ajax.responseText);
//得到服務器返回的數據,是一個JSON格式數據
var array = backData.city;
for(var i=0;i<array.length;i++) {
//動態創建option節點，添加到城市下拉框中
var $option = $("<option>" + array[i] + "</option>");
$("#cityId").append($option);
}
}
}
);
}
});
</script>
- Action
import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;
import java.util.List;
/**
* Created by ozc on 2017/5/18.
*/
public class ProvinceAction extends ActionSupport{
//自動封裝數據
private String province;
public String getProvince() {
return province;
}
public void setProvince(String province) {
this.province = province;
}
//封裝城市的集合
private List<String> city = new ArrayList<>();
public List<String> getCity() {
return city;
}
public String findCityByProvince() throws Exception {
if ("廣東".equals(province)) {
city.add("廣州");
city.add("珠海");
city.add("從化");
} else if ("北京".equals(province)) {
city.add("一環");
city.add("二環");
city.add("三環");
city.add("四環");
} else {
System.out.println("沒有你選擇的地區");
}
return "ok";
}
}
- Struts.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<package name="province" extends="json-default" namespace="/">
<global-results>
<result name="ok" type="json"></result>
</global-results>
<action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">
</action>
</package>
</struts>
- 效果：
總結
- load()方法是使用Jquery的對象來進行調用的，得到服務器的結果自動會把結果嵌套到所在的標簽中。
- get()方法不是使用Jquery對象來調用，因此需要手動把結果放在想要放的位置
- post()方法是用來把參數帶過去給服務器的，因此我們需要在Servlet上手動設置編碼。用法與get()方法一樣
- serialize()是非常好用的一個方法，不需要我們手動去拼接參數，會自動把form表單的參數封裝成JSON格式的數據。
- 至於$.ajax()方法，實際上就是集合了get()和post()方法。
如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同學，可以關注微信公眾號:Java3y