jQuery基礎整理

時間  2019-11-11
標籤 jquery 基礎 整理 欄目 JQuery 简体版
原文   原文鏈接

w3c school基礎課程講的很是詳細，基礎知識徹底在這裏學習就能夠了javascript

現將一些知識梳理下。css

1，jQuery基礎

1.1 簡介

jQuery 是一個 JavaScript 函數庫。html

jQuery 庫包含如下特性：java

  • HTML 元素選取jquery

  • HTML 元素操做瀏覽器

  • CSS 操做app

  • HTML 事件函數ide

  • JavaScript 特效和動畫函數

  • HTML DOM 遍歷和修改學習

  • AJAX

  • Utilities

jQuery 庫位於一個 JavaScript 文件中，其中包含了全部的 jQuery 函數。

能夠經過下面的標記把 jQuery 添加到網頁中：

<head><script type="text/javascript" src="jquery.js"></script></head>

請注意，<script> 標籤應該位於頁面的 <head> 部分。

jQuery文件能夠在官網下載，也可使用CDN加載jQuery文件

基礎實例以下：

<html>
<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){$("p").hide();});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

1.2 安裝

jQuery 庫是一個 JavaScript 文件，您可使用 HTML 的 <script> 標籤引用它：

有兩個版本的 jQuery 可供下載：

  • Production version - 用於實際的網站中，已被精簡和壓縮。

  • Development version - 用於測試和開發（未壓縮，是可讀的代碼）

這兩個版本均可以從 jQuery.com 下載。

提示：您能夠把下載文件放到與頁面相同的目錄中，這樣更方便使用。

1.3 語法

基礎語法：

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

  • 美圓符號定義 jQuery

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

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

示例：

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

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

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

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

提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。

語法實例：

  • $(this).hide()

  • 演示 jQuery hide() 函數，隱藏當前的 HTML 元素。

  • $("#test").hide()

  • 演示 jQuery hide() 函數，隱藏 id="test" 的元素。

  • $("p").hide()

  • 演示 jQuery hide() 函數，隱藏全部 <p> 元素。

  • $(".test").hide()

  • 演示 jQuery hide() 函數，隱藏全部 class="test" 的元素

文章就緒函數：

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

$(document).ready(function(){

--- jQuery functions go here ----

});

這是爲了防止文檔在徹底加載（就緒）以前運行 jQuery 代碼。

1.4 選擇器

1.4.1元素選擇器

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

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

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

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

1.4.2 屬性選擇器

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

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

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

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

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

1.4.3 CSS選擇器

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

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

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

1.5 事件

jQuery 事件函數

實例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){  $("button").click(function(){
    $("p").hide();
  });});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

單獨文件中的函數

實例:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 名稱衝突

jQuery 使用 $ 符號做爲 jQuery 的簡介方式。

某些其餘 JavaScript 庫中的函數（好比 Prototype）一樣使用 $ 符號。

jQuery 使用名爲 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict()，幫助您使用本身的名稱（好比 jq）來代替 $ 符號

2，jQuery效果

2.1 隱藏/顯示

  • jQuery hide()

  • 演示一個簡單的 jQuery hide() 方法。

  • jQuery hide()

  • 另外一個 hide() 演示。如何隱藏部分文本。

jQuery hide() 和 show()

經過 jQuery，您可使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

語法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。

下面的例子演示了帶有 speed 參數的 hide() 方法：

實例

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()

經過 jQuery，您可使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

實例:

$("button").click(function(){
  $("p").toggle();
});

語法：

$(selector).toggle(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 toggle() 方法完成後所執行的函數名稱。

2.2 淡入淡出

實例：

2.2.1 jQuery Fading 方法

經過 jQuery，您能夠實現元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：

  • fadeIn()

  • fadeOut()

  • fadeToggle()

  • fadeTo()

2.2.2 jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

語法：

$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeIn() 方法：

實例：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

2.2.3 jQuery fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。

語法：

$(selector).fadeOut(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeOut() 方法：

實例

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

2.2.4 jQuery fadeToggle() 方法

jQuery fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。

若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

語法：

$(selector).fadeToggle(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeToggle() 方法：

實例：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

2.2.5 jQuery fadeTo() 方法

jQuery fadeTo() 方法容許漸變爲給定的不透明度（值介於 0 與 1 之間）。

語法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

下面的例子演示了帶有不一樣參數的 fadeTo() 方法：

實例：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

2.3 滑動

jQuery 滑動方法可以使元素上下滑動

實例：

jQuery 滑動方法

經過 jQuery，您能夠在元素上建立滑動效果。

jQuery 擁有如下滑動方法：

  • slideDown()

  • slideUp()

  • slideToggle()

2.3.1 jQuery slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。

語法：

$(selector).slideDown(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideDown() 方法：

實例

$("#flip").click(function(){
  $("#panel").slideDown();
});

2.3.2 jQuery slideUp() 方法

jQuery slideUp() 方法用於向上滑動元素。

語法：

$(selector).slideUp(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideUp() 方法：

實例

$("#flip").click(function(){
  $("#panel").slideUp();
});

2.3.3 jQuery slideToggle() 方法

jQuery slideToggle() 方法能夠在 slideDown() 與 slideUp() 方法之間進行切換。

若是元素向下滑動，則 slideToggle() 可向上滑動它們。

若是元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成後所執行的函數名稱。

下面的例子演示了 slideToggle() 方法：

實例

$("#flip").click(function(){
  $("#panel").slideToggle();
});

2.4 動畫

jQuery animate() 方法容許您建立自定義的動畫。

2.4.1 jQuery 動畫 - animate() 方法

jQuery animate() 方法用於建立自定義動畫。

語法：

$(selector).animate({params},speed,callback);

必需的 params 參數定義造成動畫的 CSS 屬性。

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

下面的例子演示 animate() 方法的簡單應用；它把 <div> 元素移動到左邊，直到 left 屬性等於 250 像素爲止：

實例

$("button").click(function(){
  $("div").animate({left:'250px'});
});

提示：默認地，全部 HTML 元素都有一個靜態位置，且沒法移動。

如需對位置進行操做，要記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute！

2.4.2 jQuery animate() - 操做多個屬性

請注意，生成動畫的過程當中可同時使用多個屬性：

實例

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

提示：能夠用 animate() 方法來操做全部 CSS 屬性嗎？

是的，幾乎能夠！不過，須要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫全部的屬性名，好比，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同時，色彩動畫並不包含在覈心 jQuery 庫中。

若是須要生成顏色動畫，您須要從 jQuery.com 下載 Color Animations 插件。

2.4.3 jQuery animate() - 使用相對值

也能夠定義相對值（該值相對於元素的當前值）。須要在值的前面加上 += 或 -=：

實例

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

2.4.5 jQuery animate() - 使用預約義的值

您甚至能夠把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"：

實例

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

2.4.6 jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。

這意味着若是您在彼此以後編寫多個 animate() 調用，jQuery 會建立包含這些方法調用的「內部」隊列。而後逐一運行這些 animate 調用。

實例 1

隱藏，若是您但願在彼此以後執行不一樣的動畫，那麼咱們要利用隊列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

實例 2

下面的例子把 <div> 元素移動到右邊，而後增長文本的字號：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

2.5 stop（）

實例

jQuery stop() 方法

jQuery stop() 方法用於中止動畫或效果，在它們完成以前。

stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

語法

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。

所以，默認地，stop() 會清除在被選元素上指定的當前動畫。

下面的例子演示 stop() 方法，不帶參數：

實例

$("#stop").click(function(){
  $("#panel").stop();
});

2.6 Callback

Callback 函數在當前動畫 100% 完成以後執行

jQuery 動畫的問題

許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 做爲可選參數。

例子：$("p").hide("slow")

speed 或 duration 參數能夠設置許多不一樣的值，好比 "slow", "fast", "normal" 或毫秒。

實例

$("button").click(function(){
$("p").hide(1000);
});

jQuery Callback 函數

當動畫 100% 完成後，即調用 Callback 函數。

典型的語法：

$(selector).hide(speed,callback)

callback 參數是一個在 hide 操做完成後被執行的函數。

錯誤（沒有 callback）

$("p").hide(1000);
alert("The paragraph is now hidden");

正確（有 callback）

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

2.7 Chaining

經過 jQuery，您能夠把動做/方法連接起來。

Chaining 容許咱們在一條語句中容許多個 jQuery 方法（在相同的元素上）。

jQuery 方法連接

直到如今，咱們都是一次寫一條 jQuery 語句（一條接着另外一條）。

不過，有一種名爲連接（chaining）的技術，容許咱們在相同的元素上運行多條 jQuery 命令，一條接着另外一條。

提示：這樣的話，瀏覽器就沒必要屢次查找相同的元素。

如需連接一個動做，您只需簡單地把該動做追加到以前的動做上。

例子 1

下面的例子把 css(), slideUp(), and slideDown() 連接在一塊兒。"p1" 元素首先會變爲紅色，而後向上滑動，而後向下滑動：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

若是須要，咱們也能夠添加多個方法調用。

提示：當進行連接時，代碼行會變得不好。不過，jQuery 在語法上不是很嚴格；您能夠按照但願的格式來寫，包含折行和縮進。

例子 2

這樣寫也能夠運行：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

3，jQuery HTML

3.1 jQuery 獲取

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

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

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

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

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

下面的例子演示如何經過 jQuery text() 和 html() 方法來得到內容：

實例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何經過 jQuery val() 方法得到輸入字段的值：

實例

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

獲取屬性 - attr()

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

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

實例

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

3.2 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");
});

text()、html() 以及 val() 的回調函數

上面的三個 jQuery 方法：text()、html() 以及 val()，一樣擁有回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。而後以函數新值返回您但願使用的字符串。

下面的例子演示帶有回調函數的 text() 和 html()：

實例

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

設置屬性 - attr()

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

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

實例

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

attr() 方法也容許您同時設置多個屬性。

下面的例子演示如何同時設置 href 和 title 屬性：

實例

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

attr() 的回調函數

jQuery 方法 attr()，也提供回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。而後以函數新值返回您但願使用的字符串。

下面的例子演示帶有回調函數的 attr() 方法：

實例

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

3.3 jQuery 添加

3.3.1 添加新的 HTML 內容

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

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

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

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

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

 jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容。

實例

$("p").append("Some appended text.");

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容。

實例

$("p").prepend("Some prepended text.");

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

在上面的例子中，咱們只在被選元素的開頭/結尾插入文本/HTML。

不過，append() 和 prepend() 方法可以經過參數接收無限數量的新元素。能夠經過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者經過 JavaScript 代碼和 DOM 元素。

在下面的例子中，咱們建立若干個新元素。這些元素能夠經過 text/HTML、jQuery 或者 JavaScript/DOM 來建立。而後咱們經過 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);         // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素以後插入內容。

jQuery before() 方法在被選元素以前插入內容。

實例

$("img").after("Some text after");

$("img").before("Some text before");

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

after() 和 before() 方法可以經過參數接收無限數量的新元素。能夠經過 text/HTML、jQuery 或者 JavaScript/DOM 來建立新元素。

在下面的例子中，咱們建立若干新元素。這些元素能夠經過 text/HTML、jQuery 或者 JavaScript/DOM 來建立。而後咱們經過 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 以後插入新元素}

3.4 jQuery 刪除

3.4.1 刪除元素/內容

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

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

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

jQuery remove() 方法

jQuery remove() 方法刪除被選元素及其子元素。

實例

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

jQuery empty() 方法

jQuery empty() 方法刪除被選元素的子元素。

實例

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

3.4.2 過濾被刪除的元素

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

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

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

實例

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

3.5 jQuery CSS類

3.5.1 jQuery 操做 CSS

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

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

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

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

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

實例樣式表

下面的樣式表將用於本頁的全部例子：

.important
{
font-weight:bold;
font-size:xx-large;
}

.blue
{
color:blue;
}

jQuery addClass() 方法

下面的例子展現如何向不一樣的元素添加 class 屬性。固然，在添加類時，您也能夠選取多個元素：

實例

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

您也能夠在 addClass() 方法中規定多個類：

實例

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

jQuery removeClass() 方法

下面的例子演示如何不一樣的元素中刪除指定的 class 屬性：

實例

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

jQuery toggleClass() 方法

下面的例子將展現如何使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操做：

實例

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

jQuery css() 方法

咱們將在下一章講解 jQuery css() 方法

3.6 jQuery css()

css() 方法設置或返回被選元素的一個或多個樣式屬性

返回 CSS 屬性

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

css("propertyname");

下面的例子將返回首個匹配元素的 background-color 值：

實例

$("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%"});

3.7 jQuery 尺寸

經過 jQuery，很容易處理元素和瀏覽器窗口的尺寸。

3.7.1 jQuery 尺寸 方法

jQuery 提供多個處理尺寸的重要方法：

  • width()

  • height()

  • innerWidth()

  • innerHeight()

  • outerWidth()

  • outerHeight()

jQuery width() 和 height() 方法

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。

height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。

下面的例子返回指定的 <div> 元素的寬度和高度：

實例

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的寬度（包括內邊距）。

innerHeight() 方法返回元素的高度（包括內邊距）。

下面的例子返回指定的 <div> 元素的 inner-width/height：

實例

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。

outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

下面的例子返回指定的 <div> 元素的 outer-width/height：

實例

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。

outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。

實例

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

jQuery - 更多的 width() 和 height()

下面的例子返回文檔（HTML 文檔）和窗口（瀏覽器視口）的寬度和高度：

實例

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

下面的例子設置指定的 <div> 元素的寬度和高度：

實例

$("button").click(function(){
  $("#div1").width(500).height(500);
});

4，jQuery遍歷

4.1 遍歷

什麼是遍歷？

jQuery 遍歷，意爲「移動」，用於根據其相對於其餘元素的關係來「查找」（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您指望的元素爲止。

下圖展現了一個家族樹。經過 jQuery 遍歷，您可以從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行遍歷。

圖示解釋：

遍歷 DOM 樹

  • <div> 元素是 <ul> 的父元素，同時是其中全部內容的祖先。

  • <ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素

  • 左邊的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同時是 <div> 的後代。

  • <span> 元素是 <li> 的子元素，同時是 <ul> 和 <div> 的後代。

  • 兩個 <li> 元素是同胞（擁有相同的父元素）。

  • 右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div> 的後代。

  • <b> 元素是右邊的 <li> 的子元素，同時是 <ul> 和 <div> 的後代。

提示：祖先是父、祖父、曾祖父等等。後代是子、孫、曾孫等等。同胞擁有相同的父。

遍歷 DOM

jQuery 提供了多種遍歷 DOM 的方法。

遍歷方法中最大的種類是樹遍歷（tree-traversal）。

下一章會講解如何在 DOM 樹中向上、下以及同級移動。

4.2 祖先

祖先是父、祖父或曾祖父等等。

經過 jQuery，您可以向上遍歷 DOM 樹，以查找元素的祖先。

向上遍歷 DOM 樹

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

  • parent()

  • parents()

  • parentsUntil()

jQuery parent() 方法

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

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

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

實例

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

jQuery parents() 方法

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

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

實例

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

您也可使用可選參數來過濾對祖先元素的搜索。

下面的例子返回全部 <span> 元素的全部祖先，而且它是 <ul> 元素：

實例

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

jQuery parentsUntil() 方法

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

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

實例

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

4.3 後代

後代是子、孫、曾孫等等。

經過 jQuery，您可以向下遍歷 DOM 樹，以查找元素的後代。

向下遍歷 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");
});

下面的例子返回 <div> 的全部後代：

實例

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

4.4 同胞

同胞擁有相同的父元素。

經過 jQuery，您可以在 DOM 樹中遍歷元素的同胞元素。

在 DOM 樹中水平遍歷

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

  • siblings()

  • next()

  • nextAll()

  • nextUntil()

  • prev()

  • prevAll()

  • prevUntil()

jQuery siblings() 方法

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

下面的例子返回 <h2> 的全部同胞元素：

實例

$(document).ready(function(){
  $("h2").siblings();
});

您也可使用可選參數來過濾對同胞元素的搜索。

下面的例子返回屬於 <h2> 的同胞元素的全部 <p> 元素：

實例

$(document).ready(function(){
  $("h2").siblings("p");
});

jQuery next() 方法

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

該方法只返回一個元素。

下面的例子返回 <h2> 的下一個同胞元素：

實例

$(document).ready(function(){
  $("h2").next();
});

jQuery nextAll() 方法

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

下面的例子返回 <h2> 的全部跟隨的同胞元素：

實例

$(document).ready(function(){
  $("h2").nextAll();
});

jQuery nextUntil() 方法

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

下面的例子返回介於 <h2> 與 <h6> 元素之間的全部同胞元素：

實例

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() 方法

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

4.5 過濾

縮寫搜索元素的範圍

三個最基本的過濾方法是：first(), last() 和 eq()，它們容許您基於其在一組元素中的位置來選擇一個特定的元素。

其餘過濾方法，好比 filter() 和 not() 容許您選取匹配或不匹配某項指定標準的元素。

jQuery first() 方法

first() 方法返回被選元素的首個元素。

下面的例子選取首個 <div> 元素內部的第一個 <p> 元素：

實例

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

jQuery last() 方法

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

下面的例子選擇最後一個 <div> 元素中的最後一個 <p> 元素：

實例

$(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");
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程