《鋒利的jQuery》學習總結（3）-事件和動畫

jQuery中的事件

####DOM的加載

$(document).ready()，至關於js中的window.onload()。不一樣的是後者要等到網頁中全部的元素徹底加載以後才能夠訪問，而前者只須要解析完DOM後就能夠操做，且能夠屢次使用，不會覆蓋以前的加載；

####事件綁定

bind(),如

<div id="panel">
		<h5 class="head"> 什麼是jQuery</h5>
		<div class="content">
			哦你多大呢湊合額看大獎哦打開了，wd令我敬佩免費佛可能無法；惡魔的渴望惟美的沒事啊離開你漂亮的嗎；
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			$("#panel h5.head").bind("mouseup",function(){
				var $content=$(this).next();//優化性能
				if($content.is(":visible")){
					$content.hide()
				}else{
					$content.show();
				}
			});
		});

####事件合成 #####hover（）和toggle（）； ####事件冒泡和事件捕獲：

頁面上多個元素響應同一個事件，前者從低級DOM到高級DOM,後者相反；jQuery不支持事件捕獲；

####中止事件冒泡和組織默認行爲：

event.stopPropagation()和event.preventDefault()；

事件對象的屬性：event.type、event.stopPropagation、event.preventDefault()、event.target（獲取觸發事件的元素）、event.pageX、eventPageY、event.relatedTarget、event.which、event.metaKey.

####移除事件

unbind()和one();後者的處理函數只會執行一次，就會被當即刪除；

####模擬操做

trigger(),triggerHandler()後者只會觸發綁定的特定事件；

---

#jQuery中的動畫

show()/hide()、fadeIn()/fadeOut()、slideUp()/slideOut()、animate()、toggle()、slideToggle()、fadeTo()、fadeToggle()；animate()能夠實現前面全部的動畫，也能夠自定義動畫；

部分代碼展現

<div class="v_show">
		<div class="v_caption">
			<h2 class="cartoon" title="圖片">圖片</h2>
			<div class="hightlight_tip">
				<span class="current">1</span><span>2</span><span>3</span><span>4</span>
			</div>
			<div class="change_btn">
				<span class="prev">上一頁</span>
				<span class="next">下一頁</span>
			</div>
			<em><a href="#">更多</a></em>
		</div>
		<div class="v_content">
			<div class="c_content_list">
				<ul>
					<li><a href="#"><img src="001.png" alt="圖一"></a><h4><a href="#">圖一</a></h4><span>查看</span></li>
					<li><a href="#"><img src="002.png" alt="圖一"></a><h4><a href="#">圖二</a></h4><span>查看</span></li>
					<li><a href="#"><img src="003.png" alt="圖一"></a><h4><a href="#">圖三</a></h4><span>查看</span></li>
					<li><a href="#"><img src="004.png" alt="圖一"></a><h4><a href="#">圖四</a></h4><span>查看</span></li>
					<li><a href="#"><img src="005.png" alt="圖一"></a><h4><a href="#">圖五</a></h4><span>查看</span></li>
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			var page=1;
			var i=4;
			$("span.next").click(function(){
				var $parent=$(this).parents("div.v_show");//根據當前元素獲取父元素
				var $v_show=$parent.find("div.v_content_list");//尋找到內容展現區域
				var $v_content=$parent.find("div.v_content");//尋找到內容展現區域的外圍div
				var v_width=$v_content.width();//尋找到外圍div的寬度
				var len=$v_show.find("li").length;
				var page_count=Math.ceil(len/i);//返回大於參數的最小整數
				if (!$v_show.is(":animated")) {
					if (page==page_count) {
						$v_show.animate({left:"0px"},"slow");
						page=1;
					}else{
						$v_show.animate({left:'-='+v_width},"slow");
						page++;
					}
					$parent.find("span").eq((page-1)).addClass("current")
						.siblings().removeClass("current");
				}
			});
		});
		// 動畫效果的代碼
	</script>