JQuery製做網頁——第五章 初識 jQuery

一、jQuery簡介：

● jQuery由美國人John Resig於2006年建立 ● jQuery是目前最流行的JavaScript程序庫，它是對JavaScript對象和函數的封裝 ● 它的設計思想是write less,do more（以更少的代碼，實現更多的功能）；
●jQuery是javaScript的程序庫之一，它是javaScript對象和實用函數的封裝。 ●jQuery是繼Prototype以後又一個優秀的javaScript庫，是由美國人 Johh  Resig於2006年建立的開源項目。 ●jQuery只是javaScript的程序庫，只至關於它的一個子集，並不能徹底取代javaScript。
●爲何要使用jQuery：與javaScript相比，使用jQuery製做交互特效的語法更爲簡單，代碼量大大減小，不存在瀏覽器兼容性的問題。
●jQuery與其餘javascript庫： 按照使用佔比，幾大javaScript庫佔好比下： jQuery      (62%) Bootstrap         (22%) Zepto        (6%) Ext   (5%) YUI   (5%)	比例圖：

二、 jQuery的用途：

1）訪問和操做DOM元素：使用jQuery能夠很方便的獲取和修改頁面中的制定元素，不管是刪除、移動仍是複製元素，jQuery都提供了一套方便快捷的方法。 2）控制頁面樣式：經過引入jQuery，開發人員能夠很快捷的控制頁面的CSS文件。 3）對頁面事件的處理：引入jQuery後，可使頁面的表現層與功能開發分離，開發者更多的關注於程序的邏輯與功效；頁面設計者則側重於頁面的優化與用戶的體驗。經過事件綁定機制，能夠很輕鬆的實現二者的結合。（好比鼠標的點擊事件） 4）方便使用jQuery插件：引入jQuery後，可使用大量的jQuery插件來完善頁面的功能和效果，如jQuery UI插件庫，Form插件，Validate插件等。使得原來使用javaScript代碼實現起來很是困難的功能經過jQuery插件能夠輕鬆的實現。                          Eg：3D幻燈片就是由jQuery的Slicebox插件來實現的。 5）與Ajax技術的完美結合：利用Ajax異步讀取服務器數據的方法，極大的方便了程序的開發，加強了頁面的交互，提高了用戶的體驗，引入jQuery後，經過內部對象或函數，加上幾行代碼就能夠實現複雜的功能。 6）處理了與瀏覽器兼容性的問題：在jQuery庫裏幫咱們寫了兼容性的代碼。

●jQuery能作的JavaScript也都能作，但使用jQuery能大幅提升開發效率；

三、 jQuery的優點

1）輕量級。jQuery的體積小，壓縮以後，約等於100KB。 2）強大的選擇器。jQuery支持幾乎全部的CSS選擇器，以及jQuery有自定義特有的選擇器。 3）出色的DOM封裝。jQuery封裝了大量的DOM操做，使的開發者在編寫DOM操做相關程序時更加得心用手。 4）可靠的事件處理機制。jQuery的事件處理機制吸取了javaScript中事件處理函數的精華，很是的可靠。 5）出色的瀏覽器兼容性。 6）隱式迭代。使用jQuery查找相同名稱（類名、表簽名等）時，會返回一個結果集合，無需用戶一一遍歷，而且有快捷的查找所匹配的值的方法，簡化了編程。 7）豐富的插件支持。jQuery的易擴展性，吸引了來自全球的開發者來編寫jQuery的擴展插件，目前已有成百上千的官方支持的插件。

四、jQuery的版本及配置

●獲取jQuery的最新版本：進入jQuery的官方網站（http://jquery.com）,在頁面右側的 Download  jQuery區域下載最新的版本。                ★jQuery類庫說明：jQuery類庫一個插件分爲兩個版本：開發版（完整無壓縮）和發佈版（GZIP壓縮過的版本）。                               版本號爲1.開頭的jQuery插件才能支持IE6~IE8的兼容性。                               推薦的版本是：jquery-1.8.3.min.js和jquery-1.12.4.js 名稱 大小 說      明 jquery-1.版本號.js（開發版） 約286KB 完整無壓縮版本，主要用於測試、學習和開發 jquery-1.版本號.min.js（發佈版） 約94.8KB 通過工具壓縮或通過服務器開啓Gzip壓縮，主要應用於發佈的產品和項目

●jQuery的引用方式：     1. 頁面引用（引用本地）：<script src="js/jquery-1.12.4.js" type="text/javascript"></script>     2. 引用網絡存儲的，引用地址實用網絡存儲的絕對地址。   　　★注：1.   要使用jQuery的功能，須要首先引用jQuery庫文件，首先引入jQuery插件文件，再引用本身的.js文件。不然可能沒法識別或編譯。    　　★注：在一個頁面中使用了多個庫文件，變量衝突： 　　　　　　一、使用jQuery.noConflict()方法解決對變量$的jQuery的控制權，即釋放jQuery對$變量的控制權。 　　　　　　2.若是頁面僅使用jQuery的一個庫文件，則不須要noConflict()方法；

五、jQuery語法

●jQuery的加載： 　　$(document).ready(function() {       　　   //執行的代碼； 　　})；   　　這種語法等同於javaScript代碼：   　　Window.onload=function(){        　　  //執行代碼； 　　}；	Window.onload於$(document).ready()的對比   Window.onload $(document).ready() 執行時機 必須等到頁面中的全部元素（圖片，Flash,視頻等） 加載完畢後才能執行 網頁中全部DOM文檔結構繪製完畢後即刻執行，可能與DOM元素關聯的內容（圖片、flash、視頻等）並無加載完; 編寫的個數 同一個頁面不能編寫多個 就算寫入多個，也只會有一個效果 同一個頁面能夠編寫多個 編寫N個則有N次效果 簡化寫法 沒有 $(document).ready(function() {          //執行的代碼； })； 能夠簡寫成 $(function(){    //執行代碼 }
●2.jQuery的語法結構： 　　jQuery語句主要包含三大部分：$()、document和ready();它們在jQuery中分別稱爲：工廠函數、選擇器和方法。 　　　　語法：$(selector).action();  　　　　　　 ★工廠函數$()：在jQuery中，美圓符號「$」等價於jQuery,即S()=jQuery()。 　　　　　　　　$()的做用是將DOM對象轉換爲jQuery對象，只有將DOM對象轉換爲jQuery對象後，才能使用jQuery的方法。 　　　　　　　　注：當$()的參數是DOM對象時，該對象無須使用雙引號包裹起來，若是得到的是document對象，則寫做$(document)； ★選擇器selector： 語法：$(selector); ★方法action()：jQuery中提供了一系列的方法。在這些方法中，一類重要的方法就是事件處理方法， 　　　　Eg：如許多基礎的事件：鼠標事件、鍵盤事件和表單事件等，均可以經過事件方法進行綁定。
●CSS樣式操做的方法： 　　1）爲元素添加新的樣式 　　　　　　語法：jQuery 對象.addClass([樣式名])； 　　　　注：樣式名不用帶「.」類符號，區別於選擇器 　　2）設置新的CSS樣式屬性     　　　　 語法：jQuery 對象.css (「屬性」,」屬性值」)；     //設置一個css樣式           　　　　    jQuery 對象.css (｛「屬性1」：」屬性1值」，」屬性N 」:」屬性N的值」｝)；     //設置多個css樣式 　　3）顯示/隱藏元素       　　　  語法：$(selector).show();     //顯示元素                           $(selector).hide ();     //隱藏元素
●CSS與addClass的區別：   ★css()方法爲所匹配的元素設置給定的樣式；   ★addClass（）方法向所匹配的元素添加一個或多個類，該方法不會刪除已存在的類，盡在原有的基礎上追加新的類樣式；   ★基於結構與樣式分離的原則，一般在實際應用中，爲某元素添加樣式，使用addClass（）方法比css()方法的頻率高不少，所以建議使用addClass()添加樣式；

六、jQuery代碼風格：

●「$」的使用：在jQuery程序中，使用最多的是「$」，不管是頁面元素的選擇器，仍是功能函數的前綴，都 必須使用該符號。它「$」等同於jQuery。    　　 Eg：$(document).ready()=jQuery(document).ready() 　　　　　　$(function(){...})=jQuery (function(){...})
●鏈式操做：對一個對象進行多重操做，只調用一個對象，並將操做結果返回給該對象            　　 注：使用next()方法能夠得到當前元素的下一個同胞元素。
Eg1： 鼠標移入和移除事件代碼結構： 　　$(「h1」).mouseover(function(){    　　　　  //代碼1； 　　}).mouseout(function(){             　　//代碼2； 　　})；	Eg2：將標題顏色變成淺藍色，而且單擊標題顯示下方的元素； 　　$("h2").css("background-color","#ccffff").next().css("display","block");
●1隱式迭代：在jQuery中獲取一個集合後，會默認遍歷內部的全部元素。     　　 Eg：下面的代碼會將全部的li變成紅色： 　　　　　　$(document).ready(function() {         　　　　　　$("li").css({"font-weight":"bold","color":"red"});          　　　　});
●添加註釋 階段 說明 開發階段 爲代碼添加註釋，能夠增長代碼的可讀性，可以讓別人很容易的讀懂你的代碼，便於後期維護 維護階段 建議把關鍵的模塊造成開發文檔，便於後期維護，即使後期刪除代碼註釋，也不影響後期維護 產品正式發佈 建議刪除註釋，減小文件大小，加快下載速度，提升用戶體驗

七、jQuery對象和DOM對象：

●DOM模型：瀏覽器把HTML文檔的元素轉換成節點對象，全部節點組成了一個樹狀結構；

●DOM對象：直接使用javaScript獲取的節點對象就是DOM對象。 　　在javaScript中，使用getElementsByTagName()或getElementById()來獲取元素的節點，經過該方式獲得的DOM元素都是DOM對象。  　　　　 Eg：var objDOM=document.getElementById("title"); 　　　　　　    var objHTML=objDOM.innerHTML;

●jQuery對象：使用jQuery包裝DOM對象後產生的對象，它可以使用jQuery中的方法；        Eg：  $("#title").html( ); 　　　　　　等同於 　　　　　 document.getElementById("title").innerHTML;

注：DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用；

●jQuery對象沒法直接使用DOM對象的任何方法。 ●DOM對象也沒法直接使用jQuery對象的方法。 ●jQuery對象名前綴帶有「$」 　　　　●DOM對象轉jQuery對象：對於一個DOM對象，只須要使用$()函數將DOM對象包裝起來，就能夠得到一個jQuery對象。 　　　　　　　　　　使用$()函數進行轉化：$(DOM對象) 　　　　　　　　　　　　Eg： var  text=document.getElementById(「text」);      //DOM對象 　　　　　　　　　　　　　　  var  $text=$(text);                             //jQuery對象 　　　　　　　　　　　　　　注：jQuery對象命名通常約定以$開頭，在事件中常用$(this)，this是觸發該事件的對象

●jQuery對象轉換成DOM對象： 　　　　★jQuery對象是一個相似數組的對象，能夠經過[index]的方法獲得相應的DOM對象 　　　　　　　　Eg：var  $text=$(「text」);       //jQuery對象 　　　　　　　　　　 var  text=$text[0];         //DOM對象 　　　　 ★經過get(index)方法獲得相應的DOM對象 　　　　　　　　Eg：var  $text=$(「text」);       //jQuery對象 　　　　　　　　　　  var  text=$text.get[0];     //DOM對象

八、 附加：

■初識jQuery >> jQuery的引用

●網頁中使用JS嵌入網頁時有3種方式： 1、在HTML中直接使用&lt;script&gt;標籤 2、使用外部JavaScript文件 3、直接在HTML標籤中寫JS代碼 ●引入外部JS文件是使用<script>標籤中的「src」屬性; ●JS文件能夠在HTML頁面的<head>標籤和<body>標籤中引入; ●jQuery能夠把源碼放在<script>裏，而後使用jQuery;

●jQuery中JS的引用屬性是 src href是用在樣式的引用， url是指定的地址通常指jquery的Ajax路徑。 ref是css的屬性用於指定當前文檔與被連接文檔的關係

●jQuery的引用的方法：對於jQuery的引用，能夠將其js文件下載到本地引用，也能夠在線引用。對jQuery的引用應該在使用了jQuery框架的js文件以前

 

 

■初識jQuery >> jQuery的基本概念和優點測試分析

●javaScript和jQuery的概念理解及javaScript和jQuery的關係： 　　★Js是腳本語言，邊解釋邊執行； 　　★jQuery就是封裝的js庫，因此jQuery能解決的問題js均可以解決，反之亦正確，可是這並不能說明jQuery就能夠替代js。

●jQuery的主要功能包括：遍歷HTML文檔、操做DOM、處理事件、執行動畫、開發Ajax的代碼;

●jQuery選擇器分類：類選擇器：基本選擇器、層次選擇器、屬性選擇器過濾選擇器：基本過濾選擇器、可見性過濾選擇器表單選擇器：內容過濾器：

●jQuery是基於JavaScript的一個JS封裝庫。 JavaScript 與jQuery可混合使用，他們本身能夠相互轉化,使用jQuery方法時須先引入jQuery庫文件

●jQuery 是一個 JavaScript 庫，就是把用javascript寫的對象和函數放到一個*.js文件中;使用時，必須先引入這個JavaScript 庫文件；且由於自己就是用javascript寫的，因此能夠和javascript一塊兒使用

 

■初識jQuery >> DOM模型的概念和原理測試分析；

●找不到的DOM對象返回爲null，   找不到jQuery對象返回空數組對象   Jquery中訪問對象的size方法的返回值和Jquery對象中的length屬性

●jQuery DOM 元素方法。而DOM元素包含 .get()、.index()、.size()、.toArray()這四種方法 　　get()是：得到由選擇器指定的 DOM 元素 　　.index()是：返回指定元素相對於其餘指定元素的 index 位置 　　.size()是：返回被 jQuery 選擇器匹配的元素的數量 　　.toArray()是：以數組的形式返回 jQuery 選擇器匹配的元素

●attr表明的是屬性節點，att是設置屬性的方法.html()方法是得到某個選擇器裏的全部內容；    text表明文本節點text()是得到某個選擇器的文本內容.

●jquery刪除dom元素的方法，jquery定義了兩種刪除元素的方法，remove() - 刪除被選元素（及其子元素），empty() - 從被選元素中刪除子元素。

 

 

■初識jQuery >> jQuery的基本語法結構（工廠函數、選擇器、方法）測試分析

●$(document)獲得的是一個jQuery對象

●Disabled 是禁用input元素的函數 ●hide()是用於隱藏可見元素，show()用於顯示隱藏元素，toggle()實現切換元素的可見狀態，fadeIn()淡入效果。

●each() 方法爲每一個匹配元素規定要運行的函數。 　　　　提示：返回 false 可用於及早中止循環。 　　語法 　　　　$(selector).each(function(index,element)) 　　參數  描述 　　　　function(index,element)   必需。爲每一個匹配元素規定運行的函數。 　　　　index - 選擇器的 index 位置。 　　　　element - 當前的元素（也可以使用 "this" 選擇器） ●each() 函數就像是 Java 裏的一個 Iterator，它容許你遍歷一個元素集合。你能夠傳一個函數給 each() 方法，被調用的 jQuery 對象會在其每一個元素上執行傳入的函數。其中 text() 方法返回選項的文本

●標籤選擇器直接寫標籤的名稱，不須要寫尖括號,「.」開頭的是類選擇器，「#」開頭的是id選擇器； ●siblings() 方法返回被選元素的全部同胞元素 ●jQuery的核心功能是根據選擇器查找HTML元素，而後對這些元素執行相應的操做； ●slideDown是JQuery裏面向下滑動的效果，

●animate是JQuery移動元素的動畫效果， ●slideUp是向上滑動的效果。 ●slideToggle是經過使用滑動效果（高度變化）來切換元素的可見狀態

●appendTo:追加到元素的末尾用;

●jQuery自己是對javascript的包裝，於是也屬於javascript語言。，其$和jquery函數的做用相似，一個是符號表達式，一個是命名函數。jQuery中能夠將dom對象轉化爲jQuery對象，同時能夠實現全部javascript的功能。

●ajaxSend( callback ) 在一個AJAX請求發送時，執行一個函數 　　height()返回id爲msg的元素的高度 　　toggle( fn, fn ) 若是點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數

●jquery獲取Value值兩種形式 val() 、attr(‘value’) 都可 ●Jquery程序的開發過程，Jquery的方法有不少, ajaxComplete()，ajaxSuccess(),ajaxSend()的做用都是AJAX 請求完成時執行函數。

●Ajax 事件, XMLHttpRequest 對象和設置做爲參數傳遞給回調函數; ●只有$.post()纔是jquery的ajax的全局事件， ●Ajax請求使用GET方法 ●AJAX即「AsynchronousJavascriptAndXML」（異步JavaScript和XML）總體技術包括JavaScript和xml；

●Ajax基礎中的XMLHttpRequest返回狀態，0 初始化狀態， 　　1 open()方法已調用，可是 send() 方法未調用。請求尚未被髮送， 　　2 send()方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應， 　　3 全部響應頭部都已經接收到。響應體開始接收但未完成， 　　4 HTTP 響應已經徹底接收。

●datagrid是jQuery EasyUI的插件所，Datagrid的columns屬性能夠用於定義表格的列  ●dialog、 tabs 、menu 都是jQueryUI的插件

●JQuery的方法：bind()是綁定事件、hover()是鼠標懸停時觸發、toggle()是連續單擊時觸發

●激活的全部元素的方法是enabled； ●html()方法能夠獲取匹配元素的html內容或文本內容

●jquery選擇器的表單元素過濾器 表單元素過濾選擇器： 　　$(":enabled")             選擇全部的可操做的表單元素 　　$(":disabled")            選擇全部的不可操做的表單元素 　　$(":checked")            選擇全部的被checked的表單元素 　　$("select option:selected") 選擇全部的select 的子元素中被selected的元素

●隱藏可見的  元素 　　$(".btn1").click(function(){  　　　　$("p").hide();    　　  }); ●顯示出隱藏的P標籤 　　$(".btn2").click(function(){  　　$("p").show(); 　　}); ●toggle() 方法切換元素的可見狀態：若是被選元素可見，則隱藏這些元素，若是被選元素隱藏，則顯示這些元素。

●jQuery的基本語法：改變屬性值的方法有attr()和css()

●JavaScript window.onload 事件和 jQuery ready 函數之間的主要區別是， 前者除了要等待 DOM 被建立還要等到包括大型圖片、音頻、視頻在內的全部外部資源都徹底加載。若是加載圖片和媒體內容花費了大量時間，用戶就會感覺到定義在 window.onload 事件上的代碼在執行時有明顯的延遲。 另外一方面，jQuery ready() 函數只需對 DOM 樹的等待，而無需對圖像或外部資源加載的等待，從而執行起來更快。使用 jQuery $(document).ready() 的另外一個優點是你能夠在網頁裏屢次使用它，瀏覽器會按它們在 HTML 頁面裏出現的順序執行它們， 相反對於 onload 技術而言，只能在單一函數裏使用。鑑於這個好處，用 jQuery ready() 函數比用 JavaScript window.onload 事件要更好些。

●jQuery是一個JavaScript函數庫。jQuery是一個輕量級的"寫的少，作的多"的JavaScript庫。 jQuery庫包含如下功能：HTML 元素選取、HTML 元素操做、CSS 操做、HTML 事件函數、JavaScript 特效和動畫、HTML DOM 遍歷和修改、AJAX、Utilities，除此以外，Jquery還提供了大量的插件。

●JQuery UI自動完成方法的實現。JQuery UI autocomplete是JQuery UI的自動完成組件；

●.html(),.text(),.val()三種方法都是用來讀取選定元素的內容； 　　★.html()是用來讀取元素的HTML內容（包括其Html標籤）， 　　★.text()用來讀取元素的純文本內容，包括其後代元素， 　　★.val()是用來讀取表單元素的"value"值。 　　★其中.和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個元素上時，只讀取第一個元素；.val()方法和.html()相同，若是其應用在多個元素上時，只能讀取第一個表單元的"value"值，可是.text()和他們不同，若是.text()應用在多個元素上時，將會讀取全部選中元素的文本內容。

 

 

■初識jQuery >> jQuery對象與DOM對象的相互轉換

●jQuery對象是一個數據對象，能夠經過[index]的方法，來獲得相應的DOM對象 jQuery自己提供，經過.get(index)方法，獲得相應的DOM對象

●jQuery對象與DOM對象能相互轉換，如$(selector).get(0)轉爲DOM對象      jQuery對象不可使用getElementById() 方法 $(document.getElementById(「box」))是把id爲box標籤元素轉換爲jQuery對象

●DOM對象轉換成JQuery 對象能夠經過$()工廠來實現，$(DOM對象) 這樣就能夠轉成對應的JQuery對象了，而document.getElementById(id名稱) 能夠經過id來獲得對應的DOM 對象；

●jQuery對象與DOM對象的相互轉換，jQuery只是js的一個函數庫不能徹底取代js，無論jQuery對象仍是DOM對象都只能使用本身的函數和屬性；

●jQuery轉DOM對象:jQuery對象是一個數組對象，能夠經過[index]的豐富獲得相應的DOM對象，還能夠經過get[index]去獲得相應的DOM對象。 DOM對象轉jQuery對象:$(DOM對象)； ●innerHTML是js對象的html()是jquery對象的js對象轉換成jquery對象 在外套一個$()