JQuery：選擇器、動畫、AJAX請求

時間  2019-12-08
標籤 jquery 選擇器 動畫 ajax 請求 欄目 JQuery 简体版
原文   原文鏈接

 

選擇器javascript

一、事件編程與動畫效果css

    一個選擇器能夠在概念上理解爲指針。藉助與JQuery庫中的選擇器$，線程能夠獲取到界面元素的引用，從而能夠調用 ready()、click()方法把用戶事件和動做方法關聯起來，同時還能夠調用show()、hide()、toggle()、slideUp()、slideDown()等實現jQuery內置的動畫效果。html

    更進一步，若是使用JQuery Easing，那麼對應函數的參數不是字符串而是字典，能夠得到豐富的效果。使用JQuery Easing的代碼以下：java

$(element).slideUp({ 
    duration: 1000,  
    easing: method,  
    complete: callback 
});     

參數duration：定義動畫運動時間，毫秒，其實就是速度，時間越短，運動速度越快。
參數easing：指定動畫效果，Easing js提供多種動畫效果，有勻速運動、變加速運動、緩衝波動效果。
參數complete：動畫結束後回調函數callback，能夠自定義動畫結束後的調用函數。jquery

ps1: $("#e")[0] 等價於 document.getElementById("e")，$(function(){})等價於$(document).ready(function(){})ajax

ps2: 說一下jquery $(document).ready() 與window.onload的區別編程

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。json

window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 數組

$(document).ready()能夠同時編寫多個，而且均可以獲得執行瀏覽器

 

 二、多種選擇方法

    選擇器使用方法以下：

$("#myELement")    選擇id值等於myElement的元素，id值不能重複在文檔中只能有一個id值是myElement因此獲得的是惟一的元素 
$("div")           選擇全部的div標籤元素，返回div元素數組 
$(".myClass")      選擇使用myClass類的css的全部元素 
$("*")             選擇文檔中的全部的元素，能夠運用多種的選擇方式進行聯合選擇：例如$("#myELement,div,.myclass") 
層疊選擇器： 
$("form input")         選擇全部的form元素中的input元素 
$("#main > *")          選擇id值爲main的全部的子元素 
$("label + input")     選擇全部的label元素的下一個input元素節點，經測試選擇器返回的是label標籤後面直接跟一個input標籤的全部input標籤元素 
$("#prev ~ div")       同胞選擇器，該選擇器返回的爲id爲prev的標籤元素的全部的屬於同一個父元素的div標籤 
基本過濾選擇器： 
$("tr:first")               選擇全部tr元素的第一個 
$("tr:last")                選擇全部tr元素的最後一個 
$("input:not(:checked) + span")   
過濾掉：checked的選擇器的全部的input元素 
$("tr:even")               選擇全部的tr元素的第0，2，4... ...個元素（注意：由於所選擇的多個元素時爲數組，因此序號是從0開始） 
$("tr:odd")                選擇全部的tr元素的第1，3，5... ...個元素 
$("td:eq(2)")             選擇全部的td元素中序號爲2的那個td元素 
$("td:gt(4)")             選擇td元素中序號大於4的全部td元素 
$("td:ll(4)")              選擇td元素中序號小於4的全部的td元素 
$(":header") 
$("div:animated") 
內容過濾選擇器： 
$("div:contains('John')") 選擇全部div中含有John文本的元素 
$("td:empty")           選擇全部的爲空（也不包括文本節點）的td元素的數組 
$("div:has(p)")        選擇全部含有p標籤的div元素 
$("td:parent")          選擇全部的以td爲父節點的元素數組 
可視化過濾選擇器： 
$("div:hidden")        選擇全部的被hidden的div元素 
$("div:visible")        選擇全部的可視化的div元素 
屬性過濾選擇器： 
$("div[id]")              選擇全部含有id屬性的div元素 
$("input[name='newsletter']")    選擇全部的name屬性等於'newsletter'的input元素 
$("input[name!='newsletter']") 選擇全部的name屬性不等於'newsletter'的input元素 
$("input[name^='news']")         選擇全部的name屬性以'news'開頭的input元素 
$("input[name$='news']")         選擇全部的name屬性以'news'結尾的input元素 
$("input[name*='man']")          選擇全部的name屬性包含'news'的input元素 
$("input[id][name$='man']")    可使用多個屬性進行聯合選擇，該選擇器是獲得全部的含有id屬性而且那麼屬性以man結尾的元素 
子元素過濾選擇器： 
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 
$("div span:first-child")          返回全部的div元素的第一個子節點的數組 
$("div span:last-child")           返回全部的div元素的最後一個節點的數組 
$("div button:only-child")       返回全部的div中只有惟一一個子節點的全部子節點的數組 
表單元素選擇器： 
$(":input")                  選擇全部的表單輸入元素，包括input, textarea, select 和 button 
$(":text")                     選擇全部的text input元素 
$(":password")           選擇全部的password input元素 
$(":radio")                   選擇全部的radio input元素 
$(":checkbox")            選擇全部的checkbox input元素 
$(":submit")               選擇全部的submit input元素 
$(":image")                 選擇全部的image input元素 
$(":reset")                   選擇全部的reset input元素 
$(":button")                選擇全部的button input元素 
$(":file")                     選擇全部的file input元素 
$(":hidden")               選擇全部類型爲hidden的input元素或表單的隱藏域 
表單元素過濾選擇器： 
$(":enabled")             選擇全部的可操做的表單元素 
$(":disabled")            選擇全部的不可操做的表單元素 
$(":checked")            選擇全部的被checked的表單元素 
$("select option:selected") 選擇全部的select 的子元素中被selected的元素 
選取一個 name 爲」S_03_22″的input text框的上一個td的text值
$(」input[@ name =S_03_22]「).parent().prev().text() 
名字以」S_」開始，而且不是以」_R」結尾的
$(」input[@ name ^='S_']「).not(」[@ name $='_R']「) 
一個名爲 radio_01的radio所選的值
$(」input[@ name =radio_01][@checked]「).val(); 
 
$("A B") 查找A元素下面的全部子節點，包括非直接子節點
$("A>B") 查找A元素下面的直接子節點
$("A+B") 查找A元素後面的兄弟節點，包括非直接子節點
$("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點 
$("A B") 查找A元素下面的全部子節點，包括非直接子節點

 

如下爲實例: 

例子：找到表單中全部的 input 元素 
 
HTML 代碼: 
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代碼: 
 
$("form input") 
結果: 
 
[ <input name="name" />, <input name="newsletter" /> ] 
 
2. $("A>B") 查找A元素下面的直接子節點 
例子：匹配表單中全部的子級input元素。 
 
HTML 代碼: 
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代碼: 
 
$("form > input") 
結果: 
 
[ <input name="name" /> ] 
 
3. $("A+B") 查找A元素後面的兄弟節點，包括非直接子節點 
例子：匹配全部跟在 label 後面的 input 元素 
 
HTML 代碼: 
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代碼: 
 
$("label + input") 
結果: 
 
[ <input name="name" />, <input name="newsletter" /> ] 
 
 
4. $("A~B") 查找A元素後面的兄弟節點，不包括非直接子節點

 

HTML 代碼: 

<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" /> 
jQuery 代碼: 

$("form ~ input") 
結果: 

[ <input name="none" /> ]

 

網絡請求

應用的最多的是 ajax 異步，這裏記錄一下各類參數。

 

1.url: 
要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。

2.type: 
要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。

3.timeout: 
要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async: 
要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。

5.cache: 
要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data: 
要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType: 
要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
text：返回純文本字符串。

8.beforeSend：
要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。
            function(XMLHttpRequest){
               this;   //調用本次ajax請求時傳遞的options參數
            }
9.complete：
要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //調用本次ajax請求時傳遞的options參數
          }

10.success：要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。
         (1)由服務器返回，並根據dataType參數進行處理後的數據。
         (2)描述狀態的字符串。
         function(data, textStatus){
            //data多是xmlDoc、jsonObj、html、text等等
            this;  //調用本次ajax請求時傳遞的options參數
         }

11.error:
要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //一般狀況下textStatus和errorThrown只有其中一個包含信息
          this;   //調用本次ajax請求時傳遞的options參數
       }

12.contentType：
要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

14.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的數據
                return data;
            }

15.global：
要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。

16.ifModified：
要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：
要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

18.username：
要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password：
要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData：
要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。

21.scriptCharset：
要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。

 

如下爲實例：

$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty();   //清空resText裏面的全部內容
                         var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username']
                                         + ':</h6><p class="para"' + comment['content']
                                         + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});

 

$.ajax()函數啓動了一個網絡傳輸任務task，這個任務被表示爲一個字典 —— 也就是函數的參數。

網絡傳輸結束後，再使用選擇器更新界面元素和動畫效果。

快捷方法：

除了全局函數 ajax()，還能夠用選擇器對象中的load()函數，直接完成一個界面元素的異步更新過程。例如

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").ajaxStart(function(){
    $(this).html("<img src='/i/demo_wait.gif' />");
  });
  $("button").click(function(){
    $("div").load("/example/jquery/demo_ajax_load.asp");
  });
});
</script>
</head>

<body>
  <div id="txt"><h2>經過 AJAX 改變文本</h2></div>
  <button>改變內容</button>
</body>
</html>

 在選擇器中，load()函數會啓動異步請求，而且會在一開始調用相同選擇器的ajaxStart()函數，註冊一個函數異步調用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程