js+jq筆記一
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筆記一