標籤：tor out google head 文法 方法 call 查詢 動畫
一、瞭解jquery
1.jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
2.jQuery 庫包含以下特性：
? HTML 元素選取
? HTML 元素操作
? CSS 操作
? HTML 事件函數
? JavaScript 特效和動畫
? HTML DOM 遍曆和修改
? AJAX
? Utilities
3.通過下面的標記把 jQuery 添加到網頁中
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
4.有兩個版本的 jQuery 可供下載：
? Production version - 用於實際的網站中，已被精簡和壓縮。
? Development version - 用於測試和開發（未壓縮，是可讀的代碼）
5.CDN（內容分髮網絡）
6.替代方案
1??Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
2??Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
7.jQuery 文法執行個體
$(this).hide()
示範 jQuery hide() 函數，隱藏當前的 HTML 元素。
$("#test").hide()
示範 jQuery hide() 函數，隱藏 id="test" 的元素。
$("p").hide()
示範 jQuery hide() 函數，隱藏所有 <p> 元素。
$(".test").hide()
示範 jQuery hide() 函數，隱藏所有 class="test" 的元素。
8.基礎文法是：$(selector).action()
? 貨幣符號定義 jQuery
? 選擇符（selector）“查詢”和“尋找” HTML 元素
? jQuery 的 action() 執行對元素的操作
9.jQuery 使用的文法是 XPath 與 CSS 選取器文法的組合
10.如果在文檔沒有完全載入之前就運行函數，操作可能失敗。下面是兩個具體的例子：
? 試圖隱藏一個不存在的元素
? 獲得未完全載入的映像的大小
11.執行個體中的所有 jQuery 函數位於一個 document ready 函數中是為了防止文檔在完全載入（就緒）之前運行 jQuery 代碼。
12.jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Event 函數
綁定函數至
$(document).ready(function)
將函數綁定到文檔的就緒事件（當文檔完成載入時）
$(selector).click(function)
觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)
觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)
觸發或將函數綁定到被選元素的獲得焦時間點事件
$(selector).mouseover(function)
觸發或將函數綁定到被選元素的滑鼠移至上方事件
13.結論
由於 jQuery 是為處理 HTML 事件而特別設計的，那麼當您遵循以下原則時，您的代碼會更恰當且更易維護：
? 把所有 jQuery 代碼置於事件處理函數中
? 把所有事件處理函數置於文檔就緒事件處理器中
? 把 jQuery 代碼置於單獨的 .js 檔案中
? 如果存在名稱衝突，則重新命名 jQuery 庫
14.文法
描述
$(this)
當前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有 class="intro" 的 <p> 元素
$(".intro")
所有 class="intro" 的元素
$("#intro")
id="intro" 的元素
$("ul li:first")
每個 <ul> 的第一個 <li> 元素
$("[href$=‘.jpg‘]")
所有帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head")
id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("p").css("background-color","red");把所有 p 元素的背景顏色更改為紅色
二、jquery的動態
文法：$(selector).hide(speed,callback);
1.speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
2.callback 參數是 hide完成後所執行的函數名稱
1.$(document).ready(function (){
$(“p”).click(function(){
$(this).hide();//隱藏p標籤的內容
$(“p”).show();//顯示p標籤的內容
})
})
3.$(document).ready(function(){
$(“p”).toggle(); //toggle() 方法來切換 hide() 和 show() 方法。
})
4.$(document).ready(function(){
$(“#div”).fadeIn();//淡入淡出
$(“#div”).fadeOut();
$(“#div”).fadeToggle();
$(“#div”).fadeTo(“slow”,0.5);
//文法：$(selector).fadeTo(speed,opacity,callback);
opacity設定為透明度（值介於0與1之間）
})
5.
滑動
jquery slideDown()向下滑動
jquery slideUp()向上滑動
query slideToggle()切換上下滑動
6.
jQuery Callback 函數
當動畫 100% 完成後，即調用 Callback 函數。
典型的文法：
$(selector).hide(speed,callback)
7.
正確（有 callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
8.
jQuery stop()停止滑動
文法：$(selector).stop(stopAll,goToEnd);
stopAll：規定是否應該清楚動畫隊列。預設是false，即停止動畫；
goToEnd：規定是否立即完成當前動畫，預設是false
執行個體：$(“#id”).click(function (){
$(“p”).stop();
})
9.
動畫
方法：
jquery animate()
文法：
$(selector).animate({params},speed,callback)
params參數定義形成動畫的CSS屬性
執行個體：
$(“button”).click(function (){
$(“div”).animate({left:’250px’});
})
10.
執行個體：
下面的例子把 css(), slideUp(), and slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：
$(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2200);
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
