標籤：移動 第一個 使用者 hello jpg dht add 顯示 eve
輕量級的js庫
相容各種瀏覽器＋css3
傳統：js＋DHTM jq:解放了用戶端的編程，
環境搭建進入官方網站擷取最新的版本 http://jquery.com/download/ ，這裡需要注意 jQuery 分 2 個系列版本 1.x 與 2.x，主要的區別在於 2.x 不再相容 IE6、7、8瀏覽器，這樣做的目的是為了相容移動端開發。由於減少了一些代碼，使得該版本比 jQuery 1.x 更小、更快。
如果開發人員比較在意老版本 IE 使用者，只能使用 jQuery 1.9 及之前的版本了。我們這本課程為了相容性問題，使用的是 1.9 版本。jQuery 每一個系列版本分為：壓縮版(compressed) 與 開發版(development)，我們在開發過程中使用開發版（開發版本便於代碼修改及調試），項目上線發布使用壓縮版（因為壓縮版本體積更小，效率更快）。
jQuery是一個JavaScript指令碼庫，不需要特別的安裝，只需要我們在頁面 <head> 標籤內中，通過 script 標籤引入 jQuery 庫即可。
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <title>環境搭建</title></head> <body> <script type="text/javascript"> alert($) </script></body></html>
alert 彈出以上資訊，說明環境已經搭建成功了。
jQueryHelloWorld體驗當頁面載入完成後，在頁面中以置中的方式顯示“您好！通過慕課網學習 jQuery 才是最佳的途徑”字樣。
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>第一個簡單的jQuery程式</title> <style type="text/css"> div{ padding:8px 0px; font-size:12px; text-align:center; border:1px solid #888; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div").html("您好！通過慕課網學習jQuery才是最佳的途徑。"); }); </script></head><body> <div></div></body></html>
程式碼分析：
$(document).ready 的作用是等頁面的文檔（document）中的節點都載入完畢後，再執行後續的代碼，因為我們在執行代碼的時候，可能會依賴頁面的某一個元素，我們要確保這個元素真正的的被載入完畢後才能正確的使用。
對於才開始接觸jQuery庫的初學者，我們需要清楚認識一點：
jQuery對象與DOM對象是不一樣的
可能一時半會分不清楚哪些是jQuery對象，哪些是DOM對象，下面重點介紹一下jQuery對象，以及兩者相互間的轉換。
通過一個簡單的例子，簡單區分下jQuery對象與DOM對象：
<p id=”imooc”></p>
我們要擷取頁面上這個id為imooc的div元素，然後給這個文本節點增加一段文字：“您好！通過慕課網學習jQuery才是最佳的途徑”，並且讓文字顏色變成紅色。
普通處理，通過標準JavaScript處理：
var p = document.getElementById(‘imooc‘);p.innerHTML = ‘您好！通過慕課網學習jQuery才是最佳的途徑‘;p.style.color = ‘red‘;
通過原生DOM模型提供的document.getElementById(“imooc”) 方法擷取的DOM元素就是一個DOM對象，再通過innerHTML與style屬性處理文本與顏色。
jQuery的處理：
var $p = $(‘#imooc‘);$p.html(‘您好！通過慕課網學習jQuery才是最佳的途徑‘).css(‘color‘,‘red‘);
通過$(‘#imooc‘)方法會得到一個$p的jQuery對象，$p是一個類數組對象。這個對象裡麵包含了DOM對象的資訊，然後封裝了很多操作方法，調用自己的方法html與css，得到的效果與標準的JavaScript處理結果是一致的。
通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：
PS：大家這裡做個大概印象就OK，後面會有深入的講解。
jQuery對象轉化成DOM對象jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行封裝處理，為的是提供更好更方便快捷的DOM處理與開發中經常使用的功能。我們使用jQuery的同時也能混合JavaScript原生代碼一起使用。在很多情境中，我們需要jQuery與DOM能夠相互的轉換，它們都是可以操作的DOM元素，jQuery是一個類數組對象，而DOM對象就是一個單獨的DOM元素。
如何把jQuery對象轉成DOM對象？
利用數組下標的方式讀取到jQuery中的DOM對象
HTML代碼
<div>元素一</div><div>元素二</div><div>元素三</div>
JavaScript代碼
var $div = $(‘div‘) //jQuery對象var div = $div[0] //轉化成DOM對象div.style.color = ‘red‘ //操作dom對象的屬性
用jQuery找到所有的div元素（3個），因為jQuery對象也是一個數組結構，可以通過數組下標索引找到第一個div元素，通過返回的div對象，調用它的style屬性修改第一個div元素的顏色。這裡需要注意的一點是，數組的索引是從0開始的，也就是第一個元素下標是0
通過jQuery內建的get()方法
jQuery對象自身提供一個.get() 方法允許我們直接存取jQuery對象中相關的DOM節點，get方法中提供一個元素的索引：
var $div = $(‘div‘) //jQuery對象var div = $div.get(0) //通過get方法，轉化成DOM對象div.style.color = ‘red‘ //操作dom對象的屬性
其實我們翻開源碼，看看就知道了，get方法就是利用的第一種方式處理的，只是封裝成一個get讓開發人員更直接方便的使用。
DOM對象轉化成jQuery對象相比較jQuery轉化成DOM，開發中更多的情況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法，通過傳遞不同的參數而產生不同的作用。
如果傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給封裝成一個新的jQuery對象
通過$(dom)方法將普通的dom對象加工成jQuery對象之後，我們就可以調用jQuery的方法了
HTML代碼
<div>元素一</div><div>元素二</div><div>元素三</div>
JavaScript代碼
var div = document.getElementsByTagName(‘div‘); //dom對象var $div = $(div); //jQuery對象var $first = $div.first(); //找到第一個div元素$first.css(‘color‘, ‘red‘); //給第一個元素設定顏色
通過getElementsByTagName擷取到所有div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象，通過調用jQuery對象中的first與css方法尋找第一個元素並且改變其顏色。
初識JQuery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
