一款特好用的JavaScript框架——JQuery（轉載）

 

  瞭解瞭解

                

　   jQuery是一個快速，小巧，功能豐富的JavaScript庫。它使諸如HTML文檔遍歷和操縱，事件處理，動畫和Ajax等事情變得簡單得多，並且易於使用的API能夠在多種瀏覽器中使用。

 

1、 什麼是JQuery？

jQuery是一個JavaScript函數庫。

jQuery是一個輕量級的"寫的少，作的多"的JavaScript庫。　　

jQuery 的功能歸納

　　一、html 的元素選取

　　二、html的元素操做

　　三、html dom遍歷和修改

　　四、js特效和動畫效果

　　五、css操做

　　六、html事件操做

　　七、ajax異步請求方式

 

2、 JQuery基礎中的基礎

 

2-1JQuery基本語法

 

jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。

首先，在使用JQuery以前要先導入JQuery文件。

<script src="js/jquery-3.1.1.js"></script>

JQuery中的選擇器

$("選擇器").函數();

注意：

　　① $是JQuery的縮寫，便可以使用JQuery("選擇器").函數()；

　　② 選擇器，能夠是任何的CSS支持的選擇符；

小實例：

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

• $("p").hide() - 隱藏全部 <p> 元素

• $("p.test").hide() - 隱藏全部 class="test" 的 <p> 元素

• $("#test").hide() - 隱藏全部 id="test" 的元素

 

2-2文檔就緒函數

 

文檔就緒函數就是指防止在文檔未徹底加載完成以前，運行JQuery代碼；

$(document).ready(function(){ // JQuery 代碼...  });

它的簡寫形式：

$(function(){ // JQuery 代碼...  });

 

文檔就緒函數和window.onload的區別[仍是比較重要的！！]

① window.onload必須等到網頁中的全部內容加載完成以後，纔會執行代碼(包括圖片、視頻等資源)；

　 文檔就緒函數，只須要在網頁DOM結構加載完成以後，就能夠執行代碼；

② window.onload只能寫一個，寫多個只會執行最後一個；

　 文檔就緒函數，能夠寫多個，而且不會被覆蓋；

 

3、 JQuery中的經常使用函數

JQuery中的函數實在是太多，在這就不一一解釋了，我在下面列舉了一些經常使用的，後面都跟着一個小例子，很是簡單，各位博友們一看就懂~~~

內部插入

append：將建立好的節點，插入到指定位置

$("#div1").append("<p>這是被插入的p標籤</p>");　　　　//在#div1內部的最後，直接插入一個節點。

appendTo：把全部匹配的元素追加到另外一個指定的元素元素集合中

$("<p>這是被插入的p標籤</p>").appendTo("#div1");　　　　//把新節點插入到#div1中

 prepend：把每一個匹配的元素插入到指定元素的開頭

$("#div1").prepend("<p>這是被插入的p標籤</p>");　　　　//在#div1內部的開頭，直接插入一個節點。

 

外部插入

after：在每一個匹配的元素以後插入內容

$("#div1").after("<p>這是被插入的p標籤</p>");　　　　//在div1後面插入一個新節點

insertBefore：把全部匹配的元素插入到另外一個、指定的元素元素集合的前面

$("<p>這是被插入的p標籤</p>").insertBefore("#div1");　　　　//把p標籤插入到div1前面

 

包裹

wrap：把全部匹配的元素用其餘元素的結構化標記包裹起來

$("p").wrap("<div></div>");　　　　//把每一個p標籤外面，都包裹一層div

wrapAll：將全部匹配的元素用單個元素包裹起來

$("p").wrapAll("<div></div>");　　　　//把全部的p標籤，包裹在同一個div中

wrapInner：將每個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來

$("#div1").wrapInner("<div></div>");　　　　//把#div1裏面的全部子元素，用<div>包裹起來

 

替換

replaceWith：將全部匹配的元素替換成指定的HTML或DOM元素

$("p").replaceWith("<span>111</span>");　　　　//將全部匹配的p標籤，所有換爲span標籤

replaceAll：用匹配的元素替換掉全部 selector匹配到的元素

$("<span>111</span>").replaceAll("p");　　　　//用span元素，替換掉全部p標籤

 

刪除

empty：刪除匹配的元素集合中全部的子節點

$("#div1").empty();　　　　//刪除#div1中的全部子元素。 可是#div1依然保留空標籤

remove：從DOM中刪除全部匹配的元素

$("#div1").remove();　　　　//直接從DOM中，刪除#div1以及全部子元素

detach：從DOM中刪除全部匹配的元素

$("#div1").detach();　　　　//直接從DOM中，刪除#div1以及全部子元素

 

remove和detach的異同點

一、相同點

　　① 都會把當前標籤，以及當前標籤的全部子節點，所有刪除；

　　② 均可以在刪除時，把當前節點返回。並可使用變量接受返回的節點，以便後期恢復；

二、不一樣點

　　使用接受的節點，恢復原節點時

　　remove只能恢復節點的內容，可是事件綁定，不能再恢復；

　　detach不但恢復節點的內容，還能再恢復 事件的綁定；

 

複製（克隆）

clone：克隆匹配的DOM元素而且選中這些克隆的副本

$("#div1").clone(true).empty().insertBefore("button:eq(0)");

 

JS中.cloneNode() 和 JQ中 .clone()的區別

　　二者都接受傳入true/false的參數。

　　.cloneNode() 不傳參數或傳入參數false，表示只克隆當前節點，而不克隆子節點。 傳入true表示可隆所有子節點。

　　.clone() 不管傳入哪一個參數，都會克隆全部子節點。可是，不傳參數或者傳入false，表示只克隆節點，不克隆節點綁定的事件。 傳入true表示同時克隆及誒單綁定的事件。

 

4、JQuery中的事件

 

4-1綁定事件的方式

 一、事件綁定的快捷方式

$("button").eq(0).click(function(){ 　　　　alert(1); });

 

 二、使用on()綁定事件

　　① 使用on進行單事件綁定

$("button:eq(0)").on("click",function(){ 　　　　alert(1); });

 

 　　② 使用on，一次性給同一節點添加多個事件執行同一函數，多個事件之間空格分隔

$("button:eq(0)").on("click mouseover dblclick", function(){ 　　　　console.log("觸發了事件"); });

 

 　　③ 一次性給同一節點添加多個事件，分別執行不一樣函數

$("button:eq(0)").on({
　　　　"click":function(){ 　　　　　　　　console.log("執行了click事件"); 　　　　}, 　　　　"mouseover":function(){ 　　　　　　　　console.log("執行了mouseover事件"); 　　　　} });

 

 　　④ 調用函數時，同時給函數傳入指定參數

$("button:eq(0)").on("click",{"name":"jredu","age":14},function(evn){ 　　　　console.log(evn); 　　　　console.log(evn.data.name); 　　　　console.log(evn.data.age); });

 

 　　⑤使用 on 進行事件委派（很是很是很是很是的重要！）

將本來須要綁定在本元素上的事件，改成綁定到祖先節點乃至根節點上，而後委派給當前節點生效

$("p").on("click",function(){});　　 //委派以下↓ $(document).on("click","p",function(){});

 

　　使用事件委派的做用：

　　不使用事件委派的綁定方式，只能綁定到頁面初始化時的標籤上，當頁面新增同類型標籤，這些新增的標籤，不能綁定上事件；但若是使用事件委派，當頁面新增同類型標籤時，這些新增的標籤也可以綁定已有的事件。

5、 JQuery中的動畫

 JQuerey中的動畫也是很是多的，在這就給你們列舉幾個，你們若是以爲不詳細的話，能夠去菜鳥教程或是查看JQuery的幫助文檔！！！

一、.show()  讓隱藏的元素顯示

　　效果爲：同事修改元素的寬度、高度、opacity屬性

　　①不傳參：直接顯示，不進行動畫

　　②傳參時間毫秒數，表示多少毫米內完成函數

　　③傳入(時間，函數)表示動畫完成以後，執行回調函數

二、.hide()  讓顯示的元素隱藏，與show相反。

三、.slideDown()  讓隱藏的元素顯示，效果爲從上往下，增長高度

　  .slideUp()   讓顯示的元素隱藏，效果爲從下往上，減少高度

　  .slideToggle()   讓現實的元素隱藏，讓隱藏的元素顯示

四、.fadeIn()   讓隱藏的元素淡入顯示

　  .fadeOut()  讓顯示的元素淡出隱藏

　  .fadeTogle()  讓顯示的元素隱藏，讓隱藏的元素顯示

　  .fadeTo(時間，最終透明度，函數)  同fadeToggle，接受第二個參數，表示最終達到的透明度

五、.animate({最終的樣式屬性，鍵值對對象}，動畫時間，動畫效果("linear"或"swing"),動畫執行完後的回調函數)

給你們舉個小例子吧

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); }); </script> </head> <body> <button>開始動畫</button> <p>默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

 

他的運行結果： 

 

6、JQuery中的AJAX

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

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

 

6-1JQuery  load()方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

加載遠程的HTML文件代碼，並插入到指定的DOM節點中。能夠只傳入一個參數，表示加載一個靜態的HTML代碼片斷。

$("#div1").load("load.html");

 

6-2$.ajax()

 $.ajax():是JQuery最底層的ajax函數，參數接收一個大對象。對象裏面的屬性和方法，表示ajax請求的相關設置：

　　① url : 請求遠程文件的路徑

　　② type： Ajax請求的類型，可選值 get/post

　　③ data: 對象格式。向後臺發送一個對象，表示傳遞的數據。

　　　　　   經常使用與type爲"post"的請求方式；

　　　　　   若是type爲"get"，能夠直接使用？追加在URL的後面。

　　④ dataType ：預期後臺返回什麼類型的數據。 "text"-字符串   "json"-JSON對象

　　⑤ success: 請求成功的回調函數。參數接受一個data，表示後臺返回的數據。

　　⑥ error : 請求失敗的時候的回調函數

　　⑦ statusCode ： 接受一個對象，對象的鍵值對是status狀態碼和對應的回調函數，表示當請求狀態碼是對應數字時，執行具體的操做函數。

　　　　200-正常請求成功     404-頁面沒有找到    500-服務器內部錯誤。具體的狀態碼見下圖

　　　　

$.get();  $.post(); 這兩個函數，是在$.ajax()的基礎上進行封裝而來。能夠直接默認發送get請求或post請求；

接受四個參數：

　　① 請求的URL路徑。 至關於$.ajax()裏面的url；

　　② 向後臺傳遞的數據。 至關於$.ajax()裏面的data；

　　③ 請求成功的回調函數。 至關於$.ajax()裏面的success；

　　④ 預期返回的數據類型。 至關於$.ajax()裏面的dataType；

$.post("http://localhost/json.php",{data:"aaa"},function(data){ 　　　　console.log(data); },"json");

 

 給你們舉上兩個栗子

<html>
<head>
<meta charset="utf-8">
<title>小栗子</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){ $("button").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"小栗子", url:"http://www.baidu.com" }, function(data,status){ alert("數據: \n" + data + "\n狀態: " + status); }); }); }); </script> </head> <body> <button>點擊發送一個POST請求</button> </body> </html>

POST

 

運行結果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小栗子</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){ $("button").click(function(){ $.get("/try/ajax/demo_test.php",function(data,status){ alert("數據: " + data + "\n狀態: " + status); }); }); }); </script> </head> <body> <button>點擊發送GET請求</button> </body> </html>

GET