## 認識jQuery jQuery 的理念是：write less,do more。 jQuery 極大的簡化了 javascript 開發人員遍歷HTML文檔、操作 DOM 、處理事件、執行動畫和開發 Ajax 的操作。 ### 1.jQuery優勢 1. 輕量級。壓縮后可以保持在30kb左右。 2. 強大的選擇器。可以使用CSS1-CSS3幾乎所有選擇器。 3. 出色的DOM操作的封裝。 4. 可靠的事件處理機制。 5. 完善的Ajax。 6. 不污染頂級變量。jQuery只建立一個名為jQuery的對象，其所有的函數方法都在這個對象之下。 ### 2.使用jQuery jQuery 庫文件一般有生產版和開發版。區別在于生產版經過了壓縮，只有30kb左右，我們下載使用開發版就可以了。 使用時，在頁面引入 jquery.js 庫文件就可以使用了。 ~~~javascript <script type="text/javascript" src="js/jquery.js"></script> ~~~ **簡單編寫jQuery:** ~~~ $(document).ready(function(){ alert('Hello jQuery'); }); ~~~ window.onload方法和$(document).ready(）方法的區別。 * `window.onload`必須等待網頁中所有內容加在完畢才能執行。 * `$(document).ready(）`是網頁中所有DOM結構繪制完成后就執行，可能DOM元素關聯的東西并沒有加載。 **鏈式風格** ~~~ //等待dom元素加載完畢. $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current") //給當前元素添加"current"樣式 .next().show() //下一個元素顯示 .parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"樣式 .next().hide(); //它們的下一個元素隱藏 return false;//事件處理阻止了默認的事件行為并停止了事件通過dom向上冒泡 }); }); ~~~