本系列Jquery所用測試Demo版本是《uncompressed,development jQuery 1.11.3》 最新的jquery包可以從官網下載請參照http://jquery.com/ Jquery在官網上的版本分為兩種： Uncompressed 非壓縮版本 一般用於調試、開發。 C ...
本系列Jquery所用測試Demo版本是《uncompressed,development jQuery 1.11.3》
最新的jquery包可以從官網下載請參照http://jquery.com/
Jquery在官網上的版本分為兩種：
- Uncompressed 非壓縮版本
一般用於調試、開發。
- Compressed 壓縮版本
在系統穩定後一般用壓縮版本來提高效率。
Jquery不需要安裝，在WEB項目中只需要引用下JS的文件位置就可以了
eg:
<script src="Jquery/jquery-1.11.3.js"></script>
<script src="Jquery/ClientJS/01.js"></script>
Jquery從2.0版本開始便不再支持IE6\IE7\IE8
一、Jquery能做哪些工作
- 取得文檔中的元素。
- 修改頁面的外觀。
- 改孌文檔的內容。
- 響應用戶的交互操作。
- 為頁面添加動態效果。
- 無需刷新頁面從伺服器端獲取信息
- 簡化常用的JavaScript任務
二、JQuery出色的地方
- 可以發揮CSS的最大優勢
- 支持擴展
- 抽象瀏覽器不一致性
- 總是面向集合
- 將多重操作集於一行
三、jQuery的操作
HTML 文檔包括如下幾點信息
|
HTML格式 |
說明 |
|
<!DOCTYPE html> |
Html5格式的文檔 |
|
<html lang="en"> |
網頁主體 |
|
<head></head> |
頭信息 |
|
<meta charset="utf-8"> |
編碼格式 |
|
<title>Through the Looking-Glass</title> |
網頁標題 |
|
<link rel="stylesheet" href="Css/01.css" type="text/css" /> |
CSS |
|
<script src="jquery-1.11.3.js"></script> |
jquery JS |
|
<script src="01.js"></script> |
自定義 JS |
|
<body>……</body> |
內容信息 |
HTML Jquery的操作步驟（原DEMO文件下麵提供下載）
按照上面的JS引用內容:
1) <script src="Jquery/jquery-1.11.3.js"></script>
官方定義的腳本，必須在引用自己定義的腳本之前引用，否則自己定義的腳本就會報錯。
2) <script src="Jquery/ClientJS/01.js"></script>
為寫的自己定義的所有腳本存放位置。
區分開自己定義的腳本更方便管理。
編寫 Jquery引用 <script src="Jquery/ClientJS/01.js"></script>腳本文件後便可以再01.js中編寫自己定義的腳本了。
EG：
- 第一種匿名載入
$(document).ready(
function ()
{
$('div.poem-stanza').addClass('highlight');
}
);
- 第二種載入方式
<script type="text/javascript">
function addHighlightClass()
{
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
</script>
分析上面的代碼：
① 查找詩歌的文本
通過$()函數來完成的，參數中包括任何CSS選擇符表達式。在這裡是希望找到所有poem-stanza類的Div元素,$()函數會返回一個新的JQuery對象實例，我們希望改變詩歌中的類就需要這樣去選擇。
② 加入新類
addClass()方法的作用是不言而喻的，它會將一個CSS類應用到我們選擇的頁面元素中去。與.addClass方法相反的是 .removeClass(),為我們探索JQuery支持各種選擇表達式提供了便利。highlight定義了一個帶邊框和灰色背景斜文本樣式。
③ 執行代碼
$(document).ready()方法，Jquery支持我們預定在Dom載入完畢後調用某個函數，而不必等頁面中的圖像載入。
jQuery調試工具
1、IE Developer Tools
2、Chrome Developer Tools
3、FireFox FireBug
Chrome Developer Tools使用
F12打開 Chrome Developer Tools 調試面板 ，
1.在面板中預設的是Elements(元素)標簽頁， 左側顯示的是頁面結構。通過放大鏡找頁面元素的位置。
2.[ Sources ] 資源標簽頁中顯示的是頁面中載入的所有腳本。右鍵單擊行號可能設置普通斷點和條件斷點，標簽頁的右側，可以觀察監控的值。可以監控的變數和表達式。
3.控制台
可以在控制台查看Jquery對象。在這裡可以填入你用的Jquery 非常好用，並用很方便您的調試。
EG:
$(document).ready(function()
{
console.log('Hello');
console.log('World');
console.log($('div.poem-stanza'));
});
可以向console.log傳入任何表達式，比alert() 更好用。
更多參與瞭解請加入群【QQ】373833228.
