1. 程式人生 > >js+jq筆記一

js+jq筆記一

AD 一是 可見 函數 頁面包含 媒體 編寫 tex IT

1.toggle() 方法用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流的 click 事件。

該方法也可用於切換被選元素的 hide() 與 show() 方法。

(1)向 Toggle 事件綁定兩個或更多函數

當指定元素被點擊時,在兩個或多個函數之間輪流切換。

如果規定了兩個以上的函數,則 toggle() 方法將切換所有函數。例如,如果存在三個函數,則第一次點擊將調用第一個函數,第二次點擊調用第二個函數,第三次點擊調用第三個函數。第四次點擊再次調用第一個函數,以此類推。

$(selector).toggle(function1(),function2(),functionN(),...)

(2)切換 Hide() 和 Show()

檢查每個元素是否可見。

如果元素已隱藏,則運行 show()。如果元素可見,則元素 hide()。這樣就可以創造切換效果。

$(selector).toggle(speed,callback)

代碼

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".b").click(function(){
$("p").toggle(1000);//speed :可選。規定 hide/show 效果的速度。默認是 "0"。
});              //毫秒(比如 1500),slow,normal,fast

});              
</script>
</head>
<body>
<p>隱藏</p>
<button class="b">點擊</button>
</body>
</html>

(3)顯示或隱藏元素

規定是否只顯示或只隱藏所有匹配的元素。

$(selector).toggle(switch)

代碼

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(true);//switch
});
});
</script>
</head>
<body>
<p>1.</p>
<p style="display:none">2.</p>
<p>把 switch 參數設置為 false,可以隱藏所有段落。</p>
<button class="btn1">顯示所有 p 元素</button>
</body>
</html>

2.document.ready和onload的區別——JavaScript文檔加載完成事件

頁面加載完成有兩種事件
一是ready,表示文檔結構已經加載完成(不包含圖片等非文字媒體文件)
二是onload,指示頁面包含圖片等文件在內的所有元素都加載完成。

$(function(){
});
//其實這個就是jq ready()的簡寫,他等價於:

$(document).ready(function(){
})

//或者 jQuer的默認參數是:“document”;

$().ready(function(){
})

這個就是jq ready()的方法就是Dom Ready,他的作用或者意義就是:在DOM加載完成後就可以可以對DOM進行操作。
一般情況先一個頁面響應加載的順序是:域名解析-加載html-加載js和css-加載圖片等其他信息。
那麽Dom Ready應該在“加載js和css”和“加載圖片等其他信息”之間,就可以操作Dom了。

(1).window.onload方法

(a)執行時機:
在網頁中所有元素(包括元素的所有關聯文件)完全加載到瀏覽器後才執行,即JavaScript 此時可以訪問網頁中的所有元素。
window.onload=function(){ $(window).load(function(){
//編寫代碼 等價於 //編寫代碼
} });

(b)多次使用:
JavaScript的onload事件一次只能保存對一個函數的引用,他會自動用最後面的函數覆蓋前面的函數。
function one(){

alert("one");

}

function two(){

alert("two");

}

window.onload=one;

window.onload=two;

//運行代碼後只有 two

(2).

$(document).ready()方法

(a)執行時機:在DOM完全就緒時就可以被調用。(這並不意味著這些元素關聯的文件都已經下載完畢)
舉個例子:$(document).ready()方法明知要DOM就緒就可以操作了,不需要等待所有圖片下載完畢。

(b)多次使用:
function one(){

alert("one");

}

function two(){

alert("two");

}

$(document).ready(function(){

one();

});

$(document).ready(function(){

two();

});

//運行代碼後

//先是:one

//先是:two

js+jq筆記一