5.jQuery&Ajax

時間 2019-12-11

標籤 5.jquery&ajax jquery ajax 欄目 JQuery 简体版

原文原文鏈接

1.jQuery

什麼是 jQuery ？

jQuery是一個JavaScript函數庫。jQuery是一個輕量級的"寫的少，作的多"的JavaScript庫。包含如下功能：css

HTML 元素選取
HTML 元素操做
CSS 操做
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

引用：html

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

jQuery 語法

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

基礎語法： $(selector).action()jquery

美圓符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操做

實例:ajax

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

$("p").hide() - 隱藏全部段落app

$("p .test").hide() - 隱藏全部 class="test" 的段落異步

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

文檔就緒事件

您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中：ide

 $(document).ready(function(){

   // 開始寫 jQuery 代碼...

 }); 

或是

 $(function(){

   // 開始寫 jQuery 代碼...

 });

jQuery 基本選擇器

//元素選擇器
$(document).ready(function(){ 
 $("button").click(function(){ 
   $("p").hide();   //選擇P標籤
 }); 
});


//#ID選擇器
$(document).ready(function(){ 
 $("button").click(function(){ 
   $("#test").hide(); 
 }); 
});

//.class 選擇器
$(document).ready(function(){ 
 $("button").click(function(){ 
    $(".test").hide(); 
 }); 
});

//

jQeury基本操做

//addClass()方法給元素加class
$(".text-primary").addClass("animated shake");

//刪除HTML元素的class
$("#target2").removeClass("btn-default");


//改變HTML元素的CSS樣式
$("#target1").css("color", "blue"); //注意此處屬性和值都是「」

//設置元素不可用
$("button").prop("disabled", true);

//改變元素中的文本
$("h3").html("<em>jQuery Playground</em>");

//刪除一個HTML元素
$("#target4").remove();

//使用appendTo()移動HTML元素
$("#target4").appendTo("#left-well");

//使用clone()方法複製元素
$("#target2").clone().appendTo("#right-well");

//使用parent()操做父級元素
$("#left-well").parent().css("background-color", "blue")

//使用parent()操做子級元素
$("#left-well").children().css("color", "blue")

//使用target:nth-child(n) CSS選擇器獲取子元素
$(".target:nth-child(3)").addClass("animated bounce");

//使用選擇器操做偶數索引元素，由於索引0對應的是第一個元素，因此奇數索引，偶數元素，
$(".target:odd").addClass("animated shake");偶數
$(".target:even").addClass("animated shake");奇數

2.Ajax

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。經過在後臺與服務器進行少許數據交換，AJAX 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

AJAX的工做原理至關於在用戶和服務器之間加了—箇中間層(AJAX引擎)，使用戶操做與服務器響應異步化。

先來敲個Ajax實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>

</body>
</html>

AJAX - 建立 XMLHttpRequest 對象

XMLHttpRequest 是 AJAX 的基礎。XmlHttpRequest 術語縮寫爲XHR，中文能夠解釋爲可擴展超文本傳輸請求。

XMLHttpRequest 對象能夠在不向服務器提交整個頁面的狀況下，實現局部更新網頁。

構建代碼：

var xmlhttp; 
if (window.XMLHttpRequest) 
  {// code for IE7+, Firefox, Chrome, Opera, Safari 
  xmlhttp=new XMLHttpRequest(); 
  } 
else 
  {// code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  }

XHR 請求

如需將請求發送到服務器，咱們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true); 
xmlhttp.send();

open(method,url,async)：

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

send(string)：將請求發送到服務器。

string：僅用於 POST 請求

GET請求：

xmlhttp.open("GET","demo_get2.html?fname=Henry&name=Ford",true); 
xmlhttp.send();

POST請求：

xmlhttp.open("POST","ajax_test.html",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

XHR 響應

得到來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

responseText：得到字符串形式的響應數據。
responseXML：得到 XML 形式的響應數據。

<!--responseText -->
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

<!--responseXML -->
xmlDoc=xmlhttp.responseXML; 
txt=""; 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++) 
  { 
  txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
  } 
document.getElementById("myDiv").innerHTML=txt;

當發送一個請求後，客戶端須要肯定這個請求何時會完成，所以，XMLHttpRequest對象提供了 onreadystatechange 事件機制來捕獲請求的狀態，繼而實現響應。

在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function() 
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
  }

XHR.readyState狀態的變化以下：