jQuery中的時間和動畫
阿新 • • 發佈：2018-11-25
1、載入DOM：以瀏覽器載入文件為例，在頁面載入完成後，瀏覽器會通過JavaScript為DOM事件新增事件，在jQuery紅使用$(document).ready()方法；
2、執行時機：jQuery中的$(document).ready()方法註冊的事件處理程式在DOM完全就緒時就可以被呼叫；
3、jQuery中的$(document).ready()方法註冊的事件，只要DOM完全就緒時就會被呼叫；
4、避免方法：為onload事件繫結一個處理函式
$(window).load(function() {
//編寫程式碼
}5、多次使用：
function one() { alert("one"); } function two() { alert("two"); } $(document).ready(function() { one(); }) $(document).ready(function() { two(); }
6、簡寫方式：$(doxument)可以簡寫成$()。因為當$()沒有引數時，預設引數就是“document”；
7、事件繫結：在文件載入完成後，如果打算為元素繫結事件來完成某些操作，可以使用bind()方法來對匹配元素來進行特定事件的繫結；
8、bind()有3個引數：（1）事件型別，可以使自定義名稱；（2）可選引數，作為event.data屬性值傳遞給事件物件的額外資料物件；（3）用來繫結的處理函式；
9、基本效果：
HTML程式碼： <div id="panel"> <h5 class="head">什麼是jQuery？</h5> <div class="content"> jQuery是一個優秀的JavaScript庫。 </div> </div> javascript程式碼： $(function() { $("#panel h5.head").bind("click", function() { $(this).next().show(); }) })
10、加強效果：
$(function() {
$("#panel h5.head").bind("click", function() {
var $content = $(this).next();
if($content.is(":visible")) {
$content.hide();
} else {
$content.show();
}
})
})11、改變繫結事件的型別：
$(function() { $("#panel h5.head").bind("mouseover", function() { $(this).next().show(); }).bind("mouseover", function() { $(this).next().hide(); }) })
12、簡寫繫結時間：
$(function() {
$("#panel h5.head").mouseover(function() {
$(this).next().show();
}).mouseover(function() {
$(this).next().hide();
})
})13、合成事件：有兩個，hover()方法和toggle()方法；
14、hover()方法：
$(function() {
$("#panel h5.head").hover(function() {
$(this).next().show();
}.function() {
$(this).next().hide();
})
})15、toogle方法：
$(function() {
$("#panel h5.head").toggle(function() {
$(this).next().show();
}.function() {
$(this).next().hide();
})
});16、再次加強事件：
$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});17、事件冒泡：在頁面上可以有多個事件，也可以多個元素響應通一個事件：
HTML程式碼：
<body>
<div id="content">
外層div元素
<span>內層span元素</span>
外層div元素
</div>
<div id="msg"></div>
</body>
JavaScript程式碼：
$(function() {
$('span').bind("click", function() {
var txt = $('#msg').html() + "<p>內層span元素被單擊.</p>";
$('#msg').html(txt);
})
$('#content').bind("click", function() {
var txt = $('#msg').html() + "<p>外層div元素被單擊.</p>";
$('#msg').html(txt);
})
$("body").bind("click", function() {
var txt = $('#msg').html() + "<p>body元素被單擊</p>.";
$('#msg').html(txt);
});
})18、事件冒泡引發的問題：本來只想觸發最內層元素的click事件，然後這個元素外層的元素也會被觸發；
19、觸發自定義事件：
為元素繫結一個“myClick”事件：
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>我的自定義事件.</p>");
})
想要觸發：
$('#btn').trigger("myClick")20、hide()方法：為一個元素呼叫hide()方法，會將該元素的display樣式改為"none"；
21、當呼叫show()方法時，就會根據hide()方法記住display屬性值來顯示元素；