【jQuery教科書】從jQuery語法到jQuery ajax的每一個知識點（學習總結）

文章目錄
@[toc]
一、jQuery概述
1.1 什麼是jQuery？
1.2 jQuery的版本須知
1.3 jQuery的功能作用
1.4 爲什麼要使用jQuery？
1.5 jQueryAPI文檔介紹
1.6 jQuery的下載與使用
1.6.1 下載獲取jQuery的方法
1.6.2 引入jQuery
1.6.3 jQuery的封裝思想
二、jQuery語法
2.1 jQuery的普通語法
2.2 選擇器
2.2.1 標籤選擇器
2.2.2 id選擇器
2.2.3 class選擇器
2.2.4 通配符選擇器
3.1.5 層級選擇器
3.1.6 基本過濾選擇器
3.1.7 內容過濾選擇器
3.1.8 子元素過濾選擇器
3.1.9 屬性選擇器
2.3 jQuery事件
2.3.1 什麼是事件？
2.3.2 事件語法
2.3.3 鼠標單擊 click()
2.3.4 鼠標雙擊 dblclick()
2.3.5 鼠標經過 mouseover()
2.3.6 鼠標離開 mouseout()
2.3.7 光標懸停 hover()
2.3.8 鼠標移動元素上方並按鍵 mousedown()
2.3.9 在元素上鬆開鼠標按鍵 mouseup()
2.3.10 獲取焦點 focus()
2.3.11 失去焦點 blur()
三、jQuery 效果
3.1 隱藏與顯示
3.1.1 隱藏 hide()
3.1.2 顯示 show()
3.1.3 切換隱藏與顯示 toggle()
3.2 淡入淡出
3.2.1 淡入淡出的方法分類
3.2.2 jQuery fadeIn() 方法
3.2.3 jQuery fadeOut() 方法
3.2.4 jQuery fadeToggle() 方法
3.2.5 jQuery fadeTo() 方法
3.3 滑動
3.3.1 slideDown() 方法
3.3.2 slideUp() 方法
3.3.3 slideToggle() 方法
3.4 鏈式編程
四、 jQuery HTML DOM操作
4.1 獲取
4.1.1 獲得內容 text()、html() 以及 val()
4.1.2 獲取屬性 attr()、prop()
4.2 設置
4.2.1 設置內容 text()、html() 以及 val()
4.2.2 設置屬性 attr()
4.2.3 移除屬性 removeAttr()
4.3 添加元素
4.3.1 添加新的 HTML 內容
4.3.2 jQuery append() 方法
4.3.3 jQuery prepend() 方法
4.3.4 jQuery after() 和 before() 方法
4.4 刪除元素
4.4.1 jQuery remove() 方法
4.4.2 jQuery empty() 方法
4.4.3 過濾被刪除的元素
4.5jQuery元素遍歷
4.6 CSS操作
4.6.1 jQuery操作CSS方法
4.6.2 jQuery addClass() 方法
4.6.3 jQuery removeClass() 方法
4.6.4 jQuery toggleClass() 方法
4.7 CSS()方法
4.7.1 jQuery css() 方法
4.7.2 返回 CSS 屬性
4.7.3 設置 CSS 屬性
4.7.4 設置多個 CSS 屬性
五、jQuery節點關係
5.1 jQuery parent() 方法（祖先）
5.2 jQuery children() 方法（子孫）
5.3 jQuery find() 方法
5.4 jQuery siblings() 方法（同胞）
5.5 jQuery next() 方法
案例1 ：全選 |全不選、反向全選
案例2 ：兩個 select框，把一個select框中的內容移動到另一個select
案例演示3:省市級聯
六、jQuery noConflict方法
6.1 jQuery 和其他 JavaScript 框架
6.2 jQuery noConflict() 方法
七、jQuery Ajax
7.1 重溫Ajax介紹
7.2 ajax()方法
7.3 jQuery Ajax參數
7.4 get和post方法
7.4.1 get方法
7.4.2 post方法
7.5 註冊案例
c3p0.properties
User實體類
CheckUsernameServlet檢查註冊用戶名是否存在
RegisterServlet提示註冊成功
Dao層數據庫訪問
Service層業務處理
DBUtils
JSONUtils
register.jsp頁面

一、jQuery概述

1.1 什麼是jQuery？

jQuery 是一個高效、精簡併且功能豐富的 JavaScript 工具庫。它提供的 API 易於使用且兼容衆多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。 它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結爲：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.2 jQuery的版本須知

目前jQuery有三個大版本：

1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)

2.x：2013年2.0版本發佈，不兼容ie678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)

3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。最新版本：3.4.1（2019年5月1日）

注意：1.X大版本下，細分版本非常多，各個版本的函數都會有一定的差異。網上看到的很多教程大多是1.x版本的。

jquery官方手冊：http://api.jquery.com/

1.3 jQuery的功能作用

jQuery庫包含以下功能：

HTML 元素選取

HTML 元素操作

CSS 操作

HTML 事件函數

JavaScript 特效和動畫

HTML DOM 遍歷和修改

Ajax

Utilities

1.4 爲什麼要使用jQuery？

目前網絡上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的擴展。
很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix等等

1.5 jQueryAPI文檔介紹

jquery官方手冊（全英文）：http://api.jquery.com/

jQuery中文網：https://www.jquery123.com/

W3CSchool：https://www.w3school.com.cn/jquery/index.asp/

菜鳥教程：https://www.runoob.com/jquery/jquery-tutorial.html/

1.6 jQuery的下載與使用

1.6.1 下載獲取jQuery的方法

從 jquery.com 下載 jQuery 庫

Production version - 用於實際的網站中，已被精簡和壓縮。

Development version - 用於測試和開發（未壓縮，是可讀的代碼）

從 CDN 中載入 jQuery，如從 Google 中加載 jQuery

百度 CDN - https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

新浪 CDN - http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js

Google CDN - http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Microsoft CDN - http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js

1.6.2 引入jQuery

jQuery 庫是一個 JavaScript 文件，可以使用 HTML 的 <script> 標籤引用它：

使用本地下載的jQuery庫，需要在web文件夾下創建js文件夾，並將本地庫文件放在js文件夾內，在src下填寫路徑

使用CDN則不需要創建js文件夾，直接將廠家的CDN放在src下即可！

注意：導入jQuery的<script>標籤內不得寫任何內容，否則無效！如果需要編寫js代碼則另開闢一個<script>標籤並在此<script>標籤內編寫js代碼！

<head>
    //引入jQuery，src下也可以引入CDN來使用jQuery
	<script src="jquery-1.10.2.min.js"></script>
</head>

1.6.3 jQuery的封裝思想

我們在學習JavaScript的時候，是會用到爲元素設置標籤內容或對標籤有其他要求的。在js中設置標籤內容的前提，需要我們通過id、class等獲取到標籤元素對象後，再給予標籤內容或對標籤的其他要求。

如果我們使用學到的普通的js代碼來編寫此要求的代碼的話，我們則需要使用getElementById方法，重複多此的設置和獲取元素內容。代碼顯得十分的冗餘和重複！

這時候我們就需要有像Java一樣的封裝思想來處理解決此問題。我們需要一個方法，此時需要傳入一個參數id，將getElementById方法封裝在方法中，通過判斷得到元素內容是否爲空來處理我們是設置元素文本內容還是獲取元素文本內容！

如下是我創建的JavaScript File文件，代碼是這樣編寫的：（此代碼是模仿的jQuery的封裝）

/**
 * 獲取指定id的元素對象
 * @param id
 */
function $(id) {
    var ele = document.getElementById(id);
    //給ele添加一個方法，方法名叫html，形參content
    ele.html = function (content) {
        //如果content不爲空，就將content設置到ele對象中
        if (content != null) {
            element.innerHTML = content;
        } else {    //如果content爲空，就獲取ele的內容
            return element.innerHTML;
        }
    };
    return element;
}

二、jQuery語法

jQuery 語法是通過$()核心函數選取 HTML 元素，並對選取的元素執行某些操作。

在實際開發中，jQuery是可以與js聯用的，它大大提高了開發效率！但是記住的點是不要被兩種語法混淆了！

注意：美元符號等價於jQuery

2.1 jQuery的普通語法

表示頁面dom加載完畢，就執行，比onload事件要早，並行可以寫多個。

注意：在這裏$(匿名函數)等價於$(document).ready(匿名函數)

$(selector).action()的使用語法

美元符號定義 jQuery

選擇符（selector）“查詢"和"查找” HTML 元素

jQuery 的 action() 執行對元素的操作

$(this).hide() - 隱藏當前元素

$(“p”).hide() - 隱藏所有<p>元素

$(“p.test”).hide() - 隱藏所有 class=“test” 的<p>元素

$("#test").hide() - 隱藏所有 id=“test” 的元素

<head>
    <title>test</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("這是jQuery的使用方式");
        });
        jQuery(document).ready(function () {
            alert("jQuery等價於$符號");
        });
        $(function () {
            alert("這是Jquery的簡化使用，我們推薦使用這一種！");
        });
    </script>
</head>

2.2 選擇器

選擇器分類/名稱/語法	描述
ID選擇器
$("#id");	選取id="id"的元素
class選擇器
$(".className");	選取class="className"的元素
標籤選擇器（元素選擇器）
$(“div”);	選取標籤名（元素名）爲div的元素
通配符選擇器
$("*");	選取頁面文檔所有元素
層級選擇器
$(“a b”);	a節點的所有後代節點b都被選中
$(“a > b”);	a節點的所有子節點b都被選中
$(“a + b”);	a節點之後的第一個兄弟節點b
$(“a ~ b”);	a節點之後的所有兄弟節點b
基本過濾選擇器
$(“tagName:first”)	第一個tagName元素
$(“tagName:last”)	最後一個tagName元素
$(“tagName:eq(2)”)	索引爲2的tagName元素，索引從0開始
$(“tagName:gt(2)”)	索引大於2的tagName元素
$(“tagName:lt(2)”)	索引小於2的tagName元素
$(“tagName:odd”)	索引爲奇數的tagName元素
$(“tagName:even”)	索引爲偶數的tagName元素
內容過濾選擇器
$(“tagName:contains(‘aaa’)”)	文本內容包含"aaa"的tagName元素
$(“tagName:empty”)	不包含子元素的tagName元素
$(“tagName:has(.one)”)	包含class爲one的tagName元素
子元素過濾選擇器
$(“tagName :nth-child(2)”)	tagName元素下的第二個子元素（索引從1開始）
$(“tagName :first-child”)	tagName元素下的第一個子元素
$(“tagName :last-child”)	tagName元素下的最後一個子元素
$(“tagName :only-child”)	tagName元素下的僅僅只有一個子元素，那麼就選中這個子元素
屬性過濾選擇器
$(“tagName[id]”)	選取含有屬性id的tagName元素
$(“tagName[id=‘cc’]”)	選取屬性id值爲"cc"的tagName元素
$(“tagName[id!=‘cc’]”)	選取屬性id值不爲"cc"的tagName元素
$(“tagName[title^=‘cc’]”)	選取屬性id值以"cc"開頭的tagName元素
$("tagName[title$ =‘cc’]")	選取屬性id值以"cc"結束的tagName元素
$(“tagName[title*=‘cc’]”)	選取屬性id值包含"cc"的tagName元素
屬性過濾選擇器的多個聯用
$(“tagName[title*=‘cc’][name=‘ee’][id!=‘ff’]”);	選取屬性title包含"cc"、id不爲"ff"且class爲"ee"的tagName元素

2.2.1 標籤選擇器

jQuery 標籤選擇器基於標籤（元素）名選取元素。

在頁面中選取所有 <p> 元素：

$ (function(){
  $("#btn").click(function(){
    $("p").hide();
  });
});

2.2.2 id選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下：

$ (function(){
  $("#btn").click(function(){
    $("#test").hide();
  });
});

2.2.3 class選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。
語法如下：

$ (function(){
  $("#btn").click(function(){
    $(".test").hide();
  });
});

2.2.4 通配符選擇器

jQuery 通配符選擇器是通過 * 來默認選取所有元素的，可以對所有元素進行修飾。

語法如下：

$ (function(){
  $("#btn").click(function(){
    $("*").hide();
  });
});

3.1.5 層級選擇器

層次選擇器：從父子關係和兄弟關係來進行選擇頁面節點

後代選擇器：選擇body內的所有div元素 - $(“a b”)

$("body div").css("background-color","pink");

父子選擇器：在body內選擇子元素是div的 - $(“a > b”)

$("body > div").css("background-color","pink");

同輩選擇器：選擇所有id爲one的下一個兄弟div元素 - $(“a + b”)

$("#one + div").css("background-color","pink");

後續同輩：選擇id爲two的元素後面的所有div兄弟元素 - $(“a ~ b”)

$("#one ~ div").css("background-color","pink");

3.1.6 基本過濾選擇器

過濾選擇器：從位置的角度來對頁面的標籤進行過濾選擇

		//選擇第一個DIV元素
		function fn1(){
			$("div:first").css("background-color","pink");
		}
		//選擇最後一個div元素
		function fn2(){
			$("div:last").css("background-color","pink");
		}
		//選擇class不爲one的所有div元素 $('dom:not(.one)')
		function fn3(){
			$("div:not(.one)").css("background-color","pink");
		}
		//選擇索引值爲偶數的div元素 even:偶數 odd:奇數
		function fn4(){
			$("div:even").css("background-color","pink");
		}
		//選擇索引值爲奇數的div元素
		function fn5(){
			$("div:odd").css("background-color","pink");
		}
		//選擇索引值等於3的元素
		function fn6(){
			$("div:eq(3)").css("background-color","pink");
		}
		//選擇索引值大於3的元素
		function fn7(){
			$("div:gt(3)").css("background-color","pink");
		}
		//選擇索引值小於3的元素
		function fn8(){
			$("div:lt(3)").css("background-color","pink");
		}

3.1.7 內容過濾選擇器

內容過濾選擇器：節點值是否爲空，節點上的文本中是否包含指定的字符串，子元素中的class值是否爲指定的值

		//選取含有文本"di"的div元素  $("tagName:contains('str')")
		function fn1(){
			$("div:contains('di')").css("background-color","pink");
		}
		//選取不包含子元素(或者文本元素)的div空元素. $("tagName:empty");
		function fn2(){
			$("div:empty").css("background-color","pink");
		}
		//選取含有class爲mini元素 的div元素. $("tagName:has(.mini)")
		//1.選中的是DIV元素  2.子元素中的class值爲mini
		function fn3(){
			$("div:has(.mini)").css("background-color","pink");
		}

3.1.8 子元素過濾選擇器

子元素過濾選擇器：選擇父元素下的子元素(第1個,最後1個,第幾個子元素)

		//選取class爲one的div下的第2個子元素  
		function fn1(){
			$("div[class='one'] :nth-child(2)").css("background-color","pink");
		}
		//選取class爲one的div下的第1個子元素
		function fn2(){
			// $("div[class='one'] :nth-child(1)").css("background-color","pink");
			$("div[class='one'] :first-child").css("background-color","pink");
		}
		//選取每個父元素下的最後一個子元素
		function fn3(){
			$("div :last-child").css("background-color","pink");
		}
		//如果父元素下的僅僅只有一個子元素,那麼選中這個子元素  
		function fn4(){
			$("div :only-child").css("background-color","pink");
		}

3.1.9 屬性選擇器

屬性過濾選擇器：從節點的屬性來過濾篩選節點；有無屬性、屬性值、等於、不等於、包含、是開頭、是結尾、多重過濾等

		//選取含有屬性title的div元素.  $("tagName[title]");
		function fn1(){
			$("div[title]").css("background-color","red");
		}
		//選取屬性title值等於test的div元素. $("tagName[title='test']")
		function fn2(){
			$("div[title='test']").css("background-color","pink");
		}
		//選取屬性title值不等於test的div元素. !=
		function fn3(){
			$("div[title!='test']").css("background-color","pink");
		}
		//選取屬性title值以te開始 的div元素.  ^=
		function fn4(){
			$("div[title^='te']").css("background-color","pink");
		}
		//選取屬性title值以est結束的div元素.  $=
		function fn5(){
			$("div[title$='est']").css("background-color","pink");
		}
		//選取屬性title值含有es的div元素.     *=
		function fn6(){
			$("div[title*='es']").css("background-color","pink");
		}
		//組合屬性選擇器,首先選取有屬性id的div元素，然後在結果中 選取屬性title值 含有 es 的元素.
		function fn7(){
			$("div[id][title*='es']").css("background-color","pink");
		}

2.3 jQuery事件

2.3.1 什麼是事件？

頁面訪問者的響應叫做事件。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

鼠標事件	鍵盤事件	表單事件	文檔/窗口事件
click（單擊）	keypress	submit	load
dblclick（雙擊）	keydown	change	resize
mouseover	keyup	focus	scroll
mouseout		blur	unload

2.3.2 事件語法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點擊事件：

$("p").click();

也就是說，不傳參數是點擊，傳參數是設置事件。

下一步是定義觸發事件。您可以通過一個事件函數實現：

$("p").click(function(){
    // 動作觸發後執行的代碼!!
});

2.3.3 鼠標單擊 click()

當按鈕點擊事件被觸發時會調用一個函數。
該函數在用戶點擊 HTML 元素時執行。
在下面的實例中，當點擊事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：

$("p").click(function(){
  $(this).hide();
});

2.3.4 鼠標雙擊 dblclick()

當雙擊元素時，會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數：

$("p").dblclick(function(){
  $(this).hide();
});

2.3.5 鼠標經過 mouseover()

當鼠標指針穿過元素時，會發生 mouseover 事件。
mouseover() 方法觸發 mouseover 事件，或規定當發生 mouseover 事件時運行的函數：

$("#p1").mouseover(function(){
    alert('您的鼠標移到了 id="p1" 的元素上!');
});

2.3.6 鼠標離開 mouseout()

當鼠標指針離開元素時，會發生 mouseout 事件。
mouseout() 方法觸發 mouseout 事件，或規定當發生 mouseout 事件時運行的函數：

$("#p1").mouseout(function(){
    alert("再見，您的鼠標離開了該段落。");
});

2.3.7 光標懸停 hover()

hover()方法用於模擬光標懸停事件。
當鼠標移動到元素上時，會觸發指定的第一個函數(mouseover);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseout)。

$("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 現在你離開了 p1!");
    }
);

2.3.8 鼠標移動元素上方並按鍵 mousedown()

當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。
mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數：

$("#p1").mousedown(function(){
    alert("鼠標在該段落上按下！");
});

2.3.9 在元素上鬆開鼠標按鍵 mouseup()

當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數：

$("#p1").mouseup(function(){
    alert("鼠標在段落上鬆開。");
});

2.3.10 獲取焦點 focus()

當元素獲得焦點時，發生 focus 事件。
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

2.3.11 失去焦點 blur()

當元素失去焦點時，發生 blur 事件。
blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

三、jQuery 效果

3.1 隱藏與顯示

3.1.1 隱藏 hide()

您可以使用 hide() 將元素隱藏

$("#hide").click(function(){
  $("p").hide();
});

3.1.2 顯示 show()

您可以使用show()將元素顯示

$("#show").click(function(){
  $("p").show();
});

3.1.3 切換隱藏與顯示 toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，並隱藏已顯示的元素：

$("button").click(function(){
  $("p").toggle();
});

事實上，這三種方法都是有兩個參數的：

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

3.2 淡入淡出

3.2.1 淡入淡出的方法分類

通過 jQuery，您可以實現元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

3.2.2 jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。.
可選的 callback 參數是 fading 完成後所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

3.2.3 jQuery fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

3.2.4 jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

3.2.5 jQuery fadeTo() 方法

jQuery fadeTo() 方法允許漸變爲給定的透明度（值介於 0 與 1 之間）。0透明 1不透明

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 參數是該函數完成後所執行的函數名稱。
下面的例子演示了帶有不同參數的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3.3 滑動

通過 jQuery，您可以在元素上創建滑動效果。
jQuery 擁有以下滑動方法：

slideDown()

slideUp()

slideToggle()

3.3.1 slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。

$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

3.3.2 slideUp() 方法

jQuery slideUp() 方法用於向上滑動元素。

$(selector).slideUp(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

<script type="text/javascript">
$(document).ready(function(){
  $("#btn1").click(function(){
  $("p").slideUp(1000);
  });
  $("#btn2").click(function(){
  $("p").slideDown(1000);
  });
});
</script>

3.3.3 slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們。

如果元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

3.4 鏈式編程

直到現在，我們都是一次寫一條 jQuery 語句（一條接着另一條）。

不過，有一種名爲鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接着另一條。

提示： 這樣的話，瀏覽器就不必多次查找相同的元素。

如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。

下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。“p1” 元素首先會變爲紅色，然後向上滑動，再然後向下滑動：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我們也可以添加多個方法調用。

**提示：**當進行鏈接時，代碼行會變得很差。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮進。

如下書寫也可以很好地運行：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

四、 jQuery HTML DOM操作

4.1 獲取

jQuery 擁有可操作 HTML 元素和屬性的強大方法。

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

DOM 對象和 jQuery 對象的區別：

var box1 = document.getElementById(“box”);——DOM

var box2 = $("#box");——jQuery

DOM 操作的是 JavaScript 原生對象

jQuery 操作的是自己封裝的對象,當中包含了原生對象

注意： 只有 jQuery 對象纔可以操作 jQuery 的函數

jQuery對象與js對象互轉

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery對象和js對象</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        /**
         * 將js對象轉化爲jQuery對象
         */
        function fn1() {
            //獲取js對象
            var jsObject = document.getElementById("div1");
            //將js對象轉化爲jQuery對象
            var jqObject = $(jsObject);
            //調用jQuery對象的屬性和方法
            jqObject.html("my name is div1");
        }

        /**
         * 將jQuery對象轉換爲js對象
         */
        function fn2() {
            //獲取jQuery對象
            var jqObject = $("#div1");
            //將jQuery對象轉換爲js對象
            //方法1:
            // var jsObject = jqObject.get(0);
            //方法2:
            var jsObject = jqObject[0];
            //調用js對象的屬性和方法
            jsObject.innerHTML = "my name is div1";
        }
    </script>
</head>
<body>
<div id="div1">
    這是一個div
</div>
<button onclick="fn1()">js轉jquery</button>
<button onclick="fn2()">jquery轉js</button>
</body>
</html>

4.1.1 獲得內容 text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內容，等價於innerText

html() - 設置或返回所選元素的內容（包括 HTML 標記），等價於innerHTML

val() - 設置或返回表單字段的值，等價於value屬性

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通過 jQuery val() 方法獲得輸入字段的值：

$("#btn1").click(function(){
  alert("值爲: " + $("#test").val());
});

4.1.2 獲取屬性 attr()、prop()

jQuery attr() 方法用於獲取屬性值。

下面的例子演示如何獲得鏈接中 href 屬性的值：

$("button").click(function(){
  alert($("#a1").attr("href"));
});

4.2 設置

4.2.1 設置內容 text()、html() 以及 val()

我們將使用前一章中的三個相同的方法來設置內容：

text() - 設置或返回所選元素的文本內容

html() - 設置或返回所選元素的內容（解析HTML標籤）

val() - 設置或返回表單字段的值

下面的例子演示如何通過 text()、html() 以及 val() 方法來設置內容：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Hello world!");
});

4.2.2 設置屬性 attr()

jQuery attr() 方法也用於設置/改變屬性值。

下面的例子演示如何改變（設置）文本中 color屬性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

4.2.3 移除屬性 removeAttr()

jQuery removeAttr() 方法用於移除設置/改變後的屬性值。

下面的例子演示移除上個例子中設置在文本中的color屬性的值：

$("button").click(function(){
   $("#font1").removeAttr("color"); 
});

4.3 添加元素

4.3.1 添加新的 HTML 內容

我們將學習用於添加新內容的四個 jQuery 方法：

append() - 在被選元素的結尾插入內容

prepend() - 在被選元素的開頭插入內容

after() - 在被選元素之後插入內容

before() - 在被選元素之前插入內容

4.3.2 jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容。

$("p").append("追加文本");

4.3.3 jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容。

$("p").prepend("在開頭追加文本");

通過 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。

不過，append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然後我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

function appendText() {
    var txt1="<p>文本。</p>";                 // 使用 HTML 標籤創建文本
    var txt2=$("<p></p>").text("文本。");     // 使用 jQuery 創建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";                  // 使用 DOM 創建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

4.3.4 jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之後插入內容。

jQuery before() 方法在被選元素之前插入內容。

$("img").after("在後面添加文本");
 
$("img").before("在前面添加文本");

通過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

在下面的例子中，我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然後我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 創建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創建元素
    var txt3=document.createElement("big");  // 使用 DOM 創建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在圖片後添加文本
}

4.4 刪除元素

刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

remove() - 刪除被選元素（及其子元素）

empty() - 從被選元素中刪除子元素

4.4.1 jQuery remove() 方法

jQuery remove() 方法刪除被選元素及其子元素。

$("#div1").remove();

4.4.2 jQuery empty() 方法

jQuery empty() 方法刪除被選元素的子元素。

$("#div1").empty();

4.4.3 過濾被刪除的元素

jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。

該參數可以是任何 jQuery 選擇器的語法。

下面的例子刪除 class=“italic” 的所有 <p> 元素：

$("p").remove(".italic");

4.5jQuery元素遍歷

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery遍歷</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        //js方式
        function fn1() {
            var lis = document.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                var li = lis[i];
                console.log(li.innerHTML);
            }
        }

        //jquery方式一
        function fn2() {
            var lis = $("ul > li");
            lis.each(function (index,element) {
                //index:當前元素的索引
                //element:當前元素(js對象)
                console.log("index : " + index);
                console.log("text : " + element.innerHTML);
                console.log("text : " + $(element).html());
            });
        }

        //jquery方式一
        function fn3() {
            var lis = $("ul > li");
            lis.each(function (index) {
                console.log("index : " + index);
                //this:內置對象,js對象，當前元素
                console.log(this.innerHTML);
                console.log($(this).html());
            })
        }

        //jquery方式二
        function fn4() {
            var lis = $("ul > li");
            $.each(lis,function (index,element) {
                console.log(index);
                console.log(element.innerHTML);
                console.log(this.innerHTML);
            })
        }
    </script>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<button onclick="fn1()">獲取1</button>
<button onclick="fn2()">獲取2</button>
<button onclick="fn3()">獲取3</button>
<button onclick="fn4()">獲取4</button>
</body>
</html>

4.6 CSS操作

4.6.1 jQuery操作CSS方法

jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些：

addClass() - 向被選元素添加一個或多個類

removeClass() - 從被選元素刪除一個或多個類

toggleClass() - 對被選元素進行添加/刪除類的切換操作

實例樣式表

下面的樣式表將用於本頁的所有例子：

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

4.6.2 jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 屬性。當然，在添加類時，您也可以選取多個元素：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

您也可以在 addClass() 方法中規定多個類：

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

4.6.3 jQuery removeClass() 方法

下面的例子演示如何在不同的元素中刪除指定的 class 屬性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

4.6.4 jQuery toggleClass() 方法

下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

4.7 CSS()方法

4.7.1 jQuery css() 方法

css() 方法設置或返回被選元素的一個或多個樣式屬性。

4.7.2 返回 CSS 屬性

如需返回指定的 CSS 屬性的值，請使用如下語法：

css("propertyname");

下面的例子將返回首個匹配元素的 background-color 值：

$("p").css("background-color");

4.7.3 設置 CSS 屬性

如需設置指定的 CSS 屬性，請使用如下語法：

css("propertyname","value");

下面的例子將爲所有匹配元素設置 background-color 值：

$("p").css("background-color","yellow");

4.7.4 設置多個 CSS 屬性

如需設置多個 CSS 屬性，請使用如下語法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子將爲所有匹配元素設置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

五、jQuery節點關係

通過 jQuery 節點關係，您能夠從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行查找。

5.1 jQuery parent() 方法（祖先）

parent() 方法返回被選元素的直接父元素。

該方法只會向上一級對 DOM 樹進行遍歷。

下面的例子返回每個 <span> 元素的的直接父元素：

$(document).ready(function(){
  $("span").parent();
});

5.2 jQuery children() 方法（子孫）

children() 方法返回被選元素的所有直接子元素。

該方法只會向下一級對 DOM 樹進行遍歷。

下面的例子返回每個 <div> 元素的所有直接子元素：

$(document).ready(function(){
  $("div").children();
});

也可以使用可選參數來過濾對子元素的搜索。

下面的例子返回類名爲 “1” 的所有 <p> 元素，並且它們是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

5.3 jQuery find() 方法

find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

下面的例子返回屬於 <div> 後代的所有 <span> 元素：

$(document).ready(function(){
  $("div").find("span");
});

下面的例子返回 <div> 的所有後代：

$(document).ready(function(){
  $("div").find("*");
});

5.4 jQuery siblings() 方法（同胞）

siblings() 方法返回被選元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){
  $("h2").siblings();
});

也可以使用可選參數來過濾對同胞元素的搜索。

下面的例子返回屬於 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

5.5 jQuery next() 方法

next() 方法返回被選元素的下一個同胞元素。該方法只返回一個元素。

下面的例子返回 <h2> 的下一個同胞元素：

$(document).ready(function(){
  $("h2").next();
});

案例1 ：全選 |全不選、反向全選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" id="checkAll" /> </th>
            <th>學號</th>
            <th>名字</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"/> </td>
            <td>1001</td>
            <td>朱保生帥</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check" /> </td>
            <td>1002</td>
            <td>朱保生太帥</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="check"/> </td>
            <td>1003</td>
            <td>朱保生沒法再帥了！</td>
        </tr>
    </table>
<script type="text/javascript">
    $(function () {
        $("#checkAll").click(function () {
           var result = $("#checkAll").prop("checked");
           if(result == true){
                $(".check").prop("checked",true);
           }else{
               $(".check").prop("checked",false);
           }
        })
  			//獲取多個複選框
        var cs = $(".check");

        $(".check").click(function () {
            var count = 0;//累計選中的個數
            var result = $(this).prop("checked");//獲取當前點擊的複選框
           for(var i = 0;i<cs.length;i++){
               //通過jquery選擇數組裏每一個input元素
                if($(cs[i]).prop("checked") == true){
                    count++;//累計
                    if(count==cs.length){//如果累計的個數和總數相等
                        $("#checkAll").prop("checked",true);
                    }else{
                        $("#checkAll").prop("checked",false);
                    }
                }
           }
        })
    })
//反向全選	解決方案2:用each迭代器
        //1.先拿到多個複選框
        var cs = $(".check");

        $(".check").click(function () {
            var count = 0;
            $(cs).each(function (i,v) {
                if($(cs[i]).prop("checked")==true){
                    count++;
                    
                    if(count==cs.length){
                        $("#checkAll").prop("checked",true);
                    }else{
                        $("#checkAll").prop("checked",false);
                    }
                }
            })
        })
</script>
</body>
</html>

案例2 ：兩個 select框，把一個select框中的內容移動到另一個select

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>移動元素</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>

	<body>

		<select id="leftselect" size="10"  style=" width: 100px;">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">南京</option>
			<option value="4">廣州</option>
			<option value="5">杭州</option>
			<option value="6">深圳</option>
		</select>
	
		<div style="display: inline-block; vertical-align: top; margin-top: 20px;">
			
			<input type="button" value="右移>>" id="toRight" /><br/>
			<input type="button" value="左移<<" id="toLeft"/><br/>
			<input type="button" value="全部右移" id="toRightAll" /><br/>
			<input type="button" value="全部左移" id="toLeftAll"/>
			
		</div>
		<select id="rightselect" size="10" multiple="multiple" style=" width: 100px;">
			
		</select>
		
		<script type="text/javascript">
			$(function () {
            var leftselect=document.getElementById("leftselect");
            var rightselect=document.getElementById("rightselect");
            $("#toRight").click(function () {
                 $("#rightselect").append(leftselect.options[leftselect.selectedIndex]);
            });
            $("#toLeft").click(function () {
                $("#leftselect").append(rightselect.options[rightselect.selectedIndex]);
            });
            $("#toRightAll").click(function () {
                $("#rightselect").append(leftselect.options);
            });
            $("#toLeftAll").click(function () {
                $("#leftselect").append(rightselect.options);

            });
        })
		</script>
	</body>

</html>

案例演示3:省市級聯

  <select id="prov">
        <option value="0">--請選擇--</option>

    </select>
    <select id="city">
        <option value="0">--請選擇--</option>

    </select>
<script>
        $(function () {
            var arr = new Array();
            arr["河北省"]=["保定","石家莊","邯鄲","張家口","廊坊","秦皇島"];
            arr["山東省"]=["濟南","青島","煙臺","泰安"];
            arr["山西省"]=["太原","呂梁","大同","運城"];
            arr["河南省"]=["鄭州","開封","駐馬店","漯河","焦作"];
            arr["四川省"]=["成都","綿陽","樂山"];

            for(var key in arr){
                $("#prov").append("<option value='"+key+"'>"+key+"</option>");
            }

            $("#prov").change(function () {

                var v= this.options[this.selectedIndex].value;
                var cityarr=arr[v];

                //清空
                $("#city").html("<option value=\"0\">--請選擇--</option>");

                $(cityarr).each(function (i,n) {
                    $("#city").append("<option value='"+n+"'>"+n+"</option>");
                })
            });

        })
        
</script>

六、jQuery noConflict方法

6.1 jQuery 和其他 JavaScript 框架

正如我們已經瞭解到的，jQuery 使用 $ 符號作爲 jQuery 的簡寫。

如果其他 JavaScript 框架也使用 $ 符號作爲簡寫怎麼辦？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符號作爲簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號，有可能導致腳本停止運行。

jQuery 的團隊考慮到了這個問題，並實現了 noConflict() 方法。

6.2 jQuery noConflict() 方法

noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

您也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍後使用。請看這個例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代碼塊使用 $ 簡寫，並且您不願意改變這個快捷方式，那麼您可以把 $ 符號作爲變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

七、jQuery Ajax

7.1 重溫Ajax介紹

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個網頁的情況下，AJAX 通過後臺加載數據，並在網頁上進行顯示。

7.2 ajax()方法

jQuery 底層 Ajax 實現。簡單易用的高層實現get和post方法等。$.ajax() 返回其創建的 XMLHttpRequest
對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。

7.3 jQuery Ajax參數

注意：常用的參數已用黑色斜體渲染，以便查閱！

contentType：(默認: “application/x-www-form-urlencoded”) 發送信息至服務器時內容編碼類型。默認值適合大多數情況。

data：發送到服務器的數據。String類型，必須爲 Key/Value 格式。

dataType：預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷。（dataType有以下幾種類型：）

“xml”: 返回 XML 文檔，可用 jQuery 處理。

“html”：返回純文本 HTML 信息；包含的script標籤會在插入dom時執行。

“script”：返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。注意：在遠程請求時(不在同一個域下)，所有POST請求都將轉爲GET請求。(因爲將使用DOM的script標籤來加載)

***“json”***：返回 JSON 數據。

“jsonp”: JSONP 格式。使用 JSONP 形式調用函數時，如 “myurl?callback=?” jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

“text”: 返回純文本字符串。

success：請求成功後的回調函數。參數：由服務器返回，並根據dataType參數進行處理後的數據；描述狀態的字符串。

type：(默認：“GET”) 請求方式 (“POST” 或 “GET”)，默認爲 “GET”。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

url：(默認：當前頁地址) 發送請求的地址。

async：默認設置下，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲 false。

complete(XHR, TS)：請求完成，回調的函數。

error：請求失敗時調用此函數。

timeout：設置超時時間

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jQuery ajax</title>

    <%--
        async: 默認設置下，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲 false。
        complete(XHR, TS) ： 請求完成，回調的函數
        contentType ：默認值: "application/x-www-form-urlencoded" (屬性名=值)。設置Content-Type
        data : String，必須爲 Key/Value 格式。
        dataType ： 預期服務器返回的數據類型(html,xml,json,jasonp,script,text)。
        error ： 請求失敗時調用此函數。
        success： 請求成功後的回調函數。
        timeout：超時時間
        type: 請求方式
        url：請求路徑
    --%>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script>

        function fn1() {
            /**
             * ajax參數設置使用
             */
            $.ajax({
                async: true,
                type: "get",
                contentType: "application/x-www-form-urlencoded",
                url: "${pageContext.request.contextPath}/demo",
                data: {
                    "username": "root",
                    "password": "root123"
                },
                success: function (data) {
                    //在此回調函數中編寫處理代碼
                },
                error: function () {

                },
                dataType: "json",
                timeout: "10000",
            });

            /**
             * ajax常用參數
             */
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/demo",
                data: {
                    "username": "root",
                    "password": "root123"
                },
                success: function (data) {
                    //在此回調函數中編寫處理代碼
                },
                dataType: "json",
            });
        }
    </script>
</head>
<body>
<button onclick="fn1()">ajax請求</button>
</body>
</html>

7.4 get和post方法

7.4.1 get方法

$.get() 方法通過 HTTP GET 請求從服務器上請求數據。

語法：$.get(url,data,callback,type);

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>get請求</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
    /**
     * jQuery Ajax步驟
     */
    function fn1() {
    	//請求地址,發送到服務器的數據(請求正文),回調函數,預期服務器返回的數據類型
        //$.get(url,data,callback,type);
    
        var url = "${pageContext.request.contextPath}/demo";
        var data = {"username": "ziph", "password": "123456"}
        /**
         * type=json,get方法內部就會自動將服務器返回的json字符串解析成js對象
         * @param data 服務器響應正文（js對象）
         */
        var callback = function (data) {
            //在回調函數內編寫處理代碼
        };
        var type = "json";
        $.get(url, data, callback, type);
    }

    /**
     * jQuery Ajax步驟整合版
     */
    function fn2() {
        $.get("${pageContext.request.contextPath}/demo",
            {
                "username": "ziph",
                "password": "123456"
            }, function (data) {
                //在回調函數內編寫處理代碼
            }, "json");
    }
</script>
</body>
</html>

7.4.2 post方法

$.post() 方法通過 HTTP POST 請求從服務器上請求數據。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>post請求</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
    /**
     * post請求
     */
    function fn1() {
        //$.post(url,data,callback,type);
        $.post("${pageContext.request.contextPath}/demo",
            {
                "username": "ziph",
                "password": "123456"
            }, function (data) {
                //在此回調函數中編寫處理代碼
            }, "json");
    }
</script>
</body>
</html>

7.5 註冊案例

需求：在頁面中提供用戶名、密碼、註冊按鈕。加入數據庫校驗，需要註冊的用戶名是否在數據庫中存在，如果存在則提示“用戶名不可用”並控制註冊按鈕不可以點擊註冊，如果不存在則提示“用戶名可用”並控制註冊按鈕可以點擊註冊，註冊成功後提示註冊成功（因爲案例內容不多比較小，註冊成功後沒有將表單數據儲存數據庫！）。

c3p0.properties

c3p0.driverClass=com.mysql.jdbc.Driver
c3p0.jdbcUrl=jdbc:mysql://localhost:3306/temp
c3p0.user=root
c3p0.password=123456

User實體類

package com.mylifes1110.java.bean;

public class User {
    private Integer id;
    private String  username;
    private String  password;

    public User() {}

    public User(Integer id, String username, String password) {
        this.id       = id;
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" + "id=" + id + ", username='" + username + '\'' + ", password='" + password + '\'' + '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
}

CheckUsernameServlet檢查註冊用戶名是否存在

package com.mylifes1110.java.controller;

import java.io.IOException;

import java.sql.SQLException;

import java.util.HashMap;

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 com.mylifes1110.java.service.UserService;
import com.mylifes1110.java.service.impl.UserServiceImpl;
import com.mylifes1110.java.utils.JSONUtils;

@WebServlet(
    name  = "CheckUsernameServlet",
    value = "/checkUsername"
)
public class CheckUsernameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");

        String      username    = request.getParameter("username");
        UserService userService = new UserServiceImpl();

        try {
            boolean                 flag = userService.checkUsername(username);
            String                  msg  = flag
                                           ? "用戶名可用！"
                                           : "用戶名存在！";
            HashMap<String, Object> map  = new HashMap<>();

            map.put("flag", flag);
            map.put("msg", msg);
            JSONUtils.writeJsonStr(response, map);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

RegisterServlet提示註冊成功

package com.mylifes1110.java.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(
    name  = "RegisterServlet",
    value = "/register"
)
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");
        response.getWriter().println("恭喜你註冊成功！");
    }
}

Dao層數據庫訪問

package com.mylifes1110.java.dao;

import com.mylifes1110.java.bean.User;

import java.sql.SQLException;

public interface UserDao {
    User checkUsername(String username) throws SQLException;
}

package com.mylifes1110.java.dao.impl;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import com.mylifes1110.java.bean.User;
import com.mylifes1110.java.dao.UserDao;
import com.mylifes1110.java.utils.DBUtils;

public class UserDaoImpl implements UserDao {
    @Override
    public User checkUsername(String username) throws SQLException {
        return new QueryRunner(DBUtils.getDataSource()).query("select * from tb_user where username = ?",
                                                              new BeanHandler<User>(User.class),
                                                              username);
    }
}

Service層業務處理

package com.mylifes1110.java.service;

import java.sql.SQLException;

public interface UserService {
    boolean checkUsername(String username) throws SQLException;
}

package com.mylifes1110.java.service.impl;

import java.sql.SQLException;

import com.mylifes1110.java.bean.User;
import com.mylifes1110.java.dao.UserDao;
import com.mylifes1110.java.dao.impl.UserDaoImpl;
import com.mylifes1110.java.service.UserService;

public class UserServiceImpl implements UserService {
    private UserDao userDao = new UserDaoImpl();

    @Override
    public boolean checkUsername(String username) throws SQLException {
        User user = userDao.checkUsername(username);

        if (user != null) {

            // 用戶名存在
            return false;
        } else {

            // 用戶名可用
            return true;
        }
    }
}

DBUtils

package com.mylifes1110.java.utils;

import com.mchange.v2.c3p0.ComboPooledDataSource;

public class DBUtils {
    private static ComboPooledDataSource dataSource;

    static {
        dataSource = new ComboPooledDataSource();
    }

    public static ComboPooledDataSource getDataSource() {
        return dataSource;
    }
}

JSONUtils

package com.mylifes1110.java.utils;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JSONUtils {
    public static String toJsonStr(Object o) throws JsonProcessingException {
        return new ObjectMapper().writeValueAsString(o);
    }

    public static void writeJsonStr(HttpServletResponse response, Object o) throws IOException {
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(toJsonStr(o));
    }
}

register.jsp頁面

<%--
  Created by IntelliJ IDEA.
  User: Ziph
  Date: 2020/5/15
  Time: 21:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>register</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function checkUsername() {
            var username = $("#username").val();
            console.log(username);
            $.post("${pageContext.request.contextPath}/checkUsername",
                {
                    "username": username
                }, function (data) {
                    console.log(data);
                    var flag = data.flag;
                    var msg = data.msg;
                    var btn = $("button[type='submit']");
                    if (flag) {
                        $("#span").html("<font color='#1e90ff'>" + msg + "</font>");
                        //用戶可以使用該用戶名註冊的時候，按鈕可以點擊
                        btn.attr("disabled", false);
                    } else {
                        $("#span").html("<font color='red'>" + msg + "</font>");
                        //用戶不可以使用該用戶名註冊的時候，按鈕不可以點擊
                        btn.attr("disabled", true);
                    }
                }, "json");
        }
    </script>
</head>
<body>
<form action="${pageContext.request.contextPath}/register" method="post">
    賬戶：<input type="text" name="username" id="username" onchange="checkUsername()"><span id="span"></span><br>
    密碼：<input type="text" name="password" id="password"><br>
    <button type="submit">註冊</button>
</form>
</body>
</html>