jQuery基礎【1】

jQuery 是一個「寫的更少，但作的更多」的輕量級 JavaScript 庫。jQuery 極大地簡化了 JavaScript 編程。jQuery 很容易學習。jQuery 庫位於一個 JavaScript 文件中，其中包含了全部的 jQuery 函數。jQuery 是一個 JavaScript 函數庫。jQuery 庫包含如下特性：

　　•HTML 元素選取　　　　　 •HTML 元素操做

　　•CSS 操做　　　　　  　　 •HTML 事件函數

　　•JavaScript 特效和動畫　　•HTML DOM 遍歷和修改

　　•AJAX　　　　　　　　　　•Utilities

1.向頁面添加jQuery 庫

1     <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
2     <%--使用 Google 的 CDN--%>
3     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
4 /jquery/1.4.4/jquery.min.js"></script>
5     <%--使用 Microsoft 的 CDN--%>
6     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
7 /jquery-1.4.4.min.js"></script>

2.jQuery 語法

　　jQuery 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。基礎語法：$(selector).action()，其中美圓符號$定義 jQuery選擇符，(selector)「查詢」和「查找」 HTML 元素，action()執行對元素的操做。

1 //實例
2 $(this).hide() - 隱藏當前元素
3 $("p").hide() - 隱藏全部段落
4 $("p.test").hide() - 隱藏全部 class="test" 的段落
5 $("#test").hide() - 隱藏全部 id="test" 的元素

　　全部 jQuery 函數位於一個 document ready 函數中。這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。若是在文檔沒有徹底加載以前就運行函數，操做可能失敗。下面是兩個具體的例子：

　　•試圖隱藏一個不存在的元素　　•得到未徹底加載的圖像的大小

1 //文檔就緒函數
2 $(document).ready(function(){
3 -- jQuery functions go here --
4  });

3.jQuery 選擇器

　　jQuery 選擇器容許您對元素組或單個元素進行操做。jQuery 元素選擇器和屬性選擇器容許您經過標籤名、屬性名或內容對 HTML 元素進行選擇。選擇器容許您對 HTML 元素組或單個元素進行操做。在 HTML DOM 術語中，選擇器容許您對 DOM 元素組或單個 DOM 節點進行操做。

1 //jQuery 使用 CSS 選擇器來選取 HTML 元素。
2 $("p") - 選取 <p> 元素。
3 $("p.intro") - 選取全部 class="intro" 的 <p> 元素。
4 $("p#demo") - 選取 id="demo" 的第一個 <p> 元素。

1 //jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
2 $("[href]") - 選取全部帶有 href 屬性的元素。
3 $("[href='#']") - 選取全部帶有 href 值等於 "#" 的元素。
4 $("[href!='#']") - 選取全部帶有 href 值不等於 "#" 的元素。
5 $("[href$='.jpg']") - 選取全部 href 值以 ".jpg" 結尾的元素。

1 //更多的選擇器實例
2 $(this) - 當前 HTML 元素
3 $("p") - 全部 <p> 元素
4 $("p.intro") - 全部 class="intro" 的 <p> 元素
5 $(".intro") - 全部 class="intro" 的元素
6 $("#intro") - id="intro" 的第一個元素
7 $("ul li:first") - 每一個 <ul> 的第一個 <li> 元素
8 $("[href$='.jpg']") - 全部帶有以 ".jpg" 結尾的屬性值的 href 屬性
9 $("div#intro .head") - id="intro" 的 <div> 元素中的全部 class="head" 的元素

4.jQuery 事件

　　jQuery 事件處理方法是 jQuery 中的核心函數。事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

1 //實例：當按鈕的點擊事件被觸發時會調用一個隱藏全部 <p> 元素的方法
2 <script type="text/javascript">
3 $(document).ready(function(){
4   $("button").click(function(){
5     $("p").hide();
6   });
7 });
8 </script>

1 //jQuery 事件
2 $(document).ready(function) - 將函數綁定到文檔的就緒事件（當文檔完成加載時）
3 $(selector).click(function) - 觸發或將函數綁定到被選元素的點擊事件
4 $(selector).dblclick(function) - 觸發或將函數綁定到被選元素的雙擊事件
5 $(selector).focus(function) - 觸發或將函數綁定到被選元素的得到焦點事件
6 $(selector).mouseover(function) - 觸發或將函數綁定到被選元素的鼠標懸停事件

5.jQuery HTML 操做

 1 //jQuery HTML 操做
 2 $(selector).html(content) - 改變被選元素的（內部）HTML
 3 $("p").html("jQuery");
 4 $(selector).append(content) - 向被選元素的（內部）HTML 追加內容
 5 $("p").append("jQuery")
 6 $(selector).prepend(content) - 向被選元素的（內部）HTML 「預置」（Prepend）內容
 7 $("p").prepend("jQuery")
 8 $(selector).after(content) - 在被選元素以後添加 HTML
 9 $("p").after("jQuery")
10 $(selector).before(content) - 在被選元素以前添加 HTML
11 $("p").before("jQuery")

6.jQuery CSS 函數

 1 //jQuery CSS 函數
 2 $(selector).css(name,value) - 爲匹配元素設置樣式屬性的值
 3 $("p").css("background-color","red");
 4 $(selector).css({properties}) - 爲匹配元素設置多個樣式屬性
 5 $("p").css({"background-color":"red","font-size":"200%"});
 6 $(selector).css(name) - 得到第一個匹配元素的樣式屬性值
 7 $(this).css("background-color");
 8 $(selector).height(value) - 設置匹配元素的高度
 9 $("#id100").height("200px");
10 $(selector).width(value) - 設置匹配元素的寬度
11 $("#id200").width("300px");

7.jQuery AJAX 函數

　　jQuery 提供了用於 AJAX 開發的豐富函數（方法）庫。經過 jQuery AJAX，使用 HTTP Get 和 HTTP Post，能夠從遠程服務器請求 TXT、HTML、XML 或 JSON，能夠直接把遠程數據載入網頁的被選 HTML 元素中。寫的更少，作的更多。

 1 //jQuery AJAX 函數
 2 $(selector).load(url,data,callback) - 把遠程數據加載到被選的元素中
 3 $.ajax(options) - 把遠程數據加載到 XMLHttpRequest 對象中
 4 $.get(url,data,callback,type) - 使用 HTTP GET 來加載遠程數據
 5 $.post(url,data,callback,type) - 使用 HTTP POST 來加載遠程數據
 6 $.getJSON(url,data,callback) - 使用 HTTP GET 來加載遠程 JSON 數據
 7 $.getScript(url,callback) - 加載並執行遠程的 JavaScript 文件
 8 //(url) 被加載的數據的 URL（地址）
 9 //(data) 發送到服務器的數據的鍵/值對象
10 //(callback) 當數據被加載時，所執行的函數
11 //(options) 完整 AJAX 請求的全部鍵/值對選項
12 //(type) 被返回的數據的類型 (html,xml,json,jasonp,script,text)

8.jQuery 效果

 1 //jQuery 隱藏和顯示
 2 $("#hide").click(function () {
 3     $("p").hide();
 4 });
 5 $("#show").click(function () {
 6     $("p").show();
 7 });
 8 
 9 //jQuery 切換
10 $("button").click(function () {
11     $("p").toggle();
12 });
13 
14 //jQuery 滑動
15 $(".flip").click(function () {
16     $(".panel").slideDown();
17 });
18 $(".flip").click(function () {
19     $(".panel").slideUp()
20 })
21 $(".flip").click(function () {
22     $(".panel").slideToggle();
23 });
24 
25 //jQuery 淡化
26 $(selector).fadeIn(speed, callback) - 淡入被選元素
27 $(selector).fadeOut(speed, callback) - 淡出被選元素
28 $("button").click(function () {
29     $("div").fadeOut(4000);
30 });
31 $(selector).fadeTo(speed, opacity, callback) - 把被選元素淡出爲給定的不透明度
32 $("button").click(function () {
33     $("div").fadeTo("slow", 0.25);
34 });
35 //speed 參數能夠設置這些值："slow", "fast", "normal" 或 毫秒。
36 //callback 參數是在該函數完成以後被執行的函數名稱。
37 
38 //jQuery 自定義動畫
39 $(selector).animate({params},[duration],[easing],[callback]) - 對被選元素執行自定義動畫
40 animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
41 <script type="text/javascript">
42 $(document).ready(function(){
43 $("#start").click(function(){
44 $("#box").animate({height:300},"slow");
45 $("#box").animate({width:300},"slow");
46 $("#box").animate({height:100},"slow");
47 $("#box").animate({width:100},"slow");
48 });
49 });
50 </script> 
51 //HTML 元素默認是靜態定位，且沒法移動。
52 //如需使元素能夠移動，請把 CSS 的 position 設置爲 relative 或 absolute。

9.jQuery 名稱衝突

1 //實例：重命名 jQuery 庫
2 <script type="text/javascript">
3 var jq=jQuery.noConflict();
4 jq(document).ready(function(){
5   jq("button").click(function(){
6     jq("p").hide();
7   });
8 });
9 </script>

10.因爲 jQuery 是爲處理 HTML 事件而特別設計的，那麼當您遵循如下原則時，您的代碼會更恰當且更易維護：

• 把全部 jQuery 代碼置於事件處理函數中
• 把全部事件處理函數置於文檔就緒事件處理器中
• 把 jQuery 代碼置於單獨的 .js 文件中
• 若是存在名稱衝突，則重命名 jQuery 庫