瞭解瞭解 jQuery是一個快速,小巧,功能豐富的JavaScript庫。它使諸如HTML文檔遍歷和操縱,事件處理,動畫和Ajax等事情變得簡單得多,而且易於使用的API可以在多種瀏覽器中使用。 一、 什麼是JQuery? jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的" ...
瞭解瞭解
jQuery是一個快速,小巧,功能豐富的JavaScript庫。它使諸如HTML文檔遍歷和操縱,事件處理,動畫和Ajax等事情變得簡單得多,而且易於使用的API可以在多種瀏覽器中使用。
一、 什麼是JQuery? |
jQuery是一個JavaScript函數庫。
jQuery是一個輕量級的"寫的少,做的多"的JavaScript庫。
jQuery 的功能概括
1、html 的元素選取
2、html的元素操作
3、html dom遍歷和修改
4、js特效和動畫效果
5、css操作
6、html事件操作
7、ajax非同步請求方式
二、 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只能寫一個,寫多個只會執行最後一個;
文檔就緒函數,可以寫多個,並且不會被覆蓋;
三、 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的異同點
1、相同點
① 都會把當前標簽,以及當前標簽的所有子節點,全部刪除;
② 都可以在刪除時,把當前節點返回。並可以使用變數接受返回的節點,以便後期恢復;
2、不同點
使用接受的節點,恢複原節點時
remove只能恢復節點的內容,但是事件綁定,不能再恢復;
detach不但恢復節點的內容,還能再恢復 事件的綁定;
複製(克隆)
clone:克隆匹配的DOM元素並且選中這些克隆的副本
$("#div1").clone(true).empty().insertBefore("button:eq(0)");
JS中.cloneNode() 和 JQ中 .clone()的區別
兩者都接受傳入true/false的參數。
.cloneNode() 不傳參數或傳入參數false,表示只克隆當前節點,而不克隆子節點。 傳入true表示可隆全部子節點。
.clone() 無論傳入哪個參數,都會克隆所有子節點。但是,不傳參數或者傳入false,表示只克隆節點,不克隆節點綁定的事件。 傳入true表示同時克隆及誒單綁定的事件。
四、JQuery中的事件 |
4-1綁定事件的方式
1、事件綁定的快捷方式
$("button").eq(0).click(function(){
alert(1); });
2、使用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(){});
使用事件委派的作用:
不使用事件委派的綁定方式,只能綁定到頁面初始化時的標簽上,當頁面新增同類型標簽,這些新增的標簽,不能綁定上事件;但如果使用事件委派,當頁面新增同類型標簽時,這些新增的標簽也能夠綁定已有的事件。
五、 JQuery中的動畫 |
JQuerey中的動畫也是非常多的,在這就給大家列舉幾個,大家如果覺得不詳細的話,可以去菜鳥教程或是查看JQuery的幫助文檔!!!
1、.show() 讓隱藏的元素顯示
效果為:同事修改元素的寬度、高度、opacity屬性
①不傳參:直接顯示,不進行動畫
②傳參時間毫秒數,表示多少毫米內完成函數
③傳入(時間,函數)表示動畫完成之後,執行回調函數
2、.hide() 讓顯示的元素隱藏,與show相反。
3、.slideDown() 讓隱藏的元素顯示,效果為從上往下,增加高度
.slideUp() 讓顯示的元素隱藏,效果為從下往上,減小高度
.slideToggle() 讓現實的元素隱藏,讓隱藏的元素顯示
4、.fadeIn() 讓隱藏的元素淡入顯示
.fadeOut() 讓顯示的元素淡出隱藏
.fadeTogle() 讓顯示的元素隱藏,讓隱藏的元素顯示
.fadeTo(時間,最終透明度,函數) 同fadeToggle,接受第二個參數,表示最終達到的透明度
5、.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>
他的運行結果:
六、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