前一段時間錄了一套關於jQuery的視頻分享給你們,能夠在下載區下載到,原本想配合文字一塊兒的,後面發現視頻+幫助文檔也是很是好的學習方法。php
jQuery是繼Prototype以後又一個優秀的JavaScript庫,是一個由John Resig建立於2006年1月的開源項目。如今的jQuery團隊主要包括核心庫、UI和插件等開發人員以及推廣和網站設計維護人員。css
jQuery憑藉簡介的語法和跨瀏覽器的兼容性,極大地簡化了JavaScript開發人員遍歷HTML文檔、操做DOM、處理事件、執行動畫和開發AJAX的操做。其獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。總之,不管是網頁設計師、後臺開發者、仍是項目管理者,也不管是JavaScript初學者仍是JavaScript高手,都有足夠多的理由去學習jQuery。html
jQuery是免費、開源的,使用MIT許可協議。jQuery的語法設計可使開發更加便捷,例如操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能。除此之外,jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者能夠很輕鬆的開發出功能強大的靜態或動態網頁。jQuery的特色:java
jQuery 1.0
(2006年8月):該庫的第一個穩定版本,已經具備了對CSS選擇符、事件處理和AJAX交互的穩健支持。
jQuery 1.1
(2007年1月):這一版大幅簡化了API。許多較少使用的方法被合併,減小了須要掌握和解釋的方法數量。
jQuery 1.1.3
(2007年7月):此次小版本變化包含了對jQuery選擇符引擎執行速度的顯著提高。從這個版本開始,jQuery的性能達到了Prototype、Mootools以及
Dojo等同類JavaScript庫的水平。
jQuery 1.2
(2007年9月):這一版去掉了對XPath選擇符的支持,緣由是相對於CSS語法它已經變得多餘了。這一版可以支持對效果的更靈活定製,並且藉助新增
的命名空間事件,也使插件開發變得更容易。
jQuery UI(2007年9月):這個新的插件套件是做爲曾經流行但已過期的Interface插件的替代項目而發佈的。jQuery UI中包含大量預約義好的部件(
widget),以及一組用於構建高級元素(例如可拖放的界面元素)的工具。
jQuery 1.2.6
(2008年5月):這一版主要是將Brandon Aaron開發的流行的Dimensions插件的功能移植到了核心庫中。
jQuery 1.3
(2009年1月):這一版使用了全新的選擇符引擎Sizzle,庫的性能也所以有了極大提高。這一版正式支持事件委託特性。
jQuery 1.3.2
(2009年2月):此次小版本升級進一步提高了庫的性能,例如改進了:visible/:hidden選擇符、.height()/.width()方法的底層處理機制。另外,也支
持查詢的元素按文檔順序返回。
jQuery 1.4
(2010年1月14號):對代碼庫進行了內部重寫組織,開始創建一些風格規範。老的core.js文件被分爲
attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js;CSS和attribute的邏輯分離。
jQuery 1.5
(2011年1月31日):該版本修復了83個bug,解決了460個問題。重大改進有:重寫了Ajax模塊;新增延緩對象(Deferred Objects);jQuery替身
——jQuery.sub();加強了遍歷相鄰節點的性能;jQuery開發團隊構建系統的改進。
jQuery1.7
(2011年11月04號):新版本包含了不少新的特徵,特別提高了事件委派時的性能尤爲是在IE7下。
jQuery 1.7.2
(2012年03月24號):jQuery 1.7.2正式版發佈。
該版本在1.7.1的基礎上修復了大量的bug,並改進了部分功能。而相比於1.7.2 RC1,只修復了一個bug。值得注意的是:若是你正在使用jQuery
Mobile,請使用最新的jQuery 1.7.2和jQuery Mobile 1.1這兩個版本,由於以前的jQuery Mobile版本還基於jQuery core 1.7.1或更早的版本。
jQuery 1.8.3
2012年11月14日 jQuery 1.8.3 發佈,修復 bug 和性能衰退問題、IE8中的HTML相關Bug、jQuery 1.8.2在IE9中調用ajax失敗的問題
jQuery 2.0
2013年4月18日 jQuery 2.0正式版發佈
再也不支持IE 6/7/8:若是在IE9/10版本中使用「兼容性視圖」模式也將會受到影響。而jQuery3修復了大量的bug,增長了新的方法,同時移除了一些接口,並修改了少許接口的行爲,不1和2是不一樣的API。
更輕更快:2.0版本文件與1.9.1相比小了12%。能夠構建一個更小、更輕量的版本、表現更好。
jQuery 2.0 API徹底兼容jQuery 1.9 API。node
更多版本請查看:python
https://github.com/jquery/jquery/releasesjquery
說明:無論是jQuery1.x仍是2.x使用的API都是同樣的,只是內部實現的方式有區別,2.x不支持IE6/7/8而1.x則支持,2.x更小,效率更高,但功能是同樣。git
jQuery不須要安裝,把下載的jQuery庫放到網站的一個公共位置,想要在某個頁面上使用jQuery時,只須要在相關的HTML文檔中引入該庫文件便可。得到jQuery相關資源的網站地址以下:程序員
源碼: https://github.com/jquery/jquery
中文幫助: http://www.jquery123.com/
CDN: http://cdn.code.baidu.com/
jQuery1.12.1在線中文版: http://hemin.cn/jq/
下載較新版的jQuery:下載jQuery1.11.3幫助與庫
下載最新版的jQuery:下載jQuery1.12.4庫
學習jQuery的權威資料就是幫助文檔:
jQuery的開發不依賴特定的開發工具,使用經常使用Web開發工具都行,如:Eclipse、Visual Studio、Dreamweaver、intelliJ IDEA、HBuilder、webstorm、sublime、notepad++等。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello jQuery</title> </head> <body> <script src="js/jQuery/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ alert("Hello jQuery!"); }); </script> </body> </html>
這裏使用HBuilder,這是一個國人開發的基於Eclipse的免費IDE,感受還不錯。
HBuilder下載地址: http://www.dcloud.io/(有Mac版與Windows版本)
運行結果:
使用JavaScript中的DOM API操做得到的元素對象叫DOM對象。文檔對象模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴展標誌語言的標準編程接口。在網頁上,組織頁面(或文檔)的對象被組織在一個樹形結構中,用來表示文檔中對象的標準模型就稱爲DOM。
得到DOM對象的示例:
<!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對象的全部屬性、方法與事件信息。
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__中的內容就能夠看到,中間提供了大量的方法,事件與屬性,簡化操做。
要使用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>
運行結果:
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>
運行結果:
經過jQuery中的選擇器實際上取得的是HTML中的DOM元素。在jQuery中使用CSS匹配(CSS like)來進行元素指定,比其餘JavaScript庫都簡單,這也正是jQuery在網頁設計人員中大受歡迎的理由了。
在其核心,jQuery重點放在從HTML頁面裏獲取元素並對其進行操做。若是你熟悉CSS,就會很清楚選擇器的威力,經過元素的特性或元素在文檔中的位置去描述元素組。有了jQuery,就可以利用現有知識去發揮選擇器的威力,在很大程度上簡化JavaScript代碼。CSS中可使用的選擇器基本均可以用到jQuery中,反之否則。
爲了使設計和內容分離而把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");
基本選擇器是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>標籤的一組元素 |
* |
匹配全部元素 |
集合元素 |
$("*")選取全部的元素 |
可使用這些基本選擇器來完成絕大多數的工做,下面咱們對這些選擇器一一進行講解。
在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>
在網頁當中,使用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>
在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>
0、經常使用選擇器 $('#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>標籤的一組元素 1、基本篩選器 $('span:first') //第一個節點 $('span:last') //最後一個節點 $("td:even") //索引爲偶數的節點,從 0 開始 $("td:odd") //索引爲奇數的節點,從 0 開始 $("td:eq(1)") //給定索引值的節點 $("td:gt(0)") //大於給定索引值的節點 $("td:lt(2)") //小於給定索引值的節點 $(":focus") //當前獲取焦點的節點 $(":animated") //正在執行動畫效果的節點 2、內容選擇器 $("div:contains('hello')") //包含hello文本的節點 $("td:empty") //不包含子節點或者文本的空節點 $("div:has(p)") //含有選擇器所匹配的節點 $("td:parent") //含有子節點或者文本的節點
3、表單選擇器 $("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() //全部的同輩節點,不包括本身 5、屬性操做 $("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屬性 6、樣式操做 $("p").addClass("selected"); //爲p節點加上 'selected' 類 $("p").removeClass("selected"); //從p節點中刪除 'selected' 類 $("p").toggleClass("selected"); //若是存在就刪除,不然就添加HTML代碼/文本/值 7、內容操做 $('p').html(); //返回p節點的html內容 $("p").html("Hello <b>hello</b>!"); //設置p節點的html內容 $('p').text(); //返回p節點的文本內容 $("p").text("hello"); //設置p節點的文本內容 $("input").val(); //獲取文本框中的值 $("input").val("hello"); //設置文本框中的內容 8、CSS操做 $("p").css("color"); //訪問查看p節點的color屬性 $("p").css("color","red"); //設置p節點的color屬性爲red $("p").css({ "color": "red", "background": "yellow" }); //設置p節點的color爲red,background屬性爲yellow(設置多個屬性要用{}字典形式) 9、定位與偏移 $('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 10、尺寸 $("p").height(); //獲取p節點的高度 $("p").width(); //獲取p節點的寬度 $("p:first").innerHeight() //獲取第一個匹配節點內部區域高度(包括補白、不包括邊框) $("p:first").innerWidth() //獲取第一個匹配節點內部區域寬度(包括補白、不包括邊框) $("p:first").outerHeight() //匹配節點外部高度(默認包括補白和邊框) $("p:first").outerWidth() //匹配節點外部寬度(默認包括補白和邊框) $("p:first").outerHeight(true) //爲true時包括邊距 11、DOM內部插入 $("p").append("<b>hello</b>"); //每一個p節點內後面追加內容 $("p").appendTo("div"); //p節點追加到div內後 $("p").prepend("<b>Hello</b>"); //每一個p節點內前面追加內容 $("p").prependTo("div"); //p節點追加到div內前 12、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節點的前面 13、DOM替換 $("p").replaceWith("<b>Paragraph. </b>"); //將全部匹配的節點替換成指定的HTML或DOM節點 $("<b>Paragraph. </b>").replaceAll("p"); //用匹配的節點替換掉全部 selector匹配到的節點 14、DOM刪除 $("p").empty(); //刪除匹配的節點集合中全部的子節點,不包括自己 $("p").remove(); //刪除全部匹配的節點,包括自己 $("p").detach(); //刪除全部匹配的節點(和remove()不一樣的是:全部綁定的事件、附加的數據會保留下來) 15、DOM複製 $("p").clone() //克隆節點並選中克隆的副本 $("p").clone(true) //布爾值指事件處理函數是否會被複制 16、DOM加載完成事件 $(document).ready(function(){ 您的代碼... }); //縮寫 $(function($) { 您的代碼... }); 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() //用戶離開頁面時 18、事件對象 $("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() //中止事件向上層節點冒泡 19、動態事件綁定 $("p").on("click",'span',function(){ alert( $(this).text() ); }); //當p中增長span時仍然有效 20、動畫效果 $("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 21、工具方法 $("#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() //判斷瀏覽器是否支持某個特性 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 });
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()函數來全局設置。
若是要處理$.ajax()獲得的數據,則須要使用回調函數。beforeSend、error、dataFilter、success、complete。
$.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類型,那麼當從服務器接收到數據時,其實是用了<script>標籤而不是XMLHttpRequest對象。這種狀況下,$.ajax()再也不返回一個XMLHttpRequest對象,而且也不會傳遞事件處理函數,好比beforeSend。
默認狀況下,Ajax請求使用GET方法。若是要使用POST方法,能夠設定type參數值。這個選項也會影響data選項中的內容如何發送到服務器。
data選項既能夠包含一個查詢字符串,好比 key1=value1&key2=value2 ,也能夠是一個映射,好比 {key1: 'value1', key2: 'value2'} 。若是使用了後者的形式,則數據再發送器會被轉換成查詢字符串。這個處理過程也能夠經過設置processData選項爲false來回避。若是咱們但願發送一個XML對象給服務器時,這種處理可能並不合適。而且在這種狀況下,咱們也應當改變contentType選項的值,用其餘合適的MIME類型來取代默認的 application/x-www-form-urlencoded 。
global選項用於阻止響應註冊的回調函數,好比.ajaxSend,或者ajaxError,以及相似的方法。這在有些時候頗有用,好比發送的請求很是頻繁且簡短的時候,就能夠在ajaxSend裏禁用這個。更多關於這些方法的詳細信息,請參閱下面的內容。
若是服務器須要HTTP認證,可使用用戶名和密碼能夠經過username和password選項來設置。
Ajax請求是限時的,因此錯誤警告被捕獲並處理後,能夠用來提高用戶體驗。請求超時這個參數一般就保留其默認值,要不就經過jQuery.ajaxSetup來全局設定,不多爲特定的請求從新設置timeout選項。
默認狀況下,請求總會被髮出去,但瀏覽器有可能從他的緩存中調取數據。要禁止使用緩存的結果,能夠設置cache參數爲false。若是但願判斷數據自從上次請求後沒有更改過就報告出錯的話,能夠設置ifModified爲true。
scriptCharset容許給<script>標籤的請求設定一個特定的字符集,用於script或者jsonp相似的數據。當腳本和頁面字符集不一樣時,這特別好用。
Ajax的第一個字母是asynchronous的開頭字母,這意味着全部的操做都是並行的,完成的順序沒有先後關係。$.ajax()的async參數老是設置成true,這標誌着在請求開始後,其餘代碼依然可以執行。強烈不建議把這個選項設置成false,這意味着全部的請求都再也不是異步的了,這也會致使瀏覽器被鎖死。
$.ajax函數返回他建立的XMLHttpRequest對象。一般jQuery只在內部處理並建立這個對象,但用戶也能夠經過xhr選項來傳遞一個本身建立的xhr對象。返回的對象一般已經被丟棄了,但依然提供一個底層接口來觀察和操控請求。好比說,調用對象上的.abort()能夠在請求完成前掛起請求。
url:一個用來包含發送請求的URL字符串。
settings:AJAX 請求設置。全部選項都是可選的。
默認: 取決於數據類型。
內容類型發送請求頭,告訴服務器什麼樣的響應會接受返回。若是accepts設置須要修改,推薦在$.ajaxSetup()方法中作一次。
(默認: true) 默認設置下,全部請求均爲異步請求。若是須要發送同步請求,請將此選項設置爲 false。注意,同步請求將鎖住瀏覽器,用戶其它操做必須等待請求完成才能夠執行。
發送請求前可修改 XMLHttpRequest 對象的函數,如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。這是一個 Ajax 事件。若是返回false能夠取消本次ajax請求。
function (XMLHttpRequest) { this; // 調用本次AJAX請求時傳遞的options參數 }
(默認: true,dataType爲script和jsonp時默認爲false) jQuery 1.2 新功能,設置爲 false 將不緩存此頁面。
請求完成後回調函數 (請求成功或失敗以後均調用)。參數: XMLHttpRequest 對象和一個描述成功請求類型的字符串。 Ajax 事件。
function (XMLHttpRequest, textStatus) { this; // 調用本次AJAX請求時傳遞的options參數 }
一個以"{字符串:正則表達式}"配對的對象,用來肯定jQuery將如何解析響應,給定其內容類型。
(默認: "application/x-www-form-urlencoded") 發送信息至服務器時內容編碼類型。默認值適合大多數狀況。若是你明確地傳遞了一個content-type給 $.ajax() 那麼他一定會發送給服務器(即便沒有數據要發送)
這個對象用於設置Ajax相關回調函數的上下文。也就是說,讓回調函數內this指向這個對象(若是不設定這個參數,那麼this就指向調用本次AJAX請求時傳遞的options參數)。好比指定一個DOM元素做爲context參數,這樣就設置了success回調函數的上下文爲這個DOM元素。就像這樣:
$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});
默認: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}
一個數據類型對數據類型轉換器的對象。每一個轉換器的值是一個函數,返回響應的轉化值
默認: 同域請求爲false
跨域請求爲true若是你想強制跨域請求(如JSONP形式)同一域,設置crossDomain爲true。這使得例如,服務器端重定向到另外一個域
發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須爲 Key/Value 格式。若是爲數組,jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 "&foo=bar1&foo=bar2"。
給Ajax返回的原始數據的進行預處理的函數。提供data和type兩個參數:data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。
function (data, type) { // 對Ajax返回的原始數據進行預處理 return data // 返回處理後的數據 }
預期服務器返回的數據類型。若是不指定,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": 返回純文本字符串
(默認: 自動判斷 (xml 或 html)) 請求失敗時調用此函數。有如下三個參數:XMLHttpRequest 對象、錯誤信息、(可選)捕獲的異常對象。若是發生了錯誤,錯誤信息(第二個參數)除了獲得null以外,還多是"timeout", "error", "notmodified" 和 "parsererror"。 Ajax 事件。
function (XMLHttpRequest, textStatus, errorThrown) { // 一般 textStatus 和 errorThrown 之中 // 只有一個會包含信息 this; // 調用本次AJAX請求時傳遞的options參數 }
(默認: true) 是否觸發全局 AJAX 事件。設置爲 false 將不會觸發全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用於控制不一樣的 Ajax 事件。
Default: {}
一個額外的"{鍵:值}"對映射到請求一塊兒發送。此設置被設置以前beforeSend函數被調用;所以,消息頭中的值設置能夠在覆蓋beforeSend函數範圍內的任何設置。
(默認: false) 僅在服務器數據改變時獲取新數據。使用 HTTP 包 Last-Modified 頭信息判斷。在jQuery 1.4中,他也會檢查服務器指定的'etag'來肯定數據沒有被修改過。
默認: 取決於當前的位置協議
容許當前環境被認定爲「本地」,(如文件系統),即便jQuery默認狀況下不會認可它。如下協議目前公認爲本地:file, *-extension, and widget。若是isLocal設置須要修改,建議在$.ajaxSetup()方法中這樣作一次。
在一個jsonp請求中重寫回調函數的名字。這個值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分,好比{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。
爲jsonp請求指定一個回調函數名。這個值將用來取代jQuery自動生成的隨機函數名。這主要用來讓jQuery生成度獨特的函數名,這樣管理請求更容易,也能方便地提供回調函數和錯誤處理。你也能夠在想讓瀏覽器緩存GET請求的時候,指定這個回調函數名。
一個mime類型用來覆蓋XHR的 MIME類型。
用於響應HTTP訪問認證請求的密碼
(默認: true) 默認狀況下,經過data選項傳遞進來的數據,若是是一個對象(技術上講只要不是字符串),都會處理轉化成一個查詢字符串,以配合默認內容類型 "application/x-www-form-urlencoded"。若是要發送 DOM 樹信息或其它不但願轉換的信息,請設置爲 false。
只有當請求時dataType爲"jsonp"或"script",而且type是"GET"纔會用於強制修改charset。一般只在本地和遠程的內容編碼不一樣時使用。
默認: {}
一組數值的HTTP代碼和函數對象,當響應時調用了相應的代碼。例如,若是響應狀態是404,將觸發如下警報:
$.ajax({ statusCode: {404: function() { alert('page not found'); } });
請求成功後的回調函數。參數:由服務器返回,並根據dataType參數進行處理後的數據;描述狀態的字符串。還有 jqXHR(在jQuery 1.4.x的中,XMLHttpRequest) 對象 。在jQuery 1.5, 成功設置能夠接受一個函數數組。每一個函數將被依次調用。
function (data, textStatus) { // data 多是 xmlDoc, jsonObj, html, text, 等等... this; // 調用本次AJAX請求時傳遞的options參數 }
若是你想要用傳統的方式來序列化數據,那麼就設置爲true。請參考工具分類下面的jQuery.param 方法。
設置請求超時時間(毫秒)。此設置將覆蓋全局設置。
(默認: "GET") 請求方式 ("POST" 或 "GET"), 默認爲 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可使用,但僅部分瀏覽器支持。
(默認: 當前頁地址) 發送請求的地址。
用於響應HTTP訪問認證請求的用戶名
須要返回一個XMLHttpRequest 對象。默認在IE下是ActiveXObject 而其餘狀況下是XMLHttpRequest 。用於重寫或者提供一個加強的XMLHttpRequest 對象。這個參數在jQuery 1.3之前不可用。
一對「文件名-文件值」在本機設置XHR對象。例如,若是須要的話,你能夠用它來設置withCredentials爲true的跨域請求。
加載並執行一個 JS 文件。
$.ajax({ type: "GET", url: "test.js", dataType: "script" });
保存數據到服務器,成功時顯示信息。
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
裝入一個 HTML 網頁最新版本。
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } });
同步加載數據。發送請求時鎖住瀏覽器。須要鎖定用戶交互操做時使用同步方式。
var html = $.ajax({ url: "some.php", async: false }).responseText;
發送 XML 數據至服務器。設置 processData 選項爲 false,防止自動轉換數據格式。
var xmlDocument = [create xml document]; $.ajax({ url: "page.php", processData: false, data: xmlDocument, success: handleResponse });
原本想一點一點寫完的,不事後面錄了比較全的視頻,你們能夠邊看視頻邊參考示例練習:
下載較新版的jQuery:下載 jQuery1.11.3幫助與庫
下載最新版的jQuery: 下載jQuery1.12.4庫
示例下載: jQuery視頻配套示例
視頻下載: https://pan.baidu.com/s/1hsJtb0K 密碼: m7bt
IDE HBuilder下載地址: http://www.dcloud.io/
B站直接觀看:http://www.bilibili.com/video/av9205766/?from=search&seid=5595908124286890857