JS+JQUERY

時間 2019-11-12

原文原文鏈接

HTML DOM中的DOM事件類型響應網站，各種響應事件。javascript

http://www.w3school.com.cn/jsref/dom_obj_event.asp //做爲一個代碼開發者，怎麼能夠少的了手冊呢css

在HTML頁面中添加新的元素方法：如需向 HTML DOM 添加新元素，您必須首先建立該元素（元素節點），而後向一個已存在的元素追加該元素。html

代碼以下：java

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">這是一個段落。</p>
 7 <p id="p2">這是另外一個段落。</p>
 8 </div>
 9 
10 <script>
11 var para=document.createElement("p");
12 var node=document.createTextNode("這是新段落。");
13 para.appendChild(node);
14 
15 var element=document.getElementById("div1");
16 element.appendChild(para);
17 </script>
18 
19 </body>
20 </html>

代碼講解：node

例子解釋：jquery

這段代碼建立新的 <p> 元素：web

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必須首先建立文本節點。這段代碼建立了一個文本節點：ajax

var node=document.createTextNode("這是新段落。");

而後您必須向 <p> 元素追加這個文本節點：編程

para.appendChild(node);

最後您必須向一個已有的元素追加這個新元素。api

這段代碼找到一個已有的元素：

var element=document.getElementById("div1");

這段代碼向這個已有的元素追加新元素：

element.appendChild(para);

HTML DOM 教程

在咱們的 JavaScript 教程的 HTML DOM 部分，您已經學到了：

如何改變 HTML 元素的內容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對 HTML DOM 事件做出反應
如何添加或刪除 HTML 元素

實例

循環遍歷對象的屬性：

1 var person={fname:"Bill",lname:"Gates",age:56};
2 
3 for (x in person)
4   {
5   txt=txt + person[x];
6   }

數字屬性和方法

屬性：

MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor

方法：

toExponential()
toFixed()
toPrecision()
toString()
valueOf()

Number 對象

Number 對象是原始數值的包裝對象。

建立 Number 對象的語法：

var myNum=new Number(value);
var myNum=Number(value);

參數

參數 value 是要建立的 Number 對象的數值，或是要轉換成數字的值。

返回值

當 Number() 和運算符 new 一塊兒做爲構造函數使用時，它返回一個新建立的 Number 對象。若是不用 new 運算符，把 Number() 做爲一個函數來調用，它將把本身的參數轉換成一個原始的數值，而且返回這個值（若是轉換失敗，則返回 NaN）。

Number 對象屬性

屬性	描述
constructor	返回對建立此對象的 Number 函數的引用。
MAX_VALUE	可表示的最大的數。
MIN_VALUE	可表示的最小的數。
NaN	非數字值。
NEGATIVE_INFINITY	負無窮大，溢出時返回該值。
POSITIVE_INFINITY	正無窮大，溢出時返回該值。
prototype	使您有能力向對象添加屬性和方法。

Number 對象方法

方法	描述
toString	把數字轉換爲字符串，使用指定的基數。
toLocaleString	把數字轉換爲字符串，使用本地數字格式順序。
toFixed	把數字轉換爲字符串，結果的小數點後有指定位數的數字。
toExponential	把對象的值轉換爲指數計數法。
toPrecision	把數字格式化爲指定的長度。
valueOf	返回一個 Number 對象的基本數字值。



JS中string即字符串類型的對象所具備的對象屬性與方法：
indexOf() 方法如何使用 indexOf() 來定位字符串中某一個指定的字符首次出現的位置。
match() 方法如何使用 match() 來查找字符串中特定的字符，而且若是找到的話，則返回這個字符。
如何替換字符串中的字符 - replace()如何使用 replace() 方法在字符串中用某些字符替換另外一些字符。

Boolean 對象

您能夠將 Boolean 對象理解爲一個產生邏輯值的對象包裝器。

Boolean（邏輯）對象用於將非邏輯值轉換爲邏輯值（true 或者 false）。

建立 Boolean 對象

使用關鍵詞 new 來定義 Boolean 對象。下面的代碼定義了一個名爲 myBoolean 的邏輯對象：

var myBoolean=new Boolean()
註釋：若是邏輯對象無初始值或者其值爲 0、-0、null、""、false、undefined 或者 NaN，那麼對象的值爲 false。不然，其值爲 true（即便當自變量爲字符串 "false" 時）！

Math 對象

Math（算數）對象的做用是：執行普通的算數任務。

Math 對象提供多種算數值類型和函數。無需在使用這個對象以前對它進行定義。

算數值

JavaScript 提供 8 種可被 Math 對象訪問的算數值：

常數
圓周率
2 的平方根
1/2 的平方根
2 的天然對數
10 的天然對數
以 2 爲底的 e 的對數
以 10 爲底的 e 的對數

這是在 Javascript 中使用這些值的方法：（與上面的算數值一一對應）

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
RegExp 對象的方法

RegExp 對象有 3 個方法：test()、exec() 以及 compile()。
test()

test() 方法檢索字符串中的指定值。返回值是 true 或 false。

例子：
```
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 
```
因爲該字符串中存在字母 "e"，以上代碼的輸出將是：
```
true
```
exec()

exec() 方法檢索字符串中的指定值。返回值是被找到的值。若是沒有發現匹配，則返回 null。

例子 1：
```
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free")); 
```
因爲該字符串中存在字母 "e"，以上代碼的輸出將是：
```
e
```
compile()

compile() 方法用於改變 RegExp。

compile() 既能夠改變檢索模式，也能夠添加或刪除第二個參數。

例子：
```
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));
```
因爲字符串中存在 "e"，而沒有 "d"，以上代碼的輸出是：
```
true false
```

Window 對象

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

其餘 Window 方法

一些其餘方法：

window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

window.screen 對象包含有關用戶屏幕的信息。

Window Screen

window.screen 對象在編寫時能夠不使用 window 這個前綴。

一些屬性：

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

Window Screen 可用寬度

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比窗口任務欄。

window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

Window Location

window.location 對象在編寫時可不使用 window 這個前綴。

一些例子：

location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口（80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）
window.history 對象包含瀏覽器的歷史。

Window History

window.history 對象在編寫時可不使用 window 這個前綴。

爲了保護用戶隱私，對 JavaScript 訪問該對象的方法作出了限制。

一些方法：

history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同

警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

語法：

alert("文本")

確認框

確認框用於使用戶能夠驗證或者接受某些信息。

當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。

若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。

語法：

confirm("文本")

提示框

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

語法：

prompt("文本","默認值")

JavaScript 計時事件

經過使用 JavaScript，咱們有能力做到在一個設定的時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setTimeout(): 將來的某時執行代碼
clearTimeout(): 取消setTimeout()

setTimeout()

語法

var t=setTimeout("javascript語句",毫秒)

setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

第二個參數指示從當前起多少毫秒後執行第一個參數。

提示：1000 毫秒等於一秒。

clearTimeout()

語法

clearTimeout(setTimeout_variable)

JavaScript 框架（庫）

JavaScript 高級程序設計（特別是對瀏覽器差別的複雜處理），一般很困難也很耗時。

爲了應對這些調整，許多的 JavaScript (helper) 庫應運而生。

這些 JavaScript 庫常被稱爲 JavaScript 框架。

在本教程中，咱們將瞭解到一些廣受歡迎的 JavaScript 框架：

jQuery
Prototype
MooTools

全部這些框架都提供針對常見 JavaScript 任務的函數，包括動畫、DOM 操做以及 Ajax 處理。

在本教程中，您將學習到如何開始使用它們，來使得 JavaScript 編程更容易、更安全且更有樂趣。

jQuery

jQuery 是目前最受歡迎的 JavaScript 框架。

它使用 CSS 選擇器來訪問和操做網頁上的 HTML 元素（DOM 對象）。

jQuery 同時提供 companion UI（用戶界面）和插件。

許多大公司在網站上使用 jQuery：

Google
Microsoft
IBM
Netflix

引用 jQuery:

1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
2 </script>

Prototype

Prototype 是一種庫，提供用於執行常見 web 任務的簡單 API。

API 是應用程序編程接口（Application Programming Interface）的縮寫。它是包含屬性和方法的庫，用於操做 HTML DOM。

Prototype 經過提供類和繼承，實現了對 JavaScript 的加強。

MooTools

MooTools 也是一個框架，提供了可以使常見的 JavaScript 編程更爲簡單的 API。

MooTools 也含有一些輕量級的效果和動畫函數。

W3school 提供完整的 jQuery 參考手冊以及大量的在線實例。

jQuery 參考手冊

在 W3School，您將找到包含全部 jQuery 對象和函數的完整參考手冊：

連接：http://www.w3school.com.cn/jquery/jquery_reference.asp

jQuery 語法

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

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

美圓符號定義 jQuery
選擇符（selector）「查詢」和「查找」 HTML 元素
jQuery 的 action() 執行對元素的操做

示例

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

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

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

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

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

文檔就緒函數

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

$(document).ready(function(){

--- jQuery functions go here ----

});

語法	描述
$(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 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件「觸發」（或「激發」）常常會被使用。

一般會把 jQuery 代碼放到 <head>部分的事件處理方法中：

語法：

$("button").click(function() {..some code... } )

經過事件觸發函數爲核心的JQUERY來進行的動態網頁。
語法簡介：點擊那個按鈕或時間函數，會在哪個標籤或元素處發生什麼動畫或動做。

jQuery 名稱衝突

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

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

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

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

結論

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

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

Query 事件

下面是 jQuery 中事件經常使用方法的一些例子：

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

JQUERY中好玩的動畫演示及動態網頁講解

一：顯示與隱藏

jQuery hide() 和 show()

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

（1）：Jquery中的關於標籤的顯示與隱藏代碼以下：

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

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

2）語法：

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

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

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

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

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

3）jQuery toggle()

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

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

語法：

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $(".ex .hide").click(function(){
 8     $(this).parents(".ex").hide("slow");
 9   });
10 });
11 </script>
12 <style type="text/css"> 
13 div.ex
14 {
15 background-color:#e5eecc;
16 padding:7px;
17 border:solid 1px #c3c3c3;
18 }
19 </style>
20 </head>
21  
22 <body>
23 
24 <h3>中國辦事處</h3>
25 <div class="ex">
26 <button class="hide" type="button">隱藏</button>
27 <p>聯繫人：張先生<br /> 
28 北三環中路 100 號<br />
29 北京</p>
30 </div>
31 
32 <h3>美國辦事處</h3>
33 <div class="ex">
34 <button class="hide" type="button">隱藏</button>
35 <p>聯繫人：David<br /> 
36 第五大街 200 號<br />
37 紐約</p>
38 </div>
39 
40 </body>
41 </html>

$(所要觸發的按鈕或其餘觸發函數介質).click(function(){

$("所須要隱藏的HTML元素").hide();

});

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"">
 5 <script type="text/javascript">
 6 $(docment).reday(function(){
 7 $("#hide").click(function(){
 8 $("p").hide();
 9 });
10 
11 $("#show").click(function(){
12 $("p1").show();
13 });
14 });
15 </script>
16 </head>
17 <body>
18 <p  id="p1">若是點擊隱藏按鈕，我就會消失</p>
19 <button id="#hide" type="button">隱藏</button>
20 <button id="#show" type="button">顯示</button>
21 </body>
22 </html>

例二：

隱藏顯示中的稍微加深讓隱藏時帶有時間代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8   $("p").hide(1000);
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 <button type="button">隱藏</button>
15 <p>這是一個段落。</p>
16 <p>這是另外一個段落。</p>
17 </body>
18 </html>

jQuery 效果 - 淡入淡出

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

jQuery Fading 方法

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

jQuery 擁有下面四種 fade 方法：

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

1）jQuery fadeIn() 方法

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

語法：

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

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

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

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

舉例代碼以下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js" ></script>
<script type="test/javascripr">
$(docment).ready(function(){
 $("button").click(function(){
    $("div1").fadein();
    $("div2").fadein(slow);
    $("div3").fadein(3000);
});
});
</script>
</head>
<body>
<p>演示三種不一樣參數的fadein函數</p>
<br><br>
<div id="div1" 
style="width:80px;height:80px;display:none;background-
color:red;"></div>
<br>
<div id="div2"
style="width:80px;height:80px;display:none;background-
color:green;"></div><br>
<div id="div3"
style="width:80px;height:80px;display:none;background-
color:blue;"></div><br>
</body>
</html>

2）jQuery fadeOut() 方法

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

語法：

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

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

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

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

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeOut();
 9     $("#div2").fadeOut("slow");
10     $("#div3").fadeOut(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 <p>演示帶有不一樣參數的 fadeOut() 方法。</p>
18 <button>點擊這裏，使三個矩形淡出</button>
19 <br><br>
20 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
21 <br>
22 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
23 <br>
24 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
25 </body>
26 
27 </html>

3）jQuery fadeToggle() 方法

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

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

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

語法：

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

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

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

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

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeToggle();
 9     $("#div2").fadeToggle("slow");
10     $("#div3").fadeToggle(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 
18 <p>演示帶有不一樣參數的 fadeToggle() 方法。</p>
19 <button>點擊這裏，使三個矩形淡入淡出</button>
20 <br><br>
21 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
22 <br>
23 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
24 <br>
25 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
26 </body>
27 
28 </body>
29 </html>

4）jQuery fadeTo() 方法

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

語法：

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

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

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

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

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

代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeToggle();
 9     $("#div2").fadeToggle("slow");
10     $("#div3").fadeToggle(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 
18 <p>演示帶有不一樣參數的 fadeToggle() 方法。</p>
19 <button>點擊這裏，使三個矩形淡入淡出</button>
20 <br><br>
21 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
22 <br>
23 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
24 <br>
25 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
26 </body>
27 
28 </body>
29 </html>

jQuery 效果 - 滑動

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

jQuery 滑動方法

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

jQuery 擁有如下滑動方法：

slideDown()
slideUp()
slideToggle()

1）jQuery slideDown() 方法

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

語法：

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

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

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

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

代碼以下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p>
</div>
 
<p class="flip">請點擊這裏</p>
 
</body>
</html>

2）jQuery slideUp() 方法

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

語法：

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

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

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

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

3）jQuery slideToggle() 方法

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

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

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

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

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(docment).ready(function(){
 7   $(".flip").click(function(){
 8   $(".penal").slideToggle("slow");
 9 });
10 });
11 </script>
12 </head>
13 <style type="text/css"> 
14 div.panel,p.flip
15 {
16 margin:0px;
17 padding:5px;
18 text-align:center;
19 background:#e5eecc;
20 border:solid 1px #c3c3c3;
21 }
22 div.panel
23 {
24 height:120px;
25 display:none;
26 }
27 </style>
28 </head>
29  
30 <body>
31  
32 <div class="panel">
33 <p>W3School - 領先的 Web 技術教程站點</p>
34 <p>在 W3School，你能夠找到你所須要的全部網站建設教程。</p>
35 </div>
36 <p class="flip">請點擊這裏</p>
37 </html>

jQuery 效果 - 動畫

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

jQuery 動畫 - animate() 方法

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

語法：

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

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

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

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

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

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

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

jQuery animate() - 操做多個屬性(深度)

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

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

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

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

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

案例代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script> 
 7 $(document).ready(function(){
 8   $("button").click(function(){
 9     $("div").animate({
10       left:'250px',
11       opacity:'0.5',
12       height:'150px',
13       width:'150px'
14     });
15   });
16 });
17 </script> 
18 </head>
19  
20 <body>
21 
22 <button>開始動畫</button>
23 <p>默認狀況下，全部 HTML 元素的位置都是靜態的，而且沒法移動。如需對位置進行操做，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。</p>
24 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
25 </div>
26 
27 </body>
28 </html>

jQuery animate() - 使用相對值

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

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

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

jQuery animate() - 使用隊列功能

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

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

使用隊列功能的代碼以下：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"></script>
$(docment).ready(function(){
    $("button").click(function(){
   var div=$("div");
         div.animate({left:'250px'},"slow");
         div.animate({fontSize:'3em'},"slow");
});
});
</head>
<body>
<button>開始動畫</button>
<p>默認狀況下，全部 HTML 元素的位置都是靜態的，而且沒法移動。如需對位置進行操做，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。<p/>
<div style="background:red;width:100px;
height:100px;position:absolute"></div>
</body>
</html>

jQuery 中止動畫

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

jQuery stop() 方法

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

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

語法

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

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

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

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

代碼案例以下：

 1 <DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(docment).ready(function(){
 7     $("#start").click(function(){
 8       $("div").animate ({left:'250px'},5000);
 9       $("div").animate({fontSize:'3em'},5000);
10 });
11     $("#stop").click(function(){
12       $("div").stop(); 
13 });
14     $("#stop2").click(function(){
15       $("div").stop(true);
16 });
17     $("#stop3").click(funcution(){
18       $("div").stop(true,true);
19 });
20 });
21 </script>
22 </head>
23 <body>
24 <button id="start" type=button>開始</button>
25 <button id="stop" type=button>中止</button>
26 <button id="stop2" type=button>中止全部</button>
27 <button id="stop3" type=button>中止但要完成</button>
28 <p>"開始" 按鈕會啓動動畫。<p/>
29 <p>"中止" 按鈕會中止當前活動的動畫，但容許已排隊的動畫向前執行。<p/>
30 <p>"中止全部" 按鈕中止當前活動的動畫，並清空動畫隊列；所以元素上的全部動畫都會中止。<p/>
31 <p>"中止但要完成" 會當即完成當前活動的動畫，而後停下來。<p/>
32 <div style="background:red;width:150px;
33 height:150px;position:absolute">HELLO</div>
34 </body>
35 
36 </html>

jQuery Callback 函數

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

jQuery 動畫的問題

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

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

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

因爲 JavaScript 語句（指令）是逐一執行的 - 按照次序，動畫以後的語句可能會產生錯誤或頁面衝突，由於動畫尚未完成。

爲了不這個狀況，您能夠以參數的形式添加 Callback 函數。

jQuery Callback 函數

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

典型的語法：

$(selector).hide(speed,callback)

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

結論：若是您但願在一個涉及動畫的函數以後來執行語句，請使用 callback 函數。
示例代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery.1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(docment).ready(function(){
 7    $("button").click(function(){
 8       $("p").hide(1000,function(){
 9   alert("這條信息已經隱藏")；
10   });
11  });
12 }):
13 </script>
14 </head>
15 <body>
16 <button type=button>Hide</button>
17 <p>這是一個段落！！</p>
18 </body>
19 </html>

jQuery - Chaining

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

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

jQuery 方法連接

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

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

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

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

示例代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(docment).ready(function(){
 7    $("button").click(function(){
 8       $("p1").css("color","red").sildup(2000).sildDown(2000);
 9  });
10 });
11 </script>
12 </head>
13 <body>
14 <p id="p1">jQuery 樂趣十足！</p>
15 <button>點擊這裏</button>
16 </body>
17 </html>

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").width(320).height(320);
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 
15 <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
16 <br>
17 <button>調整 div 的尺寸</button>
18 
19 </body>
20 </html>

jQuery 遍歷

什麼是遍歷？

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

下圖展現了一個家族樹。經過 jQuery 遍歷，您可以從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 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 樹中向上、下以及同級移動。

如需瞭解全部的 jQuery 遍歷方法，請訪問咱們的：http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

jQuery 遍歷 - 過濾

縮寫搜索元素的範圍

三個最基本的過濾方法是：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");
});

關於 jQuery 與 AJAX

jQuery 提供多個與 AJAX 有關的方法。

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

提示：若是沒有 jQuery，AJAX 編程仍是有些難度的。

編寫常規的 AJAX 代碼並不容易，由於不一樣的瀏覽器對 AJAX 的實現並不相同。這意味着您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊爲咱們解決了這個難題，咱們只須要一行簡單的代碼，就能夠實現 AJAX 功能。

一個簡單的Ajax案例代碼以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("#btn1").click(function(){
 9     $('#test').load('/example/jquery/demo_test.txt');
10   })
11 })
12 </script>
13 </head>
14 
15 <body>
16 
17 <h3 id="test">請點擊下面的按鈕，經過 jQuery AJAX 改變這段文本。</h3>
18 <button id="btn1" type="button">得到外部的內容</button>
19 
20 </body>
21 </html>

jQuery - AJAX load() 方法

jQuery load() 方法

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

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

語法：

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

必需的 URL 參數規定您但願加載的 URL。

也能夠把 jQuery 選擇器添加到 URL 參數。

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

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。

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

可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：

callback函數中的不一樣參數的含義：

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

下面的例子會在 load() 方法完成後顯示一個提示框。若是 load() 方法已成功，則顯示「外部內容加載成功！」，而若是失敗，則顯示錯誤消息：

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用於經過 HTTP GET 或 POST 請求從服務器請求數據。

HTTP 請求：GET vs. POST

兩種在客戶端和服務器端進行請求-響應的經常使用方法是：GET 和 POST。

GET - 從指定的資源請求數據
POST - 向指定的資源提交要處理的數據

GET 基本上用於從服務器得到（取回）數據。註釋：GET 方法可能返回緩存數據。

POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，而且經常使用於連同請求一塊兒發送數據。

如需學習更多有關 GET 和 POST 以及兩方法差別的知識，請閱讀咱們的 HTTP 方法 - GET 對比 POST。

jQuery $.get() 方法

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

語法：

$.get(URL,callback);

必需的 URL 參數規定您但願請求的 URL。

可選的 callback 參數是請求成功後所執行的函數名。

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

實例

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

$.get() 的第一個參數是咱們但願請求的 URL（"demo_test.asp"）。

第二個參數是回調函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。

提示：這個 ASP 文件 ("demo_test.asp") 相似這樣：

<%
response.write("This is some text from an external ASP file.")
%>

jQuery $.post() 方法

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

語法：

$.post(URL,data,callback);

必需的 URL 參數規定您但願請求的 URL。

可選的 data 參數規定連同請求發送的數據。

可選的 callback 參數是請求成功後所執行的函數名。

下面的例子使用 $.post() 連同請求一塊兒發送數據：

$.post() 的第一個參數是咱們但願請求的 URL ("demo_test_post.asp")。

而後咱們連同請求（name 和 city）一塊兒發送數據。

"demo_test_post.asp" 中的 ASP 腳本讀取這些參數，對它們進行處理，而後返回結果。

第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。

提示：這個 ASP 文件 ("demo_test_post.asp") 相似這樣：

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

jQuery - noConflict() 方法

如何在頁面上同時使用 jQuery 和其餘框架？

jQuery 和其餘 JavaScript 框架

正如您已經瞭解到的，jQuery 使用 $ 符號做爲 jQuery 的簡寫。

若是其餘 JavaScript 框架也使用 $ 符號做爲簡寫怎麼辦？

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

其中某些框架也使用 $ 符號做爲簡寫（就像 jQuery），若是您在用的兩種不一樣的框架正在使用相同的簡寫符號，有可能致使腳本中止運行。

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

jQuery noConflict() 方法

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

jQuery - noConflict() 方法

如何在頁面上同時使用 jQuery 和其餘框架？

jQuery 和其餘 JavaScript 框架

正如您已經瞭解到的，jQuery 使用 $ 符號做爲 jQuery 的簡寫。

若是其餘 JavaScript 框架也使用 $ 符號做爲簡寫怎麼辦？

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

其中某些框架也使用 $ 符號做爲簡寫（就像 jQuery），若是您在用的兩種不一樣的框架正在使用相同的簡寫符號，有可能致使腳本中止運行。

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

jQuery noConflict() 方法

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

相關標籤/搜索

JQuery

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JS+JQUERY

HTML DOM 教程

實例

數字屬性和方法

屬性：

方法：

Number 對象

建立 Number 對象的語法：

參數

返回值

Number 對象屬性

Number 對象方法

Boolean 對象

建立 Boolean 對象

Math 對象

算數值

RegExp 對象的方法

test()

例子：

exec()

例子 1：

compile()

例子：

Window 對象

其餘 Window 方法

Window Screen

Window Screen 可用寬度

Window Location

Window History

警告框

語法：

確認框

語法：

提示框

語法：

JavaScript 計時事件

setTimeout()

語法

clearTimeout()

語法

JavaScript 框架（庫）

jQuery

引用 jQuery:

Prototype

MooTools

jQuery 參考手冊

jQuery 語法

示例

文檔就緒函數

更多的JQUERY選擇器實例

jQuery 事件函數

jQuery 名稱衝突

結論

Query 事件

jQuery hide() 和 show()

3）jQuery toggle()

語法：

jQuery 效果 - 淡入淡出

jQuery Fading 方法

1）jQuery fadeIn() 方法

語法：

2）jQuery fadeOut() 方法

語法：

3）jQuery fadeToggle() 方法

語法：

4）jQuery fadeTo() 方法

語法：

jQuery 效果 - 滑動

jQuery 滑動方法

1）jQuery slideDown() 方法

語法：

2）jQuery slideUp() 方法

語法：

3）jQuery slideToggle() 方法

jQuery 效果 - 動畫

jQuery 動畫 - animate() 方法

語法：

jQuery animate() - 操做多個屬性(深度)

jQuery animate() - 使用相對值

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