jQuery學習

參考網站：http://www.runoob.com/jquery/jquery-tutorial.html

一、jQuery基礎

• 什麼是jQuery

jQuery是一個javascript庫，jQuery極大的簡化了JavaScript編程，而且jQuery很容易學習。

$(document).ready(function(){  
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

$(document)是一個選擇器，選中的是整個html全部元素的集合。

• jQuery的功能
  1.HTML 元素選取
  2.HTML 元素操做
  3.CSS 操做
  4.HTML 事件函數
  5.JavaScript 特效和動畫
  6.HTML DOM 遍歷和修改
  7.AJAX
  8.Utilities

• jQuery的語法
  jQuery 語法是經過選取 HTML 元素，並對選取的元素執行某些操做。
  基礎語法： $(selector).action()
  1.$美圓符號表示jQuery
  2.選擇符（selector）"查詢"和"查找" HTML 元素
  3.action() 執行對元素的操做(好比action能夠是hide)
  $(document).ready(function(){ // 開始寫 jQuery 代碼... });
  咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中,這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼，即在 DOM 加載完成後才能夠對 DOM 進行操做。

  二、jQuery選擇器

  jQuery 選擇器容許您對 HTML 元素組或單個元素進行操做。jQuery 選擇器基於元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此以外，它還有一些自定義的選擇器。

• 元素選擇器
  元素選擇器基於HTML DOM元素進行選取元素，元素種類參考http://www.runoob.com/html/html-elements.html.
  例如,以下代碼選取的就是button元素和P元素：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

• id選擇器
  jQuery #id 選擇器經過 HTML 元素的 id 屬性選取指定的元素。
  頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。
  $("#test").hide();
• class選擇器
  jQuery 類選擇器能夠經過指定的 class 查找元素,。

<p class="test">這是一個段落。</p>
$(".test").hide();

三、jQuery 事件

jQuery 是爲事件處理特別設計的。
什麼是事件：頁面對不一樣訪問者的響應叫作事件。
常見事件有：

• 鼠標事件
  
• 鍵盤事件
  
• 表單事件
  
• 文檔/窗口事件
  以下是一個鼠標點擊事件：
  

$(this).hide();
});

三、jQuery 效果

• 隱藏顯示:
  $("p").hide();
$("p").show();
$("p").toggle();//切換 hide() 和 show()
• 淡入淡出:
  $("#div1").fadeIn();//淡入
$("#div1").fadeOut();//淡出
$("#div1").fadeToggle();淡入淡出切換
$("#div1").fadeTo("slow",0.15); //淡出到必定程度，不徹底消失
  
• 滑動效果:
  $("#panel").slideDown();//滑出
$("#panel").slideUp();//滑入
$("#panel").slideToggle();//劃入劃出切換
  
• 動畫效果:
  

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

中止動畫： $("#panel").stop();
具體用法參考：http://www.runoob.com/jquery/jquery-animate.html

• 回調函數:
  

$("p").hide("slow",function(){
    alert("段落如今被隱藏了");
  });
});

hide中的function就是回調函數，會在段落徹底隱藏以後，彈出alert警告框。

• jQuery - 鏈(Chaining)
  經過 jQuery，能夠把動做/方法連接在一塊兒。
  Chaining 容許咱們在一條語句中運行多個 jQuery 方法（在相同的元素上）。
  例如： $("#p1").css("color","red").slideUp(2000).slideDown(2000);

  三、jQuery HTML

  jQuery 擁有可操做 HTML 元素和屬性的強大方法。

• jQuery獲取內容、值、屬性

  $("#test").text();//獲取文本
$("#test").html();//獲取HTML
$("#test").val();//獲取元素中的值
$("#runoob").attr("href")//獲取元素中的屬性

• jQuery設置內容、值、屬性
  $("#test1").text("Hello world!");//設置文本
$("#test2").html("<b>Hello world!</b>");//設置HTML
$("#test3").val("RUNOOB");//設置元素中的值
$("#runoob").attr("href","http://www.runoob.com/jquery");//設置元素中的屬性
  說明：有須要的話，均可添加回調函數。

• jQuery添加元素
  $("p").append(" <b>追加文本</b>。");//往段落後追加文本
$("p").prepend("<b>在開頭追加文本</b>。 ");//往段落前追加文本
$("body").append(txt1,txt2,txt3);//一次性追加多個文本
$("img").before("<b>以前</b>");//元素以前插入內容（可插入多個內容）
$("img").after("<i>以後</i>");//元素以後插入內容

• jQuery刪除元素
  $("#div1").remove();//jQuery remove() 方法刪除被選元素及其子元素。
$("#div1").empty();//jQuery empty() 方法刪除被選元素的子元素。
$("p").remove(".italic");//移除全部 class="italic" 的 p 元素

• jQuery操做class屬性
  $("h1,h2,p").addClass("blue");//添加class屬性
$("h1,h2,p").removeClass("blue");//刪除class屬性
$("h1,h2,p").toggleClass("blue");//增長/刪除class屬性

• jQuery css()方法
  $("p").css("background-color")；//獲取元素的css屬性background
$("p").css("background-color","yellow");//設置css屬性
$("p").css({"background-color":"yellow","font-size":"200%"});//設置多個css屬性

• jQuery尺寸處理
  $("#div1").width()//元素的寬度性
$("#div1").innerWidth()；//寬度，包含內邊距
$("#div1").outerWidth();//寬度，包含內邊距和邊框

三、jQuery遍歷

什麼是遍歷，遍歷就是根據某一個元素，來查找和它相關的其餘元素。以某項選擇開始，並沿着這個選擇移動，直到抵達你指望的元素爲止。

• 遍歷祖先
  $("span").parent();//選擇直接父元素
$("span").parents("ul");//向上遍歷，選擇全部祖先
$("span").parentsUntil("div");//返回給定元素之間的全部祖先

• 遍歷後代
  $("div").children();//返回每一個 <div> 元素的全部直接子元素
$("div").children("p.1");//類名爲 "1" 的全部 <p> 元素
$("div").find("span");//返回屬於 <div> 後代的全部 <span> 元素
$("div").find("*");//返回 <div> 的全部後代

• 水平遍歷
  $("h2").siblings();//返回 <h2> 的全部同胞元素
$("h2").siblings("p");//返回屬於 <h2> 的同胞元素的全部 <p> 元素
$("h2").next();//返回 <h2> 的下一個同胞元素
$("h2").nextAll();//返回 <h2> 的全部跟隨的同胞元素
$("h2").nextUntil("h6");//返回介於 <h2> 與 <h6> 元素之間的全部同胞元素

• 遍歷過濾
  $("div p").first();//選取首個 <div> 元素內部的第一個 <p> 元素
$("div p").last();選擇最後一個 <div> 元素中的最後一個 <p> 元素
$("p").eq(1);//下面的例子選取第二個 <p> 元素，索引從0開始
$("p").filter(".url");//返回帶有類名 "url" 的全部 <p> 元素
$("h2").nextUntil("h6");//返回介於 <h2> 與 <h6> 元素之間的全部同胞元素
$("p").not(".url");//返回不帶有類名 "url" 的全部 <p> 元素

四、jQuery Ajax

什麼是AJAX, AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 簡短地說，在不重載整個網頁的狀況下，AJAX 經過後臺加載數據，並在網頁上進行顯示。

jQuery與AJAX的關係：經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

• load方法
  語法：
  $(selector).load(URL,data,callback);

  callback參數：

  responseTxt - 包含調用成功時的結果內容
  statusTXT - 包含調用的狀態
  xhr - 包含 XMLHttpRequest 對象

  實例：
  $("#div1").load("demo_test.txt");//把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素
$("#div1").load("demo_test.txt #p1");//把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素

  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
  });

• get方法
  語法：
  $.get(URL,callback);
  實例：
  

$.get("demo_test.php",function(data,status){
    alert("數據: " + data + "\n狀態: " + status);
  });
});

• post方法
  語法：
  $.post(URL,data,callback);
  實例：
  

$.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鳥教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("數據: \n" + data + "\n狀態: " + status);
    });