十、JQuery筆記

JQuery

文檔就緒函數

您也許已經注意到在咱們的實例中的全部 jQuery 函數位於一個 document ready 函數中：

$(document).ready(function(){--- jQuery functions go here ---- });

jQuery 語法

jQuery 語法是爲 HTML 元素的選取編制的，能夠對元素執行某些操做。

基礎語法是：$(selector).action()

· 美圓符號定義 jQuery

· 選擇符（selector）「查詢」和「查找」 HTML 元素

· jQuery 的 action() 執行對元素的操做

如：

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏全部段落

$(".test").hide() - 隱藏全部 class="test" 的全部元素

$("#test").hide() - 隱藏全部 id="test" 的元素

jQuery 選擇器

jQuery 元素選擇器

    jQuery 使用 CSS 選擇器來選取 HTML 元素。

    $("p") 選取 <p> 元素。

    $("p.intro") 選取全部 class="intro" 的 <p> 元素。

    $("p#demo") 選取全部 id="demo" 的 <p> 元素。

 

 

jQuery 屬性選擇器

    jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

    $("[href]") 選取全部帶有 href 屬性的元素。

    $("[href='#']") 選取全部帶有 href 值等於 "#" 的元素。

    $("[href!='#']") 選取全部帶有 href 值不等於 "#" 的元素。

    $("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素。

    jQuery CSS 選擇器

    jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。

    下面的例子把全部 p 元素的背景顏色更改成紅色：

實例

$("p").css("background-color","red");

 

 

更多的選擇器實例

語法	描述
$(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" 的元素

 

 

 

jQuery 事件

下面是 jQuery 中事件方法的一些例子：

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

 

JQuery獲取

得到內容 - text()、html() 以及 val()

三個簡單實用的用於 DOM 操做的 jQuery 方法：

· text() - 設置或返回所選元素的文本內容

· html() - 設置或返回所選元素的內容（包括 HTML 標記）

· val() - 設置或返回表單字段的值

 

獲取屬性 - attr()

    jQuery attr() 方法用於獲取屬性值。

    下面的例子演示如何得到連接中 href 屬性的值：

    實例

    $("button").click(function(){  alert($("#w3s").attr("href"));});

jQuery - 設置內容和屬性

設置內容 - text()、html() 以及 val()

咱們將使用前一章中的三個相同的方法來設置內容：

· text() - 設置或返回所選元素的文本內容

· html() - 設置或返回所選元素的內容（包括 HTML 標記）

· val() - 設置或返回表單字段的值

下面的例子演示如何經過 text()、html() 以及 val() 方法來設置內容：

實例

$("#btn1").click(function(){  $("#test1").text("Hello world!");});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");});

 

設置屬性 - attr()

jQuery attr() 方法也用於設置/改變屬性值。

下面的例子演示如何改變（設置）連接中 href 屬性的值：

實例

$("button").click(function(){  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");});

$("button").click(function(){  $("#w3s").attr({    "href" : "http://www.w3school.com.cn/jquery",    "title" : "W3School jQuery Tutorial"  });});

 

jQuery - 添加元素

添加新的 HTML 內容

咱們將學習用於添加新內容的四個 jQuery 方法：

· append() - 在被選元素的結尾插入內容

· prepend() - 在被選元素的開頭插入內容

· after() - 在被選元素以後插入內容

· before() - 在被選元素以前插入內容

經過 append() 和 prepend() 方法添加若干新元素

function appendText(){var txt1="<p>Text.</p>";               // 以 HTML 建立新元素var txt2=$("<p></p>").text("Text.");   // 以 jQuery 建立新元素var txt3=document.createElement("p");  // 以 DOM 建立新元素txt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3);         // 追加新元素}

經過 after() 和 before() 方法添加若干新元素

function afterText(){var txt1="<b>I </b>";                    // 以 HTML 建立新元素var txt2=$("<i></i>").text("love ");     // 經過 jQuery 建立新元素var txt3=document.createElement("big");  // 經過 DOM 建立新元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);          // 在 img 以後插入新元素}

 

jQuery - 刪除元素

如需刪除元素和內容，通常可以使用如下兩個 jQuery 方法：

· remove() - 刪除被選元素（及其子元素）

· empty() - 從被選元素中刪除子元素

實例

$("#div1").remove();

 

$("#div1").empty();

過濾被刪除的元素

jQuery remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。

該參數能夠是任何 jQuery 選擇器的語法。

下面的例子刪除 class="italic" 的全部 <p> 元素：

實例

$("p").remove(".italic");

 

jQuery - 獲取並設置 CSS 類

jQuery 操做 CSS

jQuery 擁有若干進行 CSS 操做的方法。咱們將學習下面這些：

· addClass() - 向被選元素添加一個或多個類

· removeClass() - 從被選元素刪除一個或多個類

· toggleClass() - 對被選元素進行添加/刪除類的切換操做

· css() - 設置或返回樣式屬性

實例：

$("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");});

$("button").click(function(){  $("#div1").addClass("important blue");});

$("button").click(function(){  $("h1,h2,p").removeClass("blue");});

$("button").click(function(){  $("h1,h2,p").toggleClass("blue");});

jQuery - css() 方法

返回 CSS 屬性

如需返回指定的 CSS 屬性的值，請使用以下語法：

css("propertyname");

例子：

$("p").css("background-color");

設置 CSS 屬性

如需設置指定的 CSS 屬性，請使用以下語法：

css("propertyname","value");

下面的例子將爲全部匹配元素設置 background-color 值：

實例：

$("p").css("background-color","yellow");

設置多個 CSS 屬性

如需設置多個CSS 屬性，請使用以下語法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子將爲全部匹配元素設置 background-color 和 font-size：

實例：

$("p").css({"background-color":"yellow","font-size":"200%"});

 

jQuery 遍歷 - 祖先

向上遍歷 DOM 樹

這些 jQuery 方法頗有用，它們用於向上遍歷 DOM 樹：

· parent()

· parents()

· parentsUntil()

jQuery parent() 方法

parent() 方法返回被選元素的直接父元素。

該方法只會向上一級對 DOM 樹進行遍歷。

下面的例子返回每一個 <span> 元素的的直接父元素：

jQuery parents() 方法

parents() 方法返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>)。

下面的例子返回全部 <span> 元素的全部祖先：

實例：

$(document).ready(function(){  $("span").parents();});

$(document).ready(function(){  $("span").parents();});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素。

下面的例子返回介於 <span> 與 <div> 元素之間的全部祖先元素：

實例：

$(document).ready(function(){  $("span").parentsUntil("div");});

 

 

jQuery 遍歷 - 後代

向下遍歷 DOM 樹

下面是兩個用於向下遍歷 DOM 樹的 jQuery 方法：

· children()

· find()

 

 

jQuery children() 方法

children() 方法返回被選元素的全部直接子元素。

該方法只會向下一級對 DOM 樹進行遍歷。

下面的例子返回每一個 <div> 元素的全部直接子元素：

實例：

$(document).ready(function(){  $("div").children();});

 

 

下面的例子返回類名爲 "1" 的全部 <p> 元素，而且它們是 <div> 的直接子元素：

實例：

$(document).ready(function(){  $("div").children("p.1");});

 

 

jQuery find() 方法

find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

下面的例子返回屬於 <div> 後代的全部 <span> 元素：

實例：

$(document).ready(function(){  $("div").find("span");});

 

 

jQuery 遍歷 - 同胞

 

在DOM 樹中水平遍歷

有許多有用的方法讓咱們在 DOM 樹進行水平遍歷：

· siblings()     siblings() 方法返回被選元素的全部同胞元素

· next()        next() 方法返回被選元素的下一個同胞元素。

· nextAll()     nextAll() 方法返回被選元素的全部跟隨的同胞元素。

· nextUntil()   nextUntil() 方法返回介於兩個給定參數之間的全部跟隨的同胞元素。

· prev()

· prevAll()

· prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工做方式與上面的方法相似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿着同胞元素向後遍歷，而不是向前）。

 

 

 

jQuery 遍歷 - 過濾

jQuery first() 方法

first() 方法返回被選元素的首個元素。下面的例子選取首個 <div> 元素內部的第一個 <p> 元素：

實例：

$(document).ready(function(){  $("div p").first();});

 

jQuery last() 方法

last() 方法返回被選元素的最後一個元素。

實例：

$(document).ready(function(){  $("div p").last();});

 

jQuery eq() 方法

eq() 方法返回被選元素中帶有指定索引號的元素。

索引號從 0 開始，所以首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素（索引號 1）：

實例：

$(document).ready(function(){  $("p").eq(1);});

 

 

 

jQuery filter() 方法

filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

下面的例子返回帶有類名 "intro" 的全部 <p> 元素：

實例：

$(document).ready(function(){  $("p").filter(".intro");});

 

 

jQuery not() 方法

not() 方法返回不匹配標準的全部元素。

提示：not() 方法與 filter() 相反。

下面的例子返回不帶有類名 "intro" 的全部 <p> 元素：

實例：

$(document).ready(function(){  $("p").not(".intro");});

 

 

 

 

 

jQuery - AJAX load() 方法

 

load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

語法：

$(selector).load(URL,data,callback);

 

 

jQuery $.get() 方法

$.get() 方法經過 HTTP GET 請求從服務器上請求數據。

語法：

$.get(URL,callback);

 

實例：

$("button").click(function(){  $.get("demo_test.asp",function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });})

 

 

jQuery $.post() 方法

$.post() 方法經過 HTTP POST 請求從服務器上請求數據。

語法：

$.post(URL,data,callback);

 

 

實例：

$("button").click(function(){  $.post("demo_test_post.asp",  {    name:"Donald Duck",    city:"Duckburg"  },  function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});