html - jquery操作div的顯示

html頁(yè)面，顯示的內(nèi)容太多，會(huì)影響用戶體驗(yàn)，如果有一些，點(diǎn)擊才出現(xiàn)的內(nèi)容，就可以減少內(nèi)容的干擾。使用jquery就可以很快的實(shí)現(xiàn)。

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>div隱藏測(cè)試</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 </script>
</head>
<body>
 <button id="controller">隱藏或者顯示</button>
 <div id="contents" style="display: none;">
 <p>div的內(nèi)容</p>
 </div>
 <script>
 $("#controller").click(function () {
 if ($("#contents").is(":hidden")) {
 $("#contents").show()
 } else {
 $("#contents").hide()
 }
 })
 </script>
</body>
</html>

jqyery操作

$("#contents").is(":hidden") 可以判斷是否是隱藏

$("#contents").show() 表示display:block,

$("#contents").hide() 表示display:none;

操作元素的屬性

$("#contents").attr("style","display:none;"); //隱藏div

$("#contents").attr("style","display:block;"); //顯示div

也可以操作css屬性

$("#contents").css("display","none"); //隱藏div

$("#contents").css("display","block"); //顯示div

也可以直接使用toggle轉(zhuǎn)換開(kāi)關(guān)實(shí)現(xiàn)

$("#contents").toggle()

ndex.html

<html>

<head>

</head>

<body>

//alert(1);

function pop(){

//傳遞參數(shù)到模態(tài)窗口

var obj=new Object();

obj.name="Hello World---來(lái)自父窗口";

var returnStr = window.showModalDialog("model.html",obj,

"dialogHeight=200px;dialogTop=200px;dialogLeft=200px;");

alert("模態(tài)窗口返回參數(shù)"+returnStr);

//刷新頁(yè)面

window.location.reload();

}

</script>

<p>模態(tài)窗口傳參數(shù)，并獲取返回值</p>

</body>

</html>

model.html

<html>

<head>

</head>

<body>

// 接受父窗口的參數(shù)

var obj=window.dialogArguments;

alert(obj.name);

// 返回參數(shù)到父窗口

window.returnValue=’Hello World---來(lái)自模態(tài)窗口’;

</script>

模態(tài)窗口

</body>

</html>

如果直接在瀏覽器中無(wú)法正常運(yùn)行，那么就將其放在服務(wù)器容器中。

人建議：學(xué)習(xí) jQuery 前先掌握基本的 JavaScrpit 語(yǔ)法，特別是對(duì)函數(shù)要掌握，jQuery 基本上是使用函數(shù)。

jQuery 簡(jiǎn)介

jQuery 是一個(gè)輕量級(jí) JavaScript 庫(kù)
jQuery 庫(kù)位于一個(gè) JavaScript 文件中，其中包含了所有的 jQuery 函數(shù)，需要通過(guò) <script>標(biāo)簽引入 jQuery 庫(kù)才能進(jìn)行使用

jQuery 庫(kù)的三種引入來(lái)源

本地引入
共有兩個(gè)版本的 jQuery 可供下載 http://jQuery.com：一份是精簡(jiǎn)過(guò)的，另一份是未壓縮的（供調(diào)試或閱讀）

從 Google 加載 CDN jQuery 核心文件（版本可更換）

src = http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js

從 Microsoft 加載 CDN jQuery 核心文件（版本可更換）
```
src = http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js
```

jQuery語(yǔ)法

基礎(chǔ)語(yǔ)法：$(selector).action()

美元符號(hào)（$）定義 jQuery
選擇符（selector）“ 查詢 ” 和 “ 查找 ” HTML 元素
jQuery 的 action() 執(zhí)行對(duì)元素的操作

文檔就緒函數(shù)

文檔就緒函數(shù)，用于在頁(yè)面加載成功后執(zhí)行的指定代碼
如果在文檔沒(méi)有完全加載之前就運(yùn)行函數(shù)，操作可能失敗
通常該函數(shù)用于替換 window.onload 事件，文檔就緒函數(shù)的執(zhí)行效率更高

$(document).ready(function(){
 code block
});

可以簡(jiǎn)寫(xiě)為:

$(function(){
 code block
});

jQuery 使用 $ 符號(hào)作為 jQuery 的簡(jiǎn)寫(xiě)

jQuery 標(biāo)識(shí)符

使用 jQuery 全名

jQuery(document).ready(function(){
jQuery("button").click(function(){
 code block
});
});

使用 jQuery 簡(jiǎn)寫(xiě)

$(function(){
 $("button").click(function(){
 code block
 });
});

自定義 jQuery 別名

var jq = $.noConflict();
jq(function(){
 jq("button").click(function(){
 code block
 });
});

注：因?yàn)?javascrpit 某些框架中也使用 $ 作為簡(jiǎn)寫(xiě)( 就像 jQuery )，noConflict() 方法是為了解決 javascrpit 框架之間符號(hào)沖突而定義的方法，它會(huì)釋放 $ 標(biāo)識(shí)符的控制，這樣其他腳本也可以使用這個(gè)符號(hào)

jQuery 選擇器

jQuery 元素選擇器和屬性選擇器允許您通過(guò)標(biāo)簽名、屬性名或內(nèi)容對(duì) HTML 元素進(jìn)行選擇

jQuery 元素選擇器

jQuery 使用 CSS 選擇器來(lái)選取 HTML 元素

$(this) 當(dāng)前 HTML 元素
$("p") 選取 <p> 元素
$("p.intro") 選取所有 class="intro" 的 <p> 元素
$("p#demo") 選取所有 id="demo" 的 <p> 元素
$("div#intro .head") 選取 id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 屬性選擇器

jQuery 使用 XPath 表達(dá)式來(lái)選擇帶有給定屬性的元素

$("[href]") 選取所有帶有href 屬性的元素
$("[href='#']") 選取所有帶有 href 值等于"#" 的元素
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素

jQuery CSS 選擇器

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

把所有 p 元素的背景顏色更改為紅色：$("p").css("background-color","red")

jQuery 事件

jQuery 事件處理方法是 jQuery 中的核心函數(shù)
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所調(diào)用的方法。術(shù)語(yǔ)由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會(huì)被使用
例子：按鈕的點(diǎn)擊事件被觸發(fā)時(shí)會(huì)調(diào)用一個(gè)函數(shù)
$("button").click(function() {..some code... } )

常用事件函數(shù)

$(document).ready(function) 將函數(shù)綁定到文檔的就緒事件（當(dāng)文檔完成加載時(shí)）
$(selector).click(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的點(diǎn)擊事件
$(selector).change(function) 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 change 事件
$(selector).dblclick(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的獲得焦點(diǎn)事件
$(selector).mouseover(function) 觸發(fā)或?qū)⒑瘮?shù)綁定到被選元素的鼠標(biāo)懸停事件

jQuery 效果

效果通常綁定在某在事件上，例如通過(guò)點(diǎn)擊按鈕產(chǎn)生隱藏效果

常見(jiàn)的用于效果的函數(shù)

1.隱藏、顯示、切換

- 隱藏 `$(selector).hide(speed,callback)` ： `$("p").hide();`
- 顯示`$(selector).show(speed,callback)` ： `$("p").show(1000);`
- 切換隱藏/顯示`$(selector).toggle(speed,callback)` ： `$("p").toggle();`

speed 和 callback 都是可選參數(shù)

speed 參數(shù)規(guī)定顯示/隱藏的速度，可選值為：”slow”、”fast” 或毫秒值

callback 參數(shù)是顯示/隱藏完成后所執(zhí)行的函數(shù)名稱

2.淡入、淡出

- 淡入 `$(selector).fadeIn(speed,callback)` ： `$("#div1").fadeIn("slow");`
- 淡出 `$(selector).fadeOut(speed,callback)` ： `$("#div3").fadeOut(3000);`
- 切換淡入/淡出 `$(selector).fadeToggle(speed,callback)` ： ` $("#div1").fadeToggle();`
- 漸變?yōu)樘囟ㄍ该鞫?`$(selector).fadeTo(speed,opacity,callback)` ：`$("#div2").fadeTo("slow",0.4);`

speed 和 callback 都是可選參數(shù)，opacity 為必需參數(shù)

speed 參數(shù)規(guī)定淡入/淡出的速度，可選值為：”slow”、”fast” 或毫秒值

callback 參數(shù)是顯示/隱藏完成后所執(zhí)行的函數(shù)名稱

opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間)

3.滑動(dòng)

- 向下滑動(dòng) `$(selector).slideDown(speed,callback)` ： `$("#panel").slideDown();`
- 向上滑動(dòng) `$(selector).slideUp(speed,callback)` : `$("#panel").slideUp();`
- 切換向上滑動(dòng)/向下滑動(dòng) `slideToggle()` : `$("#panel").slideToggle();`

speed 和 callback 都是可選參數(shù)

speed 參數(shù)規(guī)定向上滑動(dòng)/向下滑動(dòng)的速度，可選值為：”slow”、”fast” 或毫秒值

callback 參數(shù)是向上滑動(dòng)/向下滑動(dòng)完成后所執(zhí)行的函數(shù)名稱

4.動(dòng)畫(huà)

- 自定義動(dòng)畫(huà) `$(selector).animate({params},speed,callback)`

params 是必需參數(shù)， speed 和 callback 是可選參數(shù)

params 參數(shù)定義形成動(dòng)畫(huà)的 CSS 屬性

speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)，可選值為：”slow”、”fast” 或毫秒值

callback 參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱

注：默認(rèn)地，所有 HTML 元素都有一個(gè)靜態(tài)位置，且無(wú)法移動(dòng)，如需對(duì)位置進(jìn)行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！

- 停止動(dòng)畫(huà) ·`$(selector).stop(stopAll,goToEnd);`

stopAll 和 goToEnd 都是可選參數(shù)

stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫(huà)隊(duì)列。默認(rèn)是 false，即僅停止活動(dòng)的動(dòng)畫(huà)，允許任何排入隊(duì)列的動(dòng)畫(huà)向后執(zhí)行

goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫(huà)。默認(rèn)是 false。

默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫(huà)

實(shí)例

使用絕對(duì)值

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

使用相對(duì)值

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

使用隊(duì)列功能 ( 逐一進(jìn)行 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");
});

5.方法連接

允許我們?cè)谙嗤脑厣线\(yùn)行多條 jQuery 命令，一條接著另一條，這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個(gè)動(dòng)作，您只需簡(jiǎn)單地把該動(dòng)作追加到之前的動(dòng)作上

例如：把 css(), slideUp() 和 slideDown() 鏈接在一起。”p1” 元素首先會(huì)變?yōu)榧t色，然后向上滑動(dòng)，然后向下滑動(dòng)

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

jQuery 操作 HTML 元素和屬性

對(duì)內(nèi)容操作

1.獲取內(nèi)容

- `$(selector).text();` 設(shè)置或返回所選元素的文本內(nèi)容
- `$(selector).html();` 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- `$(selector).val();` 設(shè)置或返回表單字段的值

2.設(shè)置內(nèi)容

- `$(selector).text(string);` 設(shè)置所選元素的文本內(nèi)容
- `$(selector).val(string);` 設(shè)置所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- `$(selector).html(string);` 設(shè)置表單字段的值

3.回調(diào)函數(shù)

i：被選元素列表中當(dāng)前元素的下標(biāo)

origText：原始（舊的）值

res：以函數(shù)新值返回您希望使用的字符串

- `$(selector).text(function(i,origText){return res;});` 設(shè)置或返回所選元素的文本內(nèi)容
- `$(selector).val(function(i,origText){return res;});` 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- `$(selector).html(function(i,origText){return res;});` 設(shè)置或返回表單字段的值

對(duì)屬性操作

1.獲取屬性

- `$(selector).attr("attribute");` 獲取指定元素的所選屬性

2.設(shè)置屬性

- `$(selector).attr("attribute","value");` 設(shè)置所選屬性的值
- `$(selector).attr({"attribute1":"value1", "attribute2":"value2"});` 同時(shí)設(shè)置多個(gè)屬性的值

3.attr() 的回調(diào)函數(shù)

i ：被選元素列表中當(dāng)前元素的下標(biāo)

origValue : 原始（舊的）值

res ：以函數(shù)新值返回您希望使用的字符串

- `$(selector).attr("attribute",function(i,origValue){return res});`

對(duì)元素/內(nèi)容操作

與前面的對(duì)內(nèi)容操作不同的是：上面的三個(gè)方法會(huì)將原來(lái)的值覆蓋，而這里的方法是在原值基礎(chǔ)上進(jìn)行修改

1.添加

參數(shù)可以是多個(gè)，如果多個(gè)含有 html 的內(nèi)容，則相當(dāng)于增加了多個(gè) html 元素

- `$(selector).append("text");` 在被選元素的結(jié)尾插入內(nèi)容
- `$(selector).prepend("text");` 在被選元素的開(kāi)頭插入內(nèi)容
- `$(selector).prepend("text");` 在被選元素之后插入內(nèi)容
- `$(selector).before("text");` 在被選元素之前插入內(nèi)容

2.刪除

- `$(selector).remove();` 刪除被選元素（及其子元素）
- `$(selector).empty();` 從被選元素中刪除子元素
- `$(selector).remove(selector);` 刪除指定選擇器的元素

對(duì) CSS 元素操作

前三種方法是針對(duì)已經(jīng)寫(xiě)好的樣式

- `$(selector).addClass("className1 className2");` 向被選元素添加一個(gè)或多個(gè)類
- `$(selector).removeClass("className1 className2");` 從被選元素刪除一個(gè)或多個(gè)類
- `$(selector).toggleClass("className");` 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
- `$(selector).css();`返回樣式屬性
- `$(selector).css("attribute","value");`設(shè)置單個(gè)樣式屬性
- `$(selector).css({"propertyname":"value","propertyname":"value",...});`設(shè)置多個(gè)樣式屬性

對(duì)尺寸操作

注意參數(shù)，中間四種沒(méi)有沒(méi)有參數(shù)，不能進(jìn)行設(shè)置

- `$(selector).width("text");` 設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）
- `$(selector).height("text");` 設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）
- `$(selector).innerWidth();`返回元素的寬度（包括內(nèi)邊距）
- `$(selector).innerHeight(");`返回元素的高度（包括內(nèi)邊距）
- `$(selector).outerWidth();`返回元素的寬度（包括內(nèi)邊距和邊框）
- `$(selector).outerHeight();` 返回元素的高度（包括內(nèi)邊距和邊框）
- `$(selector).outerWidth(true);`返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）
- `$(selector).outerHeight(true);` 返回元素的高度（包括內(nèi)邊距、邊框和外邊距）

jQuery 遍歷 DOM

祖先

向上遍歷 DOM 樹(shù)

- `$(selector).parent();` 返回被選元素的直接父元素，該方法只會(huì)向上一級(jí)對(duì) DOM 樹(shù)進(jìn)行遍歷
- `$(selector).parents();` 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
- `$(selector).parents(selector);` 返回經(jīng)過(guò)過(guò)濾的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
- `$(selector).parentsUntil() ;`返回介于兩個(gè)給定元素之間的所有祖先元素

祖先

向下遍歷 DOM 樹(shù)，以查找元素的后代

- `$(selector).children();` 返回被選元素的所有直接子元素，該方法只會(huì)向下一級(jí)對(duì) DOM 樹(shù)進(jìn)行遍歷
- `$(selector).children(selector);` 返回被選元素的經(jīng)過(guò)過(guò)濾的子元素，該方法只會(huì)向下一級(jí)對(duì) DOM 樹(shù)進(jìn)行遍歷
- `$(selector).find("selector");` 返回被選元素的后代元素，一路向下直到最后一個(gè)后代(此方法必須有參數(shù)，如果是全部則為 "*" )

同胞

DOM 樹(shù)中遍歷元素的同胞元素

- `$(selector).siblings(selector);` 返回被選元素的所有同胞元素（selector可選）
- `$(selector).next();` 返回被選元素的下一個(gè)同胞元素
- `$(selector).nextAll();` 返回被選元素的所有跟隨的同胞元素
- `$(selector).nextUntil(selecotr);` 返回介于兩個(gè)給定參數(shù)之間的所有跟隨的同胞元素
- prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過(guò)方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹(shù)中沿著同胞元素向后遍歷，而不是向前）

過(guò)濾

允許您基于其在一組元素中的位置來(lái)選擇一個(gè)特定的元素

- `$(selector).first();` 返回被選元素的首個(gè)元素
- `$(selector).last();` 返回被選元素的最后一個(gè)元素
- `$(selector).eq();` 返回被選元素中帶有指定索引號(hào)的元素（索引號(hào)從 0 開(kāi)始）
- `$(selector).filter(selector);` 不匹配這個(gè)標(biāo)準(zhǔn)的元素會(huì)被從集合中刪除，匹配的元素會(huì)被返回
- `$(selector).not(selector);` not() 方法與 filter() 相反，返回不匹配標(biāo)準(zhǔn)的所有元素

jQuery Ajax

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

簡(jiǎn)短地說(shuō)，在不重載整個(gè)網(wǎng)頁(yè)的情況下，AJAX 通過(guò)后臺(tái)加載數(shù)據(jù)，并在網(wǎng)頁(yè)上進(jìn)行顯示

load 方法

- `$(selector).load(URL,data,callback);`
方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中

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

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

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

callback 回調(diào)函數(shù)

$(selector).load(URL,data,function(responseTxt,statusTxt,xhr){});

responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容

statusTXT - 包含調(diào)用的狀態(tài)

xhr - 包含 XMLHttpRequest 對(duì)象

responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容

statusTXT - 包含調(diào)用的狀態(tài)

xhr - 包含 XMLHttpRequest 對(duì)象

get/post 方法

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

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

- `$.get(URL,callback);`
通過(guò) HTTP GET 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)

GET - 從指定的資源請(qǐng)求數(shù)據(jù)

GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)

- `$.post(URL,data,callback);`
通過(guò) HTTP POST 請(qǐng)求從服務(wù)器上請(qǐng)求數(shù)據(jù)

data 是要提交給服務(wù)器的數(shù)據(jù)，如果數(shù)據(jù)有多個(gè)，使用 json 格式

POST - 向指定的資源提交要處理的數(shù)據(jù)

POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過(guò)，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)

回調(diào)函數(shù)

data : 存有被請(qǐng)求頁(yè)面的內(nèi)容

status : 存有請(qǐng)求的狀態(tài)( success/fail )

function(data,status){
 alert("Data: " + data + "\nStatus: " + status);
 });

注意： ajax 不能訪問(wèn)本地文件，需要解決跨域訪問(wèn)的問(wèn)題

在線咨詢

上一篇：HTML5技術(shù)知識(shí)之超炫酷的HTML5圓圈光標(biāo)動(dòng)畫(huà)特效
下一篇：JavaScript 正則表達(dá)式

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商