溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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代碼實現效果
4、純javascript與jquery
window.onload() 不可多次使用，必須等到頁面內容包括圖片的所有元素加載完才能執行
$(document).ready(); 可多次使用 在DOM就緒后馬上執行
相較而言，jquery代碼不僅寫起來省事，讀起來簡單，而且也比純javascript代碼的執行速度快
5、使用開發工具
各瀏覽器廠商都有自己對應的開發調試工具
6、小結
本章重點指出了
- jquery 能做什么
- 為什么使用jquery
- 如何使用 jquery
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
