黄色日本中文字幕,日韩欧美淫穴,欧美日韩一本的免费

1.1 jQuery簡介

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優(yōu)化HTML文檔操作、事件處理、動畫設計和Ajax交互。

jQuery的核心特性可以總結(jié)為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.2 什么是jQuery？

jQuery是一個JavaScript函數(shù)庫。
jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。
jQuery庫包含以下功能：

HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數(shù)
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX
Utilities

1.3 為什么要用jQuery

目前網(wǎng)絡上有大量開源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的擴展。
很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

第二章 jQuery安裝

2.1 網(wǎng)頁中添加 jQuery

可以通過多種方法在網(wǎng)頁中添加 jQuery。您可以使用以下方法：

從 jquery.com 下載 jQuery 庫
從 CDN 中載入 jQuery, 如從 Google 中加載 jQuery
有兩個版本的 jQuery 可供下載：
Production version - 用于實際的網(wǎng)站中，已被精簡和壓縮。
Development version - 用于測試和開發(fā)（未壓縮，是可讀的代碼）
以上兩個版本都可以從 jquery.com 中下載。
jQuery 庫是一個 JavaScript 文件，您可以使用 HTML 的 <script> 標簽引用它：

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

當然你也可以使用其它網(wǎng)站的CDN：

2.2 百度 CDN

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

2.3 新浪 CDN

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

2.4 Google CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

2.5 Microsoft CDN

<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

第三章 jQuery語法

Query 語法是通過選取 HTML 元素，并對選取的元素執(zhí)行某些操作。
基礎語法： $(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執(zhí)行對元素的操作
實例:
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素

3.1 jQuery選擇器

3.1.1 元素選擇器

jQuery 元素選擇器基于元素名選取元素。
在頁面中選取所有 <p> 元素:

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

3.1.2 id選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
通過 id 選取元素語法如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

3.1.3 class選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。
語法如下：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

3.2 jQuery事件

3.2.1 什么是事件？

頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發(fā)生某些事件時所調(diào)用的方法。
實例：

在元素上移動鼠標。
選取單選按鈕
點擊元素
在事件中經(jīng)常使用術語"觸發(fā)"（或"激發(fā)"）例如： "當您按下按鍵時觸發(fā) keypress 事件"。
常見 DOM 事件：
| 鼠標事件 | 鍵盤事件 | 表單事件 | 文檔/窗口事件 |
| ---------- | -------- | ------ | ------- |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | | blur | unload |

3.2.2 jQuery 事件方法語法

在 jQuery 中，大多數(shù) DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點擊事件：

$("p").click();

下一步是定義什么時間觸發(fā)事件。您可以通過一個事件函數(shù)實現(xiàn)：

$("p").click(function(){
    // 動作觸發(fā)后執(zhí)行的代碼!!
});

也就是說，不傳參數(shù)是點擊，傳參數(shù)是設置事件。
常用的 jQuery 事件方法
$(document).ready() 方法允許我們在文檔完全加載完后執(zhí)行函數(shù)。該事件方法在 jQuery 語法章節(jié)中已經(jīng)提到過。
click()
當按鈕點擊事件被觸發(fā)時會調(diào)用一個函數(shù)。
該函數(shù)在用戶點擊 HTML 元素時執(zhí)行。
在下面的實例中，當點擊事件在某個 <p> 元素上觸發(fā)時，隱藏當前的 <p> 元素：

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

dblclick()
當雙擊元素時，會發(fā)生 dblclick 事件。
dblclick() 方法觸發(fā) dblclick 事件，或規(guī)定當發(fā)生 dblclick 事件時運行的函數(shù)：

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()
當鼠標指針穿過元素時，會發(fā)生 mouseenter 事件。
mouseenter() 方法觸發(fā) mouseenter 事件，或規(guī)定當發(fā)生 mouseenter 事件時運行的函數(shù)：

$("#p1").mouseenter(function(){
    alert('您的鼠標移到了 id="p1" 的元素上!');
});

mouseleave()
當鼠標指針離開元素時，會發(fā)生 mouseleave 事件。
mouseleave() 方法觸發(fā) mouseleave 事件，或規(guī)定當發(fā)生 mouseleave 事件時運行的函數(shù)：

$("#p1").mouseleave(function(){
    alert("再見，您的鼠標離開了該段落。");
});

mousedown()
當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發(fā)生 mousedown 事件。
mousedown() 方法觸發(fā) mousedown 事件，或規(guī)定當發(fā)生 mousedown 事件時運行的函數(shù)：

$("#p1").mousedown(function(){
    alert("鼠標在該段落上按下！");
});

mouseup()
當在元素上松開鼠標按鈕時，會發(fā)生 mouseup 事件。
mouseup() 方法觸發(fā) mouseup 事件，或規(guī)定當發(fā)生 mouseup 事件時運行的函數(shù)：

$("#p1").mouseup(function(){
    alert("鼠標在段落上松開。");
});

hover()
hover()方法用于模擬光標懸停事件。
當鼠標移動到元素上時，會觸發(fā)指定的第一個函數(shù)(mouseenter);當鼠標移出這個元素時，會觸發(fā)指定的第二個函數(shù)(mouseleave)。

$("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 現(xiàn)在你離開了 p1!");
    }
);

focus()
當元素獲得焦點時，發(fā)生 focus 事件。
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發(fā) focus 事件，或規(guī)定當發(fā)生 focus 事件時運行的函數(shù)：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()
當元素失去焦點時，發(fā)生 blur 事件。
blur() 方法觸發(fā) blur 事件，或規(guī)定當發(fā)生 blur 事件時運行的函數(shù)：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

第四章 jQuery效果

4.1 隱藏顯示

hide()
您可以使用 hide() 將元素隱藏

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

show()
您可以使用show()將元素顯示

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

toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，并隱藏已顯示的元素：

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

事實上，這三種方法都是有兩個參數(shù)的：

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

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是隱藏或顯示完成后所執(zhí)行的函數(shù)名稱。

4.2 淡入淡出

通過 jQuery，您可以實現(xiàn)元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隱藏的元素。

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

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。.
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeIn() 方法：

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

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

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

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeOut() 方法：

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

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

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

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeToggle() 方法：

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

jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。

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

必需的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。
可選的 callback 參數(shù)是該函數(shù)完成后所執(zhí)行的函數(shù)名稱。
下面的例子演示了帶有不同參數(shù)的 fadeTo() 方法：

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

4.3 滑動

通過 jQuery，您可以在元素上創(chuàng)建滑動效果。
jQuery 擁有以下滑動方法：

slideDown()
slideUp()
slideToggle()

slideDown() 方法

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

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

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。

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

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

slideUp() 方法

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

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

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。

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

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

slideToggle() 方法

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

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

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

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

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。

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

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

4.4 動畫

4.4.1 animate() 方法

jQuery animate() 方法用于創(chuàng)建自定義動畫。

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

必需的 params 參數(shù)定義形成動畫的 CSS 屬性。

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。

下面的例子演示 animate() 方法的簡單應用。它把 <div> 元素往右邊移動了 250 像素：

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

4.4.2 操作多個屬性

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

$("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 下載顏色動畫插件。

4.4.3 使用相對值

也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=：

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

4.4.4 預定義的值

您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：

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

4.4.5 使用隊列功能

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

這意味著如果您在彼此之后編寫多個 animate() 調(diào)用，jQuery 會創(chuàng)建包含這些方法調(diào)用的"內(nèi)部"隊列。然后逐一運行這些 animate 調(diào)用。

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

下面的例子把 <div> 元素往右邊移動了 100 像素，然后增加文本的字號：

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

4.5 停止動畫

jQuery stop() 方法

jQuery stop() 方法用于停止動畫或效果，在它們完成之前。

stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫。

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

可選的 stopAll 參數(shù)規(guī)定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行。

可選的 goToEnd 參數(shù)規(guī)定是否立即完成當前動畫。默認是 false。

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

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

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

4.6 Callback

許多 jQuery 函數(shù)涉及動畫。這些函數(shù)也許會將 speed 或 duration 作為可選參數(shù)。

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

speed 或 duration 參數(shù)可以設置許多不同的值，比如 "slow", "fast", "normal" 或毫秒。

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落現(xiàn)在被隱藏了");
  });
});

以下實例沒有回調(diào)函數(shù)，警告框會在隱藏效果完成前彈出：

$("button").click(function(){
  $("p").hide(1000);
  alert("段落現(xiàn)在被隱藏了");
});

4.7 鏈式編程

直到現(xiàn)在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。

不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。

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

如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上。

下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變?yōu)榧t色，然后向上滑動，再然后向下滑動：

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

如果需要，我們也可以添加多個方法調(diào)用。

提示：當進行鏈接時，代碼行會變得很差。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮進。

如下書寫也可以很好地運行：

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

第五章 jQuery HTML

5.1 捕獲

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

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

獲得內(nèi)容 - text()、html() 以及 val()

三個簡單實用的用于 DOM 操作的 jQuery 方法：

text() - 設置或返回所選元素的文本內(nèi)容
html() - 設置或返回所選元素的內(nèi)容（包括 HTML 標記）
val() - 設置或返回表單字段的值

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內(nèi)容：

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

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

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

獲取屬性-attr()

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

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

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

5.2 設置

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

我們將使用前一章中的三個相同的方法來設置內(nèi)容：

text() - 設置或返回所選元素的文本內(nèi)容
html() - 設置或返回所選元素的內(nèi)容（包括 HTML 標記）
val() - 設置或返回表單字段的值

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

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

text()、html() 以及 val() 的回調(diào)函數(shù)

上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回調(diào)函數(shù)?；卣{(diào)函數(shù)有兩個參數(shù)：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。

下面的例子演示帶有回調(diào)函數(shù)的 text() 和 html()：

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

設置屬性 - attr()

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

下面的例子演示如何改變（設置）文本中 color屬性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

5.3 添加元素

添加新的 HTML 內(nèi)容

我們將學習用于添加新內(nèi)容的四個 jQuery 方法：

append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容

jQuery append() 方法

jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。

$("p").append("追加文本");

jQuery prepend() 方法

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

$("p").prepend("在開頭追加文本");

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

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

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

在下面的例子中，我們創(chuàng)建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 標簽創(chuàng)建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 創(chuàng)建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 創(chuàng)建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內(nèi)容。

jQuery before() 方法在被選元素之前插入內(nèi)容。

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

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

after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素?？梢酝ㄟ^ text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。

在下面的例子中，我們創(chuàng)建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 創(chuàng)建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創(chuàng)建元素
    var txt3=document.createElement("big");  // 使用 DOM 創(chuàng)建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在圖片后添加文本
}

5.4 刪除元素

刪除元素/內(nèi)容

如需刪除元素和內(nèi)容，一般可使用以下兩個 jQuery 方法：

remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

jQuery remove() 方法

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

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

jQuery empty() 方法

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

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

過濾被刪除的元素

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

該參數(shù)可以是任何 jQuery 選擇器的語法。

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

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

5.5 CSS類

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() 方法中規(guī)定多個類：

$("button").click(function(){
  $("body div:first").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");
});

5.6 css()方法

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

5.7 尺寸

jQuery 尺寸方法

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

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

[圖片上傳失敗...(image-e449c-1585661553229)]

jQuery width() 和 height() 方法

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

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

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

$("button").click(function(){
  var txt="";
  txt+="div 的寬度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 和 innerHeight() 方法

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

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

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

$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內(nèi)邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內(nèi)邊距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 和 outerHeight() 方法

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

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

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

$("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內(nèi)邊距和邊框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含內(nèi)邊距和邊框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

第六章 jQuery遍歷

6.1 遍歷

jQuery 遍歷，意為"移動"，用于根據(jù)其相對于其他元素的關系來"查找"（或選?。〩TML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。

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

6.2 祖先

jQuery parent() 方法

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

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

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

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

jQuery parents() 方法

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

下面的例子返回所有 <span> 元素的所有祖先：

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

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

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

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

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。

下面的例子返回介于 <span> 與 <div> 元素之間的所有祖先元素：

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

6.3 后代

jQuery children() 方法

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

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

下面的例子返回每個 <div> 元素的所有直接子元素：

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

您也可以使用可選參數(shù)來過濾對子元素的搜索。

下面的例子返回class名為 "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("*");
});

6.4 同胞

jQuery siblings() 方法

siblings() 方法返回被選元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

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

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

下面的例子返回屬于 <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() 方法返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素。

下面的例子返回介于 <h2> 與 <h6> 元素之間的所有同胞元素：

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

6.5 過濾

jQuery first() 方法

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

下面的例子選取首個 <div> 元素內(nèi)部的第一個 <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() 方法允許您規(guī)定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

下面的例子返回帶有類名 "url" 的所有 <p> 元素：

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

jQuery not() 方法

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

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

下面的例子返回不帶有類名 "url" 的所有 <p> 元素：

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

第七章 jQuery AJAX

7.1 jQuery AJAX簡介

什么是 AJAX？

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個網(wǎng)頁的情況下，AJAX 通過后臺加載數(shù)據(jù)，并在網(wǎng)頁上進行顯示。

使用 AJAX 的應用程序案例：谷歌地圖、騰訊微博、優(yōu)酷視頻、人人網(wǎng)等等。

7.2 load方法

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

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

語法:

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

必需的 URL 參數(shù)規(guī)定您希望加載的 URL。

可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。

可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。

這是示例文件（"demo_test.txt"）的內(nèi)容：

<h2>jQuery AJAX 是個非常棒的功能！</h2><p id="p1">這是段落的一些文本。</p>

下面的例子會把文件 "demo_test.txt" 的內(nèi)容加載到指定的 <div> 元素中：

$("#div1").load("demo_test.txt");

也可以把 jQuery 選擇器添加到 URL 參數(shù)。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容，加載到指定的 <div> 元素中：

$("#div1").load("demo_test.txt #p1");

可選的 callback 參數(shù)規(guī)定當 load() 方法完成后所要允許的回調(diào)函數(shù)?；卣{(diào)函數(shù)可以設置不同的參數(shù)：

responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對象

下面的例子會在 load() 方法完成后顯示一個提示框。如果 load() 方法已成功，則顯示"外部內(nèi)容加載成功！"，而如果失敗，則顯示錯誤消息：

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

7.3 get和post方法

jQuery $.get() 方法

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

語法：

$.get(URL,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL。

可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。

下面的例子使用 $.get() 方法從服務器上的一個文件中取回數(shù)據(jù)：

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status);
  });
});

jQuery $.post() 方法

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

語法:

$.post(URL,data,callback);

必需的 URL 參數(shù)規(guī)定您希望請求的 URL。

可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。

可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。

下面的例子使用 $.post() 連同請求一起發(fā)送數(shù)據(jù)：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.jsp",
    {
        name:"百度",
        url:"http://www.baidu.com"
    },
        function(data,status){
        alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);
    });
});

第八章其他

8.1 jQuery noConflict方法

jQuery 和其他 JavaScript 框架

正如您已經(jīng)了解到的，jQuery 使用 $ 符號作為 jQuery 的簡寫。

如果其他 JavaScript 框架也使用 $ 符號作為簡寫怎么辦？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符號作為簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號，有可能導致腳本停止運行。

jQuery 的團隊考慮到了這個問題，并實現(xiàn)了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

您也可以創(chuàng)建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍后使用。請看這個例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代碼塊使用 $簡寫，并且您不愿意改變這個快捷方式，那么您可以把$ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號了 - 而在函數(shù)外，依舊不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

jQuery與Ajax

1.1 jQuery簡介

1.2 什么是jQuery？

1.3 為什么要用jQuery

第二章 jQuery安裝

2.1 網(wǎng)頁中添加 jQuery

2.2 百度 CDN

2.3 新浪 CDN

2.4 Google CDN

2.5 Microsoft CDN

第三章 jQuery語法

3.1 jQuery選擇器

3.1.1 元素選擇器

3.1.2 id選擇器

3.1.3 class選擇器

3.2 jQuery事件

3.2.1 什么是事件？

3.2.2 jQuery 事件方法語法

第四章 jQuery效果

4.1 隱藏顯示

4.2 淡入淡出

4.3 滑動

4.4 動畫

4.4.1 animate() 方法

4.4.2 操作多個屬性

4.4.3 使用相對值

4.4.4 預定義的值

4.4.5 使用隊列功能

4.5 停止動畫

4.6 Callback

4.7 鏈式編程

第五章 jQuery HTML

5.1 捕獲

5.2 設置

5.3 添加元素

5.4 刪除元素

5.5 CSS類

5.6 css()方法

5.7 尺寸

第六章 jQuery遍歷

6.1 遍歷

6.2 祖先

6.3 后代

6.4 同胞

6.5 過濾

第七章 jQuery AJAX

7.1 jQuery AJAX簡介

7.2 load方法

7.3 get和post方法

第八章 其他

8.1 jQuery noConflict方法

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

3.2.1 什么是事件？

第八章其他