jQuery教程（一）
jQuery
a) 是一個javascript函數庫
jQuery庫包含特性
a) HTML元素讀取
b) HTML元素操作
c) CSS操作
d) HTML事件函數
e) JavaScript特效和動畫
f) HTML DOM周遊和修改
g) AJAX
h) Utilities
使用jQuery準備工作
a) 第一種方式：下載下傳jQuery
b) 第二種方式：可以從 Google或 Microsoft 加載 CDN jQuery 核心檔案。
i. 使用Google的cdn jQuery檔案
<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
ii. 使用Microsoft的cdn jQuery檔案
<scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
使用jQuery hide() 函數，隐藏目前的 HTML 元素。
a) 執行個體：
<head>
<scripttype=”text/javascript” src=”jquery.js”>
</script>
<scripttype=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(this).hide();
});
</head>
<body>
<buttontype=”button”>click me</button>
</body>
使用jQuery hide()函數，隐藏id=”test”的元素
a) <script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
})
</script>
使用jQuery hide()函數，隐藏所有<p>元素
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
使用jQuery hide()函數，隐藏所有class=”test”的元素
$(“.test”).hide();
jQuery文法
a) 基礎文法：$(selector).action()
b) 說明：
i. 美元符号定義jQuery
ii. 選擇符（selector）“查詢”和“查找”html元素
iii. jQuery的action()執行對元素的操作
文檔就緒函數
a) 文法：
jQuery選擇器
a) 分類：
i. 元素選擇器
執行個體：$(“p”),$(“p.first”),$(“p#demo”)
ii. 屬性選擇器
執行個體：$(“[href]”),$(“[href=’#’]”),$(“[href!=’#’]”),$(“[href$=’.jpg’]”)
iii. Css選擇器
執行個體：$(“p”).css(“background-color”,”green”);
b) 更多選擇器執行個體
文法
描述
$(this)
目前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有的 <p> 元素
$(".intro")
所有的元素
$("#intro")
id="intro" 的第一個元素
$("ul li:first")
每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")
所有帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head")
id="intro" 的 <div> 元素中的所有的元素
jQuery事件函數
a) jQuery事件處理方法是jQuery中的核心函數，事件處理程式指的是當html中發生某些事件時所調用的方法。
Event 函數
綁定函數至
$(document).ready(function)
将函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)
觸發或将函數綁定到被選元素的點選事件
$(selector).dblclick(function)
觸發或将函數綁定到被選元素的輕按兩下事件
$(selector).focus(function)
觸發或将函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function)
觸發或将函數綁定到被選元素的滑鼠懸停事件
jQuery名稱沖突
a) jQuery使用$符号作為jQuery的簡介方式，但其他javaScript庫中也會使用$符号，就會出現名稱沖突
b) 解決方式：使用noConflict()的方法
c) 執行個體：var jq =jQuery.noConflict();
使用jQuery的結論
a) 把所有的jQuery代碼置于事件處理函數中
b) 把所有的事件處理函數置于文檔就緒事件處理器中
c) 把jQuery代碼置于單獨的.js檔案中
d) 如果存在名稱沖突，則重命名jQuery庫
jQuery效果
a) 層的大小改變效果
b) 執行個體：
$(“#start”).click(function(){
$(“#box”).animate({height:300},”slow”);
$(“#box”).animate({width:300},”slow”);
$(“#box”).animate({height:100},”slow”);
$(“#box”).animate({width:100},”slow”);
淡出效果
執行個體：
<script type=”text/javascript>
$(“div”).fadeTo(“slow”,0.25);
slide panel(滑動面版效果)
$(“.flip”).click(function(){
$(“.panel”).slideToggle(“slow”);
隐藏部分文本
jQuery隐藏和顯示
a) 隐藏：hide()
b) 顯示：show()
c) 都可以設定兩個參數：speed和callback
d) 文法：
i. $(selector).hide(speed,callback)
ii. $(selector).show(speed,callback)
解釋：speed參數規定顯示或隐藏的速度，可以設定的值：“slow”,“fast”,“normal”或毫秒。Callback參數是在hide或show函數完成之後被執行的函數名稱。
16. jQuery切換
隐藏顯示的内容和顯示隐藏的内容文法：
i. $(selector).toggle(speed,callback)
i. $(“button”).click(function(){
$(“p”).toggle();
ii. });
本文轉自 素顔豬 51CTO部落格，原文連結:http://blog.51cto.com/suyanzhu/1561414
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)