看了就很快學會jQuery

時間  2019-11-22
標籤 看了 很快 學會 jquery 欄目 JQuery 简体版
原文   原文鏈接

前一段時間錄了一套關於jQuery的視頻分享給你們，能夠在下載區下載到，原本想配合文字一塊兒的，後面發現視頻+幫助文檔也是很是好的學習方法。javascript

1、jQuery簡介與第一個jQuery程序

1.一、jQuery簡介

jQuery是繼Prototype以後又一個優秀的JavaScript庫，是一個由John Resig建立於2006年1月的開源項目。如今的jQuery團隊主要包括核心庫、UI和插件等開發人員以及推廣和網站設計維護人員。php

jQuery憑藉簡介的語法和跨瀏覽器的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發AJAX的操做。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之，不管是網頁設計師、後臺開發者、仍是項目管理者，也不管是JavaScript初學者仍是JavaScript高手，都有足夠多的理由去學習jQuery。css

 1.二、jQuery特色

jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可使開發更加便捷，例如操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能。除此之外，jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。jQuery的特色：html

  • 功能強大，強調的理念是寫的少，作得多（write less，do more）
  • 封裝了大量經常使用的DOM操做
  • 靈活的事件處理機制
  • 擁有完善的AJAX功能
  • 擴展性強、插件豐富
  • 易學易用
  • 多瀏覽器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了對Internet Explorer6,7,8的支持）、兼容性好

1.三、jQuery版本


jQuery 2.0 API徹底兼容jQuery 1.9 API。java

1.四、得到jQuery庫

學習jQuery的幫助文檔：node

1.五、第一個jQuery程序

jQuery的開發不依賴特定的開發工具，使用經常使用Web開發工具都行，如python

運行結果：jquery

2、jQuery對象和DOM對象

2.一、DOM對象

使用JavaScript中的DOM API操做得到的元素對象叫DOM對象。文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱爲DOM。程序員

得到DOM對象的示例：ajax

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM元素</title>
    </head>
    <body>
        <h2>DOM元素</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript">
           //得到文檔中id爲foo的元素
           var foo=document.getElementById("foo");
           //將元素的HTML內容修改成Foo DOM
           foo.innerHTML="Foo DOM";
           
           //得到文檔中標籤名稱爲p的全部元素
           var items=document.getElementsByTagName("p");
           //向控制檯輸出元素數組的個數
           console.log(items.length);
           //遍歷數組中的元素
           for (var i=0;i<items.length;i++) {
                   //將每一個元素的HTML內容增長DOM字符
                   items[i].innerHTML+=" DOM";
           }
        </script>
    </body>
</html>
複製代碼

示例中的foo是一個DOM對象，items是一DOM數組，innerHTML是DOM元素的一個屬性。

運行結果：

調試：

在Chrome瀏覽器按Ctrl+Shift+I啓動開發者工具，調試上面的代碼，添加監視foo對象，在右側展開監視的foo對象，能夠看到該DOM對象的全部屬性、方法與事件信息。

2.二、jQuery對象

jQuery對象就是經過jQuery包裝DOM對象後產生的對象叫jQuery對象。 jQuery對象是對DOM元素封裝事後的數組，也稱爲包裝集。不管選擇器匹配了多個或者零個元素，jQuery對象都再也不是null。意味着你只可以用jQuery對象的.length屬性來判斷選擇器是否選中了元素。

得到jQuery對象的示例：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery對象</title>
    </head>
    <body>
        <h2>jQuery對象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //從文檔中得到id爲foo的jQuery對象
        var $foo=$("#foo");
        //修改$foo元素的HTML內容爲Foo jQuery
        $foo.html("Foo jQuery");
        
        //得到頁面中全部的p標籤元素
        var $items=$("p");
        //從控制檯輸出元素個數
        console.log($items.size());
        //遍歷並修改元素的HTML內容
        $items.html($items.html()+" jQuery");
        </script>
    </body>
</html>
複製代碼

代碼中的是一個對象foo是一個jQuery對象,items也是一個jQuery對象。

運行結果：

調試：

從上面的調試信息中能夠看到foo是一個長度爲1的集合，集合中下標爲0的元素就是1個DOM元素（0：p#foo），上DOM示例中的foo對象徹底同樣；能夠看出foo是一個長度爲1的集合，集合中下標爲0的元素就是1個DOM元素（0：p#foo），上DOM示例中的foo對象徹底同樣；能夠看出foo是對DOM元素foo的封裝，使用功能更增強大，從隱式原型__proto__中的內容就能夠看到，中間提供了大量的方法，事件與屬性，簡化操做。

2.三、DOM轉換成jQuery對象

要使用jQuery中的方法與屬性就須要把一個JavaScript中的DOM對象轉換成jQuery對象。

轉換方法一：

使用工廠方法jQuery(DOM對象)，如jQuery(document.getElementById("foo"))，是方法的簡寫形式，也能夠寫成是jQuery方法的簡寫形式，也能夠寫成(document.getElementById("foo"))

轉換方法二：

簡化形式jQuery(選擇器)，如jQuery("#foo")，也能夠寫成$("#foo")

示例以下：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM轉換成jQuery對象</title>
    </head>
    <body>
        <h2>DOM轉換成jQuery對象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //方法一
        //在文檔中得到id爲foo的DOM對象
        var foo=document.getElementById("foo");
        //將DOM對象轉換成jQuery對象
        var $foo1=jQuery(foo);
        var $foo2=$(foo);
        //調用jQuery對象中的方法
        $foo1.html("Foo jQuery");
        $foo2.css("color","red");
        
        //方法二
        //得到文檔中id爲bar的DOM對象，將DOM包裝成一個jQuery對象，調用jQuery方法html修改元素HTML
        jQuery("#bar").html("Bar jQuery");
        //爲id爲bar的元素設置樣式，將前景色修改成藍色
        $("#bar").css("color","blue");
        </script>
    </body>
</html>
複製代碼

運行結果：

2.四、jQuery對象轉換成DOM對象

DOM對象是jQuery對象的組成部分，jQuery對象是對DOM對象的包裝升級，每個jQuery對象都是一個集合，是一個包裝集，每一個包裝集中能夠包含0到N個DOM元素。將jQuery對象轉換成DOM對象方法以下

方法一：

jQuery對象[下標]

方法二：

jQuery對象.get(下標)

示例：

複製代碼 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery對象轉換成DOM對象</title>
    </head>
    <body>
        <h2>jQuery對象轉換成DOM對象</h2>
        <p id="foo">Foo</p>
        <p id="bar">Bar</p>
        <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script>
        <script type="text/javascript">
        //方法一
        var $foo=$("#foo");
        //從jQuery對象中得到下標爲0的DOM元素，並調用DOM屬性
        $foo[0].innerHTML="foo DOM";
        
        //方法二
        var $p=$("p");
        //從jQuery對象中得到下標爲1的DOM元素，並調用DOM屬性
        $p.get(1).innerHTML="bar DOM";
        </script>
    </body>
</html>
複製代碼

運行結果：

2.五、DOM對象與jQuery對象區別

  1. DOM對象只能調用DOM方法、屬性與事件；
  2. jQuery對象只能調用jQuery方法、屬性與事件；
  3. 能夠將DOM轉換成jQuery對象，也能夠將jQuery轉換成DOM對象；
  4. $只是jQuery的別名形式；
  5. 每個jQuery對象都是一個DOM對象的集合

3、經常使用選擇器

經過jQuery中的選擇器實際上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)來進行元素指定，比其餘JavaScript庫都簡單，這也正是jQuery在網頁設計人員中大受歡迎的理由了。

在其核心，jQuery重點放在從HTML頁面裏獲取元素並對其進行操做。若是你熟悉CSS，就會很清楚選擇器的威力，經過元素的特性或元素在文檔中的位置去描述元素組。有了jQuery，就可以利用現有知識去發揮選擇器的威力，在很大程度上簡化JavaScript代碼。CSS中可使用的選擇器基本均可以用到jQuery中，反之否則。

3.1. 選擇器和包裝集

爲了使設計和內容分離而把CSS引入Web技術的時候，須要以某種方式從外部樣式表中引用頁面元素組。開發出來的方法就是經過使用選擇器—基於元素的屬性或元素在HTML文檔中的位置，簡明地表現元素。

例如，選擇器：p a

引用全部嵌套於<p>元素以內的超連接(<a>元素)組。jQuery利用一樣的選擇器，不只支持目前CSS中使用的常見選擇器，還支持還沒有被大多數瀏覽器徹底實現的更強大的選擇器。收集一組元素，可使用以下簡單的語法：

$(selector) 或者 jQuery(selector)

也許剛開始你會以爲$()符號有點奇怪，但大部分jQuery用戶很快就喜歡上它的簡潔。例如，爲了獲取嵌套在<p>元素內的一組超連接，咱們使用以下語句：

$("p a")

$( )函數返回特別的JavaScript對象，它包含着與選擇器相匹配的DOM元素的數組。該對象擁有大量預約義的有用方法，可以做用於該組元素。

用編程的話來講，這種構造稱爲包裝器(wrapper)，由於它用擴展功能來對匹配的元素進行包裝。咱們使用術語jQuery包裝器或者包裝集(wrapped set)，來指可以在其上用jQuery定義的方法去操做的、匹配元素的集合。

假定咱們想選擇帶有CSS類notLongForThisWorld的全部<div>元素。jQuery語句以下所示：

$("notLongForThisWorld");

3.2.   基本選擇器

基本選擇器是jQuery中最經常使用的選擇器，也是最簡單的選擇器，它經過元素id、class和標籤名等來查找DOM元素。在網頁中，每一個id名稱只能使用一次，class容許重複使用。

選擇器

描述

返回

示例

#id

根據給定的id匹配一個元素

單個元素

$("#test")選取id爲test的元素

.class

根據給定的類名匹配元素

集合元素

$(".test")選取全部class爲test的元素

element

根據給定的元素名稱匹配元素

集合元素

$("p")選取全部的<p>元素

selector1,

selector2,

selector3...

將每個選擇器匹配到的元素合併後一塊兒返回

集合元素

$("div,span,p.cls")選取全部<div>，<span>和擁有class爲cls的<p>標籤的一組元素

*

匹配全部元素

集合元素

$("*")選取全部的元素

 

可使用這些基本選擇器來完成絕大多數的工做，下面咱們對這些選擇器一一進行講解。

3.2.一、經過id獲取元素

在CSS中常用id來控制元素，在jQuery中獲取元素時，也使用一樣方法。與CSS同樣，在id前面加上#號。

語法：$("#id")

能夠控制指定id的HTML元素，在HTML中有id不可重複的規定，所以能夠控制文檔內部唯一的元素。若是定義了多個同名的id元素，則只有最初出現的同名id有效。在JavaScript中使用document對象的getElemnetById(id)方法來獲取元素，在jQuery中則更爲簡化。同時經過jQuery得到id對應的元素後能夠調用jQuery中的相應方法對該元素進行操做，具體代碼以下所示：

複製代碼 
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
<script>
     $("#myDiv").css("border","3px solid red");
</script>
複製代碼

3.2.二、經過類名獲取元素

在網頁當中，使用class屬性引用樣式表中的類樣式，由於類樣式的可重用，因此多個元素能夠引用同一個樣式。在jQuery中，能夠獲取同一類名的多個HTML元素，編寫方式同CSS，即在類名的前面加上點號。

語法：$(".className")

本例經過類名來獲取元素，由於使用同一個類樣式的元素可能有多個，因此經過類名來獲取元素返回的將是一個數組對象，即jQuery中的包裝集，而後對此包裝集中的元素進行相關操做。示例代碼以下所示：

複製代碼 
  <div class="myclass">div class="notMe"</div>
  <div class="myclass otherclass">div class="myClass"</div>
  <span class="myclass otherclass">span class="myClass"</span>
  <script>
     $(".myclass.otherclass").css("border","13px solid red");
  </script> 
複製代碼

3.2.三、經過標籤名獲取元素

在CSS中咱們一般使用標籤名來爲這一類標籤訂義樣式，在jQuery中也能夠用一樣方法來獲取標籤元素。

若是使用普通JavaScript，則必須用document對象的getElementsByTagName(tagName)方法來進行元素的抓取。而jQuery方法與CSS相同，指定須要操做的標籤名便可操控全部的標籤。

語法：$("tagName")

示例代碼以下所示：

複製代碼 
  <div>DIV1</div>
  <div>DIV2</div>
  <span>SPAN</span>
  <script>
     $("div").css("border","9px solid red");
  </script>  
複製代碼

4、350行jQuery經常使用腳本

4.一、經常使用選擇器

複製代碼 
$('#div1')   //id爲div1的節點，如<div id='div1'></div> 

$('span')   //全部的span結點，一個包裝集
$('p span')   //p標籤下的全部span節點，後代節點
$('p>span')   //p標籤下的全部span子節點，子代節點

$('.red')  //使用樣式red的節點，如<span class="red"></span>

$('*')  //全部節點

$("div,span,p.cls")  //選取全部<div>，<span>和擁有class爲cls的<p>標籤的一組元素
複製代碼

4.二、基本篩選器

複製代碼 
$('span:first')    //第一個節點
$('span:last')     //最後一個節點

$("td:even")     //索引爲偶數的節點，從 0 開始
$("td:odd")      //索引爲奇數的節點，從 0 開始
 
$("td:eq(1)")    //給定索引值的節點
$("td:gt(0)")    //大於給定索引值的節點
$("td:lt(2)")    //小於給定索引值的節點

$(":focus")      //當前獲取焦點的節點
$(":animated")   //正在執行動畫效果的節點
複製代碼

4.三、內容選擇器

$("div:contains('hello')")    //包含hello文本的節點
$("td:empty")    //不包含子節點或者文本的空節點
$("div:has(p)")  //含有選擇器所匹配的節點
$("td:parent")   //含有子節點或者文本的節點

4.四、表單選擇器

複製代碼 
$("input:checked") //全部選中的節點
$("select option:selected") //select中全部選中的option節點

$(":input") //匹配全部 input, textarea, select 和 button 節點
$(":text") //全部的單行文本框
$(":password") //全部密碼框
$(":radio") //全部單選按鈕
$(":checkbox") //全部複選框
$(":submit") //全部提交按鈕
$(":reset") //全部重置按鈕
$(":button") //全部button按鈕
$(":file") //全部文件域
複製代碼

4.五、篩選與查找

複製代碼 
$("p").eq(0) //當前操做中第N個jQuery對象,相似索引
$('li').first() //第一個節點
$('li').last() //最後一個節點
$(this).hasClass("node") //節點是否含有某個特定的類,返回布爾值
$('li').has('ul') //包含特定後代的節點

$("div").children() //div中的每一個子節點,第一層
$("div").find("span") //查找div下的全部span節點

$("p").next() 　　　//緊鄰p節點後的一個同輩節點
$("p").nextAll() //p節點以後全部的同輩節點
$("#node").nextUntil("#node2") //id爲"#node"節點以後到id爲'#node2'之間全部的同輩節點,掐頭去尾

$("p").prev() //緊鄰p節點前的一個同輩節點
$("p").prevAll() //p節點以前全部的同輩節點
$("#node").prevUntil("#node2") //id爲"#node"節點以前到id爲'#node2'之間全部的同輩節點,掐頭去尾

$("p").parent() //每一個p節點的父節點
$("p").parents() //每一個p節點的全部祖先節點,body,html
$("#node").parentsUntil("#node2") //id爲"#node"節點到id爲'#node2'之間全部的父級節點,掐頭去尾

$("div").siblings() //全部的同輩節點,不包括本身
複製代碼

4.六、屬性操做

複製代碼 
$("img").attr("src"); 　　　　　　 //返回文檔中全部圖像的src屬性值
$("img").attr("src","node.jpg"); //設置全部圖像的src屬性
$("img").removeAttr("src"); 　　　//將文檔中圖像的src屬性刪除

$("input[type='checkbox']").prop("checked", true); //選中複選框
$("input[type='checkbox']").prop("checked", false); //不選中複選框
$("img").removeProp("src"); 　　 //刪除img的src屬性
複製代碼

4.七、樣式操做

$("p").addClass("selected"); 　　//爲p節點加上 'selected' 類
$("p").removeClass("selected"); //從p節點中刪除 'selected' 類
$("p").toggleClass("selected"); //若是存在就刪除,不然就添加HTML代碼/文本/值

4.八、內容操做

複製代碼 
$('p').html(); 　　　　　　　　　　 //返回p節點的html內容
$("p").html("Hello <b>hello</b>!"); //設置p節點的html內容
$('p').text(); 　　　　　　　　　　 //返回p節點的文本內容
$("p").text("hello"); 　　　　　　　//設置p節點的文本內容
$("input").val(); 　　　　　　　　 //獲取文本框中的值
$("input").val("hello"); 　　　　 //設置文本框中的內容
複製代碼

4.九、CSS操做

$("p").css("color"); //訪問查看p節點的color屬性
$("p").css("color","red"); //設置p節點的color屬性爲red
$("p").css({ "color": "red", "background": "yellow" }); //設置p節點的color爲red，background屬性爲yellow（設置多個屬性要用{}字典形式）

4.十、定位與偏移

複製代碼 
$('p').offset() //節點在當前視口的相對偏移,對象 {top: 5, left: 9}
$('p').offset().top
$('p').offset().left
$("p").position() //節點相對父節點的偏移,對可見節點有效，Object {top: 5, left: 8}

$(window).scrollTop() //獲取滾輪滑的高度
$(window).scrollLeft() //獲取滾輪滑的寬度
$(window).scrollTop('25') //設置滾輪滑的高度爲25
複製代碼

4.十一、尺寸

複製代碼 
$("p").height(); //獲取p節點的高度
$("p").width(); //獲取p節點的寬度

$("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框)

$("p:first").outerHeight() //匹配節點外部高度(默認包括補白和邊框)
$("p:first").outerWidth() //匹配節點外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true) //爲true時包括邊距
複製代碼

4.十二、DOM內部插入

$("p").append("<b>hello</b>"); //每一個p節點內後面追加內容
$("p").appendTo("div"); 　　　 //p節點追加到div內後
$("p").prepend("<b>Hello</b>"); //每一個p節點內前面追加內容
$("p").prependTo("div"); 　 //p節點追加到div內前

4.1三、DOM外部插入

$("p").after("<b>hello</b>"); //每一個p節點同級以後插入內容
$("p").before("<b>hello</b>"); //在每一個p節點同級以前插入內容
$("p").insertAfter("#node"); //全部p節點插入到id爲node節點的後面
$("p").insertBefore("#node"); //全部p節點插入到id爲node節點的前面

4.1四、DOM替換

$("p").replaceWith("<b>Paragraph. </b>"); //將全部匹配的節點替換成指定的HTML或DOM節點
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉全部 selector匹配到的節點

4.1五、DOM刪除

$("p").empty(); //刪除匹配的節點集合中全部的子節點，不包括自己
$("p").remove(); //刪除全部匹配的節點,包括自己
$("p").detach(); //刪除全部匹配的節點(和remove()不一樣的是:全部綁定的事件、附加的數據會保留下來)

4.1六、DOM複製

$("p").clone() 　　//克隆節點並選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數是否會被複制

4.1七、DOM加載完成事件

複製代碼 
$(document).ready(function(){
    您的代碼...
});

//縮寫
$(function($) {
   您的代碼...
});
複製代碼

4.1八、綁定事件

複製代碼 
//bind 爲每一個匹配節點綁定事件處理函數，綁定多個用{}。
$("p").bind("click", function(){
    alert( $(this).text() );
});
$('#div1').bind({
    "mouseover":function () {
         $('#div1').parent().removeClass("hide");
    },"mouseout":function () {
         $('#div1').parent().addClass("hide");
    }
});

$("p").one( "click", function(){}) //事件綁定後只會執行一次
$("p").unbind( "click" ) //反綁一個事件

//與bind 不一樣的是當時間發生時纔去臨時綁定。
$("p").delegate("click",function(){
   您的代碼
});

$("p").undelegate(); 　　　//p節點刪除由 delegate() 方法添加的全部事件
$("p").undelegate("click") //從p節點刪除由 delegate() 方法添加的全部click事件

$("p").click(); 　　//單擊事件
$("p").dblclick(); //雙擊事件
$("input[type=text]").focus() //節點得到焦點時,觸發 focus 事件
$("input[type=text]").blur() //節點失去焦點時,觸發 blur事件
$("button").mousedown()//當按下鼠標時觸發事件
$("button").mouseup() //節點上放鬆鼠標按鈕時觸發事件
$("p").mousemove() //當鼠標指針在指定的節點中移動時觸發事件
$("p").mouseover() //當鼠標指針位於節點上方時觸發事件
$("p").mouseout() 　//當鼠標指針從節點上移開時觸發事件
$(window).keydown() //當鍵盤或按鈕被按下時觸發事件
$(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字符都觸發一次
$("input").keyup() //當按鈕被鬆開時觸發事件
$(window).scroll() //當用戶滾動時觸發事件
$(window).resize() //當調整瀏覽器窗口的大小時觸發事件
$("input[type='text']").change() //當節點的值發生改變時觸發事件
$("input").select() //當input 節點中的文本被選擇時觸發事件
$("form").submit() //當提交表單時觸發事件
$(window).unload() //用戶離開頁面時
複製代碼

4.1九、事件對象

複製代碼 
$("p").click(function(event){ 
     alert(event.type); //"click" 
});

(evnet object) 屬性方法：
event.pageX 　 //事件發生時，鼠標距離網頁左上角的水平距離
event.pageY 　 //事件發生時，鼠標距離網頁左上角的垂直距離
event.type 　　//事件的類型
event.which 　 //按下了哪個鍵
event.data 　　//在事件對象上綁定數據，而後傳入事件處理函數
event.target 　//事件針對的網頁節點
event.preventDefault() 　//阻止事件的默認行爲(好比點擊連接，會自動打開新頁面)
event.stopPropagation() //中止事件向上層節點冒泡
複製代碼

4.20、動態事件綁定

//當p中增長span時仍然有效
$("p").on("click",'span',function(){
     alert( $(this).text() );
});

4.2一、動畫效果

複製代碼 
$("p").show() 　　　　//顯示隱藏的匹配節點
$("p").show("slow"); //參數表示速度,("slow","normal","fast"),也可爲600毫秒
$("p").hide() 　　　　//隱藏顯示的節點
$("p").toggle(); 　　 //切換 顯示/隱藏

$("p").slideDown("600"); //用600毫秒時間將段落滑下
$("p").slideUp("600"); 　//用600毫秒時間將段落滑上
$("p").slideToggle("600"); //用600毫秒時間將段落滑上，滑下淡入淡出

$("p").fadeIn("600"); 　　 //用600毫秒時間將段落淡入
$("p").fadeOut("600"); 　　 //用600毫秒時間將段落淡出
$("p").fadeToggle("600"); 　//用600毫秒時間將段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用600毫秒時間將段落的透明度調整到0.6
複製代碼

 

4.2二、工具方法

複製代碼 
$("#form1").serialize() //序列表表格內容爲字符串。
$("select, :radio").serializeArray(); //序列化表單元素爲數組返回 JSON 數據結構數據
$.trim() 　　//去除字符串兩端的空格
$.each() 　　//遍歷一個數組或對象，for循環
$.inArray() //返回一個值在數組中的索引位置，不存在返回-1 
$.grep() 　 //返回數組中符合某種標準的節點
$.extend({a:1,b:2},{b:3,c:4},{c:5:d:6}) //將多個對象，合併到第一個對象{a:1,b:3,c:5,d:6}
$.makeArray() //將對象轉化爲數組
$.type() //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等
$.isArray() //判斷某個參數是否爲數組
$.isEmptyObject() //判斷某個對象是否爲空(不含有任何屬性)
$.isFunction() //判斷某個參數是否爲函數
$.isPlainObject() //判斷某個參數是否爲用"{}"或"new Object"創建的對象
$.support() //判斷瀏覽器是否支持某個特性
複製代碼

4.2三、AJAX

複製代碼 
//保存數據到服務器，成功時顯示信息
$.ajax({
     type: "POST",
     url: "some.php",
     data: "name=John&location=Boston",
     success: function(msg){
          alert( "Data Saved: " + msg );
     }
});
複製代碼 
//加載 feeds.html 文件內容。
$("#feeds").load("feeds.html");
//請求 test.php 網頁，傳送2個參數，忽略返回值。
$.get("test.php", { name: "John", time: "2pm" } );
複製代碼 
//從 Flickr JSONP API 載入 4 張最新的關於貓的圖片。
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format
=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
         $("<img/>").attr("src", item.media.m).appendTo("#images");
         if ( i == 3 ) return false;
   });
});
複製代碼
複製代碼
複製代碼
複製代碼 
//加載並執行 test.js ，成功後顯示信息
$.getScript("test.js", function(){
     alert("Script loaded and executed.");
});

//向頁面 test.php 發送數據，並輸出結果（HTML 或 XML，取決於所返回的內容）：
$.post("test.php", { name: "John", time: "2pm" },
function(data){
     alert("Data Loaded: " + data);
});

//AJAX 請求完成時執行函數。
$("#msg").ajaxComplete(function(event,request, settings){
     $(this).append("<li>請求完成.</li>");
});

//AJAX 請求失敗時顯示信息。
$("#msg").ajaxError(function(event,request, settings){
     $(this).append("<li>出錯頁面:" + settings.url + "</li>");
});

//AJAX 請求發送前顯示信息。
$("#msg").ajaxSend(function(evt, request, settings){
     $(this).append("<li>開始請求: " + settings.url + "</li>");
});

//AJAX 請求開始時顯示信息。
$("#loading").ajaxStart(function(){
     $(this).show();
});

//AJAX 請求結束後隱藏信息。
$("#loading").ajaxStop(function(){
     $(this).hide();
});

//當 AJAX 請求成功後顯示消息。
$("#msg").ajaxSuccess(function(evt, request, settings){
     $(this).append("<li>請求成功!</li>");
});

//請求前過濾
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) { 
     // Modify options, control originalOptions, store jqXHR, etc 
});

//設置全局 AJAX 默認選項，設置 AJAX 請求默認地址爲 "/xmlhttp/"，禁止觸發全局 AJAX 事件，用 POST 代替默認 GET 方法。其後的 AJAX 請求再也不設置任何選項參數。
$.ajaxSetup({
     url: "/xmlhttp/",
     global: false,
     type: "POST"
});
$.ajax({ data: myData });
複製代碼

5、AJAX詳解

AJAX全稱爲「Asynchronous JavaScript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的開發技術。其使用基於Web2.0標準的XHTML+CSS表示方式，使用DOM（Document Object Model）進行動態顯示及交互，使用XML和XSLT進行數據交換及其相關操做，使用XMLHttpRequest進行異步數據查詢、檢索，使用JavaScript將全部的東西綁定在一塊兒。

 

 

AJAX應用能夠僅向服務器發送並取回必需的數據，它使用SOAP或其餘一些基於XML的Web Service接口，並在客戶端採用JavaScript處理來自服務器的響應。由於在服務器和瀏覽器之間交換的數據大量減小，結果咱們就能看到響應速度更快的應用。同時不少的處理工做能夠在發出請求的客戶端機器上完成，Web服務的處理時間也就減小了。

jQuery爲AJAX帶來方便，語法格式以下：

jQuery.ajax(url,[settings])

經過 HTTP 請求加載遠程數據。

jQuery 底層 AJAX 實現。簡單易用的高層實現見 .get,.post 等。$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數狀況下你無需直接操做該函數，除非你須要操做不經常使用的選項，以得到更多的靈活性。

最簡單的狀況下，$.ajax()能夠不帶任何參數直接使用。

注意，全部的選項均可以經過$.ajaxSetup()函數來全局設置。

5.一、回調函數

若是要處理$.ajax()獲得的數據，則須要使用回調函數。beforeSend、error、dataFilter、success、complete。

  • beforeSend 在發送請求以前調用，而且傳入一個XMLHttpRequest做爲參數。
  • error 在請求出錯時調用。傳入XMLHttpRequest對象，描述錯誤類型的字符串以及一個異常對象（若是有的話）
  • dataFilter 在請求成功以後調用。傳入返回的數據以及"dataType"參數的值。而且必須返回新的數據（多是處理過的）傳遞給success回調函數。
  • success 當請求以後調用。傳入返回後的數據，以及包含成功代碼的字符串。
  • complete 當請求完成以後調用這個函數，不管成功或失敗。傳入XMLHttpRequest對象，以及一個包含成功或錯誤代碼的字符串。

5.二、數據類型

$.ajax()函數依賴服務器提供的信息來處理返回的數據。若是服務器報告說返回的數據是XML，那麼返回的結果就能夠用普通的XML方法或者jQuery的選擇器來遍歷。若是見獲得其餘類型，好比HTML，則數據就以文本形式來對待。

經過dataType選項還能夠指定其餘不一樣數據處理方式。除了單純的XML，還能夠指定 html、json、jsonp、script或者text。

其中，text和xml類型返回的數據不會通過處理。數據僅僅簡單的將XMLHttpRequest的responseText或responseHTML屬性傳遞給success回調函數，

'''注意'''，咱們必須確保網頁服務器報告的MIME類型與咱們選擇的dataType所匹配。好比說，XML的話，服務器端就必須聲明 text/xml 或者 application/xml 來得到一致的結果。

若是指定爲html類型，任何內嵌的JavaScript都會在HTML做爲一個字符串返回以前執行。相似的，指定script類型的話，也會先執行服務器端生成JavaScript，而後再把腳本做爲一個文本數據返回。

若是指定爲json類型，則會把獲取到的數據做爲一個JavaScript對象來解析，而且把構建好的對象做爲結果返回。爲了實現這個目的，他首先嚐試使用JSON.parse()。若是瀏覽器不支持，則使用一個函數來構建。JSON數據是一種能很方便經過JavaScript解析的結構化數據。若是獲取的數據文件存放在遠程服務器上（域名不一樣，也就是跨域獲取數據），則須要使用jsonp類型。使用這種類型的話，會建立一個查詢字符串參數 callback=? ，這個參數會加在請求的URL後面。服務器端應當在JSON數據前加上回調函數名，以便完成一個有效的JSONP請求。若是要指定回調函數的參數名來取代默認的callback，能夠經過設置$.ajax()的jsonp參數。

注意，JSONP是JSON格式的擴展。他要求一些服務器端的代碼來檢測並處理查詢字符串參數。

若是指定了script或者jsonp類型，那麼當從服務器接收到數據時，其實是用了&lt;script&gt;標籤而不是XMLHttpRequest對象。這種狀況下，$.ajax()再也不返回一個XMLHttpRequest對象，而且也不會傳遞事件處理函數，好比beforeSend。

5.三、發送數據到服務器

默認狀況下，Ajax請求使用GET方法。若是要使用POST方法，能夠設定type參數值。這個選項也會影響data選項中的內容如何發送到服務器。

data選項既能夠包含一個查詢字符串，好比 key1=value1&amp;key2=value2 ，也能夠是一個映射，好比 {key1: 'value1', key2: 'value2'} 。若是使用了後者的形式，則數據再發送器會被轉換成查詢字符串。這個處理過程也能夠經過設置processData選項爲false來回避。若是咱們但願發送一個XML對象給服務器時，這種處理可能並不合適。而且在這種狀況下，咱們也應當改變contentType選項的值，用其餘合適的MIME類型來取代默認的 application/x-www-form-urlencoded 。

5.四、高級選項

global選項用於阻止響應註冊的回調函數，好比.ajaxSend，或者ajaxError，以及相似的方法。這在有些時候頗有用，好比發送的請求很是頻繁且簡短的時候，就能夠在ajaxSend裏禁用這個。更多關於這些方法的詳細信息，請參閱下面的內容。

若是服務器須要HTTP認證，可使用用戶名和密碼能夠經過username和password選項來設置。

Ajax請求是限時的，因此錯誤警告被捕獲並處理後，能夠用來提高用戶體驗。請求超時這個參數一般就保留其默認值，要不就經過jQuery.ajaxSetup來全局設定，不多爲特定的請求從新設置timeout選項。

默認狀況下，請求總會被髮出去，但瀏覽器有可能從他的緩存中調取數據。要禁止使用緩存的結果，能夠設置cache參數爲false。若是但願判斷數據自從上次請求後沒有更改過就報告出錯的話，能夠設置ifModified爲true。

scriptCharset容許給&lt;script&gt;標籤的請求設定一個特定的字符集，用於script或者jsonp相似的數據。當腳本和頁面字符集不一樣時，這特別好用。

Ajax的第一個字母是asynchronous的開頭字母，這意味着全部的操做都是並行的，完成的順序沒有先後關係。$.ajax()的async參數老是設置成true，這標誌着在請求開始後，其餘代碼依然可以執行。強烈不建議把這個選項設置成false，這意味着全部的請求都再也不是異步的了，這也會致使瀏覽器被鎖死。

$.ajax函數返回他建立的XMLHttpRequest對象。一般jQuery只在內部處理並建立這個對象，但用戶也能夠經過xhr選項來傳遞一個本身建立的xhr對象。返回的對象一般已經被丟棄了，但依然提供一個底層接口來觀察和操控請求。好比說，調用對象上的.abort()能夠在請求完成前掛起請求。  

5.五、參數大全

$.ajax(url,[settings])

url:一個用來包含發送請求的URL字符串。

settings:AJAX 請求設置。全部選項都是可選的。

settings是ajax參數對象，如:

複製代碼 
//ajax通常形式，路徑也可使用setting中的url屬性
$.ajax(""some.php"",
  {
   type: "POST",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
複製代碼

settings全部能夠選擇的參數以下：

accepts   Map

默認： 取決於數據類型。

內容類型發送請求頭，告訴服務器什麼樣的響應會接受返回。若是accepts設置須要修改，推薦在$.ajaxSetup()方法中作一次。

async   Boolean

(默認: true) 默認設置下，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲 false。注意，同步請求將鎖住瀏覽器，用戶其它操做必須等待請求完成才能夠執行。

beforeSend(XHR)   Function

發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。這是一個 Ajax 事件。若是返回false能夠取消本次ajax請求。

function (XMLHttpRequest) {
    this; // 調用本次AJAX請求時傳遞的options參數
}

cache   Boolean

(默認: true,dataType爲script和jsonp時默認爲false) jQuery 1.2 新功能，設置爲 false 將不緩存此頁面。

complete(XHR, TS)   Function

請求完成後回調函數 (請求成功或失敗以後均調用)。參數： XMLHttpRequest 對象和一個描述成功請求類型的字符串。 Ajax 事件。

function (XMLHttpRequest, textStatus) {
    this; // 調用本次AJAX請求時傳遞的options參數
}

contents   Map

一個以"{字符串:正則表達式}"配對的對象，用來肯定jQuery將如何解析響應，給定其內容類型。

contentType   String

(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數狀況。若是你明確地傳遞了一個content-type給 $.ajax() 那麼他一定會發送給服務器（即便沒有數據要發送）

context Object

這個對象用於設置Ajax相關回調函數的上下文。也就是說，讓回調函數內this指向這個對象（若是不設定這個參數，那麼this就指向調用本次AJAX請求時傳遞的options參數）。好比指定一個DOM元素做爲context參數，這樣就設置了success回調函數的上下文爲這個DOM元素。就像這樣：

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}}); 

converters map

默認： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

一個數據類型對數據類型轉換器的對象。每一個轉換器的值是一個函數，返回響應的轉化值

crossDomain map

默認： 同域請求爲false

跨域請求爲true若是你想強制跨域請求（如JSONP形式）同一域，設置crossDomain爲true。這使得例如，服務器端重定向到另外一個域

data Object,String

發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 "&foo=bar1&foo=bar2"。

data Filter Function

給Ajax返回的原始數據的進行預處理的函數。提供data和type兩個參數：data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function (data, type) {
    // 對Ajax返回的原始數據進行預處理
    return data  // 返回處理後的數據
}

dataType   String

預期服務器返回的數據類型。若是不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，好比XML MIME類型就被識別爲XML。在1.4中，JSON就會生成一個JavaScript對象，而script則會執行這個腳本。隨後服務器端返回的數據會根據這個值解析後，傳遞給回調函數。可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含的script標籤會在插入dom時執行。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了"cache"參數。'''注意：'''在遠程請求時(不在同一個域下)，全部POST請求都將轉爲GET請求。(由於將使用DOM的script標籤來加載)

"json": 返回 JSON 數據 。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。

"text": 返回純文本字符串

error   Function

(默認: 自動判斷 (xml 或 html)) 請求失敗時調用此函數。有如下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。若是發生了錯誤，錯誤信息（第二個參數）除了獲得null以外，還多是"timeout", "error", "notmodified" 和 "parsererror"。 Ajax 事件。

複製代碼 
function (XMLHttpRequest, textStatus, errorThrown) {
    // 一般 textStatus 和 errorThrown 之中
    // 只有一個會包含信息
    this; // 調用本次AJAX請求時傳遞的options參數
}
複製代碼

global   Boolean

(默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不一樣的 Ajax 事件。

headers   map

Default: {}

一個額外的"{鍵:值}"對映射到請求一塊兒發送。此設置被設置以前beforeSend函數被調用;所以，消息頭中的值設置能夠在覆蓋beforeSend函數範圍內的任何設置。

ifModified   Boolean

(默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。在jQuery 1.4中，他也會檢查服務器指定的'etag'來肯定數據沒有被修改過。

isLocal   map

默認: 取決於當前的位置協議

容許當前環境被認定爲「本地」，（如文件系統），即便jQuery默認狀況下不會認可它。如下協議目前公認爲本地：file, *-extension, and widget。若是isLocal設置須要修改，建議在$.ajaxSetup()方法中這樣作一次。

jsonp   String

在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，好比{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

jsonpCallback   String

爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存GET請求的時候，指定這個回調函數名。

mimeType   String

一個mime類型用來覆蓋XHR的 MIME類型。

password   String

用於響應HTTP訪問認證請求的密碼

processData   Boolean

(默認: true) 默認狀況下，經過data選項傳遞進來的數據，若是是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息，請設置爲 false。

scriptCharset   String

只有當請求時dataType爲"jsonp"或"script"，而且type是"GET"纔會用於強制修改charset。一般只在本地和遠程的內容編碼不一樣時使用。

statusCode   map 

默認: {}

一組數值的HTTP代碼和函數對象，當響應時調用了相應的代碼。例如，若是響應狀態是404，將觸發如下警報：

複製代碼 
$.ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
}); 
複製代碼

success(data, textStatus, jqXHR)   Function,Array

請求成功後的回調函數。參數：由服務器返回，並根據dataType參數進行處理後的數據；描述狀態的字符串。還有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 對象 。在jQuery 1.5， 成功設置能夠接受一個函數數組。每一個函數將被依次調用。

function (data, textStatus) {
    // data 多是 xmlDoc, jsonObj, html, text, 等等...
    this; // 調用本次AJAX請求時傳遞的options參數
}

traditional   Boolean

若是你想要用傳統的方式來序列化數據，那麼就設置爲true。請參考工具分類下面的jQuery.param 方法。

timeout   Number

設置請求超時時間（毫秒）。此設置將覆蓋全局設置。

type   String

(默認: "GET") 請求方式 ("POST" 或 "GET")， 默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。

url   String

(默認: 當前頁地址) 發送請求的地址。

username   String

用於響應HTTP訪問認證請求的用戶名

xhr   Function

須要返回一個XMLHttpRequest 對象。默認在IE下是ActiveXObject 而其餘狀況下是XMLHttpRequest 。用於重寫或者提供一個加強的XMLHttpRequest 對象。這個參數在jQuery 1.3之前不可用。

xhrFields   map

一對「文件名-文件值」在本機設置XHR對象。例如，若是須要的話，你能夠用它來設置withCredentials爲true的跨域請求。

5.六、AJAX示例

描述:

加載並執行一個 JS 文件。

jQuery 代碼:
複製代碼 
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});
複製代碼

描述:

保存數據到服務器，成功時顯示信息。

jQuery 代碼:
複製代碼 
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
複製代碼

描述:

裝入一個 HTML 網頁最新版本。

jQuery 代碼:
複製代碼 
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
複製代碼

描述:

同步加載數據。發送請求時鎖住瀏覽器。須要鎖定用戶交互操做時使用同步方式。

jQuery 代碼:
 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

描述:

發送 XML 數據至服務器。設置 processData 選項爲 false，防止自動轉換數據格式。

jQuery 代碼:
複製代碼
複製代碼 
 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程