標籤：解決方案 瀏覽器 content jquery
Jquery基礎教程 - 第一章 JQUERY入門
內容提要
1、jquery能做什麼
2、jquery為什麼如此出色
3、第一個jquery驅動的頁面
4、純javascript與jquery
5、開發工具
6、小結
1、jquery能做什麼
取得文檔中的元素
-- jQuery為準確的獲得需要檢查或操縱的文件項目，提供了可靠而富有效率的選擇符機制。
找到所有應用了.content class樣式的div中所有的P標籤
$(‘div.content‘).find(‘p‘);
修改頁面外觀
-- jQuery提供了跨瀏覽器的標準解決方案。而且，即使頁面已經呈現之後，JQuery仍然可以
改變文檔中某個部分的類或者個別樣式
找到頁面所有的ul標籤的第一個li子標籤，然後為它們增加名為active的樣式
$(‘ul > li:first‘).addClass(‘active‘);
改變文檔內容
-- jquery使用少量代碼就可改變文檔的內容。
可以改變文本、插入或翻轉映像、列表重新排序，甚至對HTML文檔的整個結構都能重寫和
補充。
為ID為"container"的元素添加一個連結：
$(‘#container‘).append(‘<a href="more.html">more</a>‘);
響應使用者操作
-- jquery提供了截獲形形***的頁面事件的適當方式，而不需要使用事件處理常式拆散HTML
代碼。
為使用的.show-details樣式的button元素添加一個click事件，事件就是：顯示使用.details樣式的DIV
$(‘button.show-details‘).click(function() { $(‘div.details‘).show(); });
為頁面添加動態效果
-- jquery中內建了一批淡入、擦除之類的效果，以及製作新效果的工具包。
為ID為msubject的元素添加隱藏的動態效果為slide
$(‘div.details‘).slideDown;
無需重新整理頁面從伺服器擷取資料(ajax)
-- jquery通過消除ajax過程中對瀏覽器限定的複雜性，使開發人員專註於伺服器端的功能
設計；
$(‘div.detail‘).load(‘more.html #content‘);
簡化常見的javascript操作（迭代數組 ）
-- jquery改進了對基本的javascript資料結構的操作
$each(obj, function(key,value){tatal += value;});
2、jquery為什麼如此出色
利用CSS的優勢
-- jquery 將尋找頁面元素的機制構建與CSS選擇符上
支援擴充
-- jquery將特殊情況下使用的工具歸入外掛程式當中，為了避免特性蠕變（損壞特性的簡潔、
輕巧、穩定及錯誤的出現等）
抽象瀏覽器的不一致性
-- jquery添加一個抽象層來標準化常見的任務，從而有效減少了代碼量，同時也極大的簡
化了這些任務，有效解決瀏覽器多樣性的複雜問題。
總是面向集合
-- jquery找到某類頁面元素進行操作時，無需進行迴圈遍曆每個元素。相反，jquery中許多
方法（.hide）被設計成自動操作對象集合，而不是單個對象，利用這種隱式迭代的技術
，可以拋棄臃腫的迴圈機構，從而大幅減少代碼量
將多重操作集於一行
-- 為了避免過度使用臨時變數或不必要的重複代碼，jquery在大多數方法中採用了一種稱作
連綴的編程模式。這種模式意味著機遇一個對象進行的多數操作的結果，都會返回這個對
象本身，一邊為該對象應用下一次操作。
3、第一個jquery驅動的頁面
下載 使用jquery
-- jquery不需要安裝，只需要使用它的副本即可
副本可放在外部網站上，放在自己的伺服器上，只要在HTML文檔中使用<script>元素把它
引用進來即可<script src="jquery.js"></script>
編寫jquery代碼
在頁面中動態彈出一個提示
<!DOCTYPE html><html> <head> <title>第一個jquery頁面</title> <script type="text/javascript" src="jquery.js" ></script> <script> $(document).ready(function(){alert("第一個jquery頁面");}); </script> <head> <body></body><html>
jquery代碼實現效果
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/4C/79/wKiom1Q-Kd_R2hLDAAEvN9qIcm8616.jpg" title="QQ圖片20141015155508.jpg" alt="wKiom1Q-Kd_R2hLDAAEvN9qIcm8616.jpg" />
4、純javascript與jquery
window.onload() 不可多次使用，必須等到頁面內容包括圖片的所有元素載入完才能執行
$(document).ready(); 可多次使用 在DOM就緒後馬上執行
相較而言，jquery代碼不僅寫起來省事，讀起來簡單，而且也比純javascript代碼的執行速度快
5、使用開發工具
各瀏覽器廠商都有自己對應的開發調試工具
6、小結
本章重點指出了
- jquery 能做什麼
- 為什麼使用jquery
- 如何使用 jquery
jquery基礎教程 - 第一章 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
