其實在沒有接觸一件東西之前，總是感覺它很神祕，會感覺學習起來很困難，的確是如此。不只是感覺，是真的很困難。
雖然每一門編程語言都有相似的地方，c，java，scala，php，JavaScript，python，但是想要學好真的好難。
簡介
jQuery 並不是一門新語言，它是一個 JavaScript 庫。極大地簡化了 JavaScript 編程。
它的語法也有自己的風格
通過jQuery，可以選取（查詢，query）HTML元素，並對它們進行操作（actions）
jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。
在使用jquery之前，必須要對html和css，js有一定了解。
基礎語法
$(selector).action()
- 選擇符（selector）“查詢"和"查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
例如：
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏 id="test" 的元素
文檔就緒事件：
$(document).ready(function(){
// 開始寫 jQuery 代碼...
});
這是爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成後纔可以對 DOM 進行操作。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗
上面的寫法的簡寫爲：
$(function(){
// 開始寫 jQuery 代碼...
});
jQuery選擇器
jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()。
元素選擇器
根據元素名選擇元素
如選擇頁面中所有
元素：
$("p")
看一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
$("button").hide();
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>標題</h2>
<p>段落1。</p>
<p>段落2。</p>
<button>點此隱藏</button>
</body>
</html>
#id 選擇器
通過HTML元素的id屬性選取指定的元素
和css一樣，注意id 前面要加 # ，而且頁面中元素的id 是唯一的。
$("#id")
.clsss選擇器
通過HTML元素的 class屬性 選取指定的元素
$(".class")
更多實例
| 語法 | 描述 |
|---|---|
| $("*") | 選取所有元素 |
| $(this) | 選取當前 HTML 元素 |
| $(“p.intro”) | 選取 class 爲 intro 的 <p> 元素 |
| $(“p:first”) | 選取第一個 <p> 元素 |
| $(“ul li:first”) | 選取第一個 <ul> 元素的第一個 <li> 元素 |
| $(“ul li:first-child”) | 選取每個 <ul> 元素的第一個 <li> 元素 |
| $("[href]") | 選取帶有 href 屬性的元素 |
| $(“a[target=’_blank’]”) | 選取所有 target 屬性值等於 “_blank” 的 <a> 元素 |
| $(“a[target!=’_blank’]”) | 選取所有 target 屬性值不等於 “_blank” 的 <a> 元素 |
| $(":button") | 選取所有 type=“button” 的 <input> 元素 和 <button> 元素 |
| $(“tr:even”) | 選取偶數位置的 <tr> 元素 |
| $(“tr:odd”) | 選取奇數位置的 <tr> 元素 |
jQuery事件
jQuery 是爲事件處理特別設計的。
什麼是事件？
頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
如
- 在元素上移動鼠標。
- 選取單選按鈕
- -點擊元素
常見DOM事件
| 鼠標事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jQuery 事件方法語法
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
如頁面中指定一個點擊事件：
$("p").click();
下一步是定義什麼時間觸發事件。您可以通過一個事件函數實現：
$("p").click(function(){
// 動作觸發後執行的代碼!!
});
常用jQuery事件方法
$(document).ready()
$(document).ready() 方法允許我們在文檔完全加載完後執行函數。該事件方法在 jQuery 語法 章節中已經提到過
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
該函數在用戶點擊 HTML 元素時執行。
$("p").click(function(){
$(this).hide();
});
dblclick()
當雙擊元素時，會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數，用法和click()類似
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
當鼠標指針穿過元素時，會發生 mouseenter 事件。
mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數：
和css 中的house不同，house是暫時的，而mouseenter是永久的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert('您的鼠標移到了 id="p1" 的元素上!');
});
});
</script>
</head>
<body>
<p id="p1">鼠標指針進入此處，會看到彈窗。</p>
</body>
</html>
mouseleave()
當鼠標指針離開元素時，會發生 mouseleave 事件。
mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：
$("#p1").mouseleave(function(){
alert("再見，您的鼠標離開了該段落。");
});
只有鼠標離開元素時纔會觸發該事件，如果鼠標根本沒有觸碰到元素，也就沒有離開元素的事件。
mousedown()
當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。
和click() 事件類似
mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數：
$("#p1").mousedown(function(){
alert("鼠標在該段落上按下！");
});
mouseup()
當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數：
$("#p1").mouseup(function(){
alert("鼠標在段落上鬆開。");
});
hover()
hover()方法用於模擬光標懸停事件。
mouseenter，mouseleave 的結合
當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。
$("#p1").hover(
function(){
alert("你進入了 p1!");
},
function(){
alert("拜拜! 現在你離開了 p1!");
}
);
focus()
當元素獲得焦點時，發生 focus 事件。
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數：
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
當元素失去焦點時，發生 blur 事件。
blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數：
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
jQuery 效果
| 方法 | 效果 |
|---|---|
| hide() | 隱藏元素 |
| show() | 顯示元素 |
| toggle() | 切換hide() 和show() 方法 |
| fadeIn() | 元素淡入 |
| fadeOut() | 元素淡出 |
| fadeToggle() | 切換fadeIn()和fadeOut() 方法 |
| fadeTo() | 漸變 |
| slideDown() | 向下滑動元素 |
| slideUp() | 向上滑動元素 |
| slideToggle() | 切換slideDown() 和slideUp() 方法 |
| animate() | 創建自定義動畫 |
| stop() | 停止動畫 |
| callback | 在當前動畫完成後執行 |
jQuery 中可以使用 . 來鏈接多個效果
jQuery HTML
前面說過:jQuery 並不是一門新語言，它是一個 JavaScript 庫。極大地簡化了 JavaScript 編程。
所以jQuery 擁有可操作 HTML 元素和屬性的強大方法。
DOM
DOM (Document Object Model) 譯爲文檔對象模型，是 HTML 和 XML 文檔的編程接口。
HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。
DOM 以樹結構表達 HTML 文檔。
獲得內容 -text(), html(), val()
三個簡單實用的用於 DOM 操作的 jQuery 方法：
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
使用text,html獲取元素內容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
document.getElementById("showtext").innerHTML = "Text: " + $("#test").text();
}());
$("#btn2").click(function(){
document.getElementById("showhtml").innerHTML = "HTML: " + $("#test").html();
}());
});
</script>
</head>
<body>
<p id="test">這是段落中的 <b>粗體</b> 文本。</p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
<p id="showtext"> </p>
<p id="showhtml"> </p>
</body>
</html>
使用val 獲取輸入字段的值。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("show").innerHTML = $("#test").val();
});
});
</script>
</head>
<body>
<p>名稱: <input type="text" id="test" value="菜鳥教程"></p>
<button>顯示值</button>
<p id="show"></p>
</body>
</html>
結果：
使用attr獲取屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
document.getElementById("show").innerHTML = $("#baidu").attr("href");
});
});
</script>
</head>
<body>
<p><a href="https://www.baidu.com" id="baidu">百度</a></p>
<button>顯示 href 屬性的值</button>
<p id="show"></p>
</body>
</html>
attr 和 prop 的區別介紹：
- 對於 HTML 元素本身就帶有的固有屬性，在處理時，使用 prop 方法。
- 對於 HTML 元素我們自己自定義的 DOM 屬性，在處理時，使用 attr 方法。
設置內容
可以通過 text() , html(), val() 設置內容
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("旭哥好帥!");
});
$("#btn2").click(function(){
$("#test2").html("<b>旭哥好帥!</b>");
});
$("#btn3").click(function(){
$("#test3").val("旭哥好帥");
});
});
</script>
</head>
<body>
<p id="test1">Hello</p>
<p id="test2">Hello</p>
<p>輸入框: <input type="text" id="test3" value="Hello"></p>
<button id="btn1">text設置</button>
<button id="btn2">html設置</button>
<button id="btn3">val設置</button>
</body>
</html>
也可以通過attr設置屬性
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
增刪元素
添加元素
- append() - 在被選元素的結尾插入內容
- prepend() - 在被選元素的開頭插入內容
- after() - 在被選元素之後插入內容
- before() - 在被選元素之前插入內容
上面的方法都可以同時添加多個元素
append/prepend 實在選擇元素內部嵌入，
<p> prepend嵌入的內容 原本的文檔 append嵌入的內容</p>
after/before是在元素外面追加
before 追加的內容
原本的文檔
after追加的內容刪除元素
刪除元素和內容，可以使用以下兩個方法
- remove() 刪除被選元素（及其子元素）
- empty() 刪除被選元素的子元素，但是不刪除被選元素，即使被選元素爲空
$("#div1").remove(); //刪除id爲dive1的元素
$("p").remove(".italic");//刪除所有class爲itable的元素
$("#div2").empty();//刪除id爲div2的元素的子元素
jQuery CSS
CSS類
jQuery 可以使用下面方法操作CSS
- addClass() - 向被選元素添加一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行添加/刪除類的切換操作
- css() - 設置或返回樣式屬性
addClass()
向被選元素添加一個或多個類
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
.......
<script>
$("button").click(function(){
$("h1,h2").addClass("blue");
$("div").addClass("important");
$("p").addClass("important blue");
});
</script>
......
removeClass()
刪除指定的 class 屬性：
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass()
該方法對被選元素進行添加/刪除類的切換操作：
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() 方法
css() 方法設置或返回被選元素的一個或多個樣式屬性。
返回CSS屬性的值
將返回首個匹配元素（p）的 background-color 值：
$("p").css("background-color");
設置CSS屬性
爲所有匹配元素設置 background-color 值：
$("p").css("background-color","yellow");
設置多個 CSS 屬性
設置多個 CSS 屬性，使用如下語法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子將爲所有匹配元素設置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸
- width() 設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。
- height() 設置或返回元素的高度（不包括內邊距、邊框或外邊距）。
- innerWidth() 返回元素的寬度（包括內邊距）。
- innerHeight() 返回元素的高度（包括內邊距）。
- outerWidth() 返回元素的寬度（包括內邊距和邊框）。
- outerHeight() 返回元素的高度（包括內邊距和邊框）。
![在這裏插入圖片描述]()
jQuery 遍歷元素
Query 遍歷，意爲"移動"，用於根據其相對於其他元素的關係來"查找"（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您期望的元素爲止。
-
元素是
- 的父元素，同時是其中所有內容的祖先。
-
- 元素是
- 元素的父元素，同時是 的子元素
- 左邊的
- 元素是 的父元素，
- 的子元素，同時是
的後代。 - 元素是
- 的子元素，同時是
- 和
的後代。 - 兩個
- 元素是同胞（擁有相同的父元素）。
- 右邊的
- 元素是 的父元素，
- 的子元素，同時是
的後代。 - 元素是右邊的
- 的子元素，同時是
- 和
的後代。
- 元素的父元素，同時是
注意，遍歷的結果返回的是元素
向上遍歷 DOM 樹(遍歷祖先)
下面這些 jQuery 方法用於向上遍歷 DOM 樹：
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被選元素的直接父元素。
該方法只會向上一級對 DOM 樹進行遍歷。
下面的例子返回每個 <span> 元素的直接父元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
jQuery parents() 方法
parents() 方法返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。
下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
您也可以使用可選參數來過濾對祖先元素的搜索。
下面的例子返回所有 元素的所有祖先，並且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。
下面的例子返回介於 與
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍歷 DOM 樹(遍歷後代)
- children()
- find()
jQuery children() 方法
children() 方法返回被選元素的所有直接子元素。
該方法只會向下一級對 DOM 樹進行遍歷。
$(document).ready(function(){
$("div").children();
});
可以使用可選參數來過濾對子元素的搜索。
下面的例子返回類名爲 “1” 的所有 <p> 元素，並且它們是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
在 DOM 樹中水平遍歷(遍歷同胞)
siblings()
siblings() 方法返回被選元素的所有同胞元素。
$(document).ready(function(){
$("h2").siblings();
//$("h2").siblings("p"); 返回h2同胞元素中所有的<p> 元素
});
next()
next() 方法返回被選元素的下一個同胞元素。
該方法只返回一個元素。
$(document).ready(function(){
$("h2").next();
});
nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
下面的例子返回 <h2> 的所有跟隨的同胞元素：
$(document).ready(function(){
$("h2").nextAll();
});
nextUntil()
nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素。
下面的例子返回介於 <h2> 與 <h6> 元素之間的所有同胞元素：
$(document).ready(function(){
$("h2").nextUntil("h6");
});
prev()， prevAll()， prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞之前元素遍歷，而不是之後元素遍歷）。
jQuery - AJAX
jQuery - AJAX load()
load() 方法從服務器加載數據，並把返回的數據放入被選元素中。
$(selector).load(URL,data,callback);
- url: 必須 待加載的URL，可以將選擇器添加到URL參數。
如：$("#div1").load("test.txt #p1");將文件中id=“p1” 的元素的內容，加載到id=“div1” 的元素中。 - data : 可選，與請求一同發送的查詢字符串鍵值對集合
- callback : 可選是 load() 方法完成後所執行的函數名稱。
看下面這個例子，當點擊按鈕時，會加載文件中的內容，並將其設置到id=div1的元素中。
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt");
});
});
可選的 callback 參數規定當 load() 方法完成後所要允許的回調函數。回調函數可以設置不同的參數：
- responseTxt - 包含調用成功時的結果內容
- statusTXT - 包含調用的狀態
- xhr - 包含 XMLHttpRequest 對象
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從服務器請求數據。
HTTP 請求：GET vs. POST
兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。
- GET - 從指定的資源請求數據
- POST - 向指定的資源提交要處理的數據
GET 基本上用於從服務器獲得（取回）數據。GET 方法可能返回緩存數據。
POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從服務器上請求數據
$.get(URL,callback);
- URL 請求的URL
- callback 請求成功後執行的函數名
有這樣一個php文件：
test.php
<?php
echo '這是個從PHP文件中讀取的數據。';
?>
可以使用get方法從中讀取數據：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/test.php",function(data,status){
document.getElementById("show").innerHTML = "數據: " + data + "\n狀態: " + status;
});
});
});
</script>
</head>
<body>
<button>發送一個 HTTP GET 請求並獲取返回結果</button>
<P id="show"></P>
</body>
</html>
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求向服務器提交數據。
$.post(URL,data,callback);
- URL 希望請求的 URL。
- data 連同請求發送的數據。
- callback 請求成功後所執行的函數名。
下面的例子使用 $.post() 連同請求一起發送數據：
回調函數中。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("test_post.php",{
name:"旭哥",
password:"旭哥好帥"
},//這是傳遞的數據
function(data,status){
alert("數據: \n" + data + "\n狀態: " + status);
});//請求成功後執行的函數，data 是被請求頁面的內容，status是請求的狀態
});
});
</script>
</head>
<body>
<button>發送一個 HTTP POST 請求頁面並獲取返回內容</button>
</body>
</html>
test_post.php文件：
php文件接受傳過來的數據，並進行處理
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$password = isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '';
echo '輸入的用戶名: ' . $name;
echo "\n";
echo '輸入的密碼: ' .$password;
?>