JQuery中的事件以及動畫
一.簡單的點擊事件
上面就是在JQuery中實現的單擊事件，這個與JavaScript中的單擊事件相比，JavaScript使用的是onclick來實現其單擊事件。
二.bind事件
<script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () { //bind事件，其中包含三個參數，第一個為事件，第二個為事件 alert($(this).text()); }); $("#divid h5.content").css("display", "none"); //css方法就是可以動態設置標籤樣式 }); $(function () { $("#btnid").bind("click", function () { if (bool == true) { $("#btnid .content").css("display", "none"); bool = false; $(this).val("顯示"); } else { $("#btnid .content").css("display", ""); bool = true; $(this).val("隱藏"); } }); }); $(function () { $("input[type=button]").bind("click", function () { //內容的顯示與隱藏 var content = $("#divid .content"); if (content.is(":visible")) { content.hide(); $(this).val("顯示"); } else { content.show(); $(this).val("隱藏"); } }); }); </script><body> <div id="divid"> <h5 class="head">Rocky?</h5> <div class="content">就讓雨下下來 不用帶傘 讓一切完蛋 看被淋濕的心 多久才會晒乾</div> </div> <input type="button" name="name" value="顯示 " id="btnid" /></body>
在上面的操作中我們新學習了bind事件，而bind事件是三個參數，第一個參數是事件的名字，例如：click，dbclick，mouseover等，第二個參數是data，即傳遞過來的事件對象，第三個參數是一個方法，即用來處理處 理綁定的事件函數這就是我們的一個特殊的事件；另外在這裡還舉例寫了一個動畫中的例子，即文本信息的顯示或者隱藏，在還沒有學習show（）和 hide（）之前我們一般是按照上面第一種方式來寫的，定義一個bool類型的變數即可，這樣寫起來還是很簡單的，但是在寫顯示隱藏時間處理按鈕上面還是 蠻蠻煩的，所以在學習了show（）和hide（）後就簡單許多了，就是直接可以隱藏和顯示。可以對比一下，顯然在代碼的處理上簡單啦。
三.toggle事件和事件冒泡等
<script> $(function () { $("input[type=button]").toggle(function () { //toggle兩個參數都為事件，輪番調用 $(this).css("backgroundColor","red"); }, function () { $(this).css("backgroundColor", "yellow"); }); }); $(function () { $("div").each(function () { $(this).bind("mouseup", function (e) { alert(e.pageX); //輸出滑鼠的x方向的位置 alert(e.pageY); //輸出滑鼠的y方向的位置 alert(e.which); //輸出滑鼠的按鍵的選擇，1為滑鼠左鍵，2為滾軸按鍵，3為滑鼠右鍵 }); }); }); $(function () { $("#txt").keydown(function () { e.preventDefault(); //阻止a標籤鏈接 alert(e.keyCode); //鍵盤獲取其ask碼 }); }); $(function () { $("#ouuerdiv").click(function () { alert($(this).text()); }); $("#div").click(function () { alert($(this).text()); }); $("#innerdiv").click(function () { //在這裡是寫了一個事件的冒泡現象，組織冒泡可以使用preventDefault或者precentDefault alert($(this).text()); }); }) </script><body> <input type="button" name="btnname" value="按鈕" id="btn"/> <div id="ouuerdiv"> 外部div<div id="div">中部div<div id="innerdiv">內部div</div></div></div> <a href="http://www.baidu.com" id="a">百度</a> <textarea id="txt" rows="5" cols="5"> </textarea></body>
Toggle事件：模擬滑鼠點擊事件，當滑鼠移動到元素上時觸發第一個事件，當滑鼠離開元素時觸發第二個事件。兩個事件之間相互切換觸發；另外還要說下事 件冒泡，事件冒泡其實簡單的理解為：在一個頁面上可以有多個事件，也可以多個元素相應一個事件。像上面一樣假設頁面中存在兩個元素，其中一個div元素嵌 套在另一個div元素中並且都綁定了一個click事件，那麼當你點擊內部中div元素時間，外部的div也會顯示，這就是事件冒泡。在這裡需要注意的是都綁定了一個事件，容易想當然的認為僅僅的內部發生click事件。
四.移除事件和連續添加多個事件
<script> $(function () { $("removeall").click(function () { $("#btn").unbind(); //實現移除事件 }); $("#btn").bind("click", function () { //可以連續添加多個事件 $("#text").append("<p>我是第一個添加的事件</p>") }) .bind("click", function () { $("#text").append("<p>我是第二個添加的事件</p>") }) .bind("click", function () { $("#text").append("<p>我是第三個添加的事件</p>") }) }); </script><body> <button id="btn">單擊我吧</button><button id="removeall">刪除所有的事件</button> <div id="text">div文本信息</div></body>
上面我們學習了bind事件，就是添加一個事件，而unbind就是移除事件，我們可以對比一下，嘿嘿，而針對連續添加多個事件其實就是當你添加玩一個事件後繼續.bind添加事件即可。
五.模擬事件
我們學習的上面的bind事件、click事件等一般都是通過單擊按鈕才能觸發的事件，但是有時間，需要通過模擬用戶操作，來達到單擊的效果，例如：在用戶進入也買年後就觸發click事件，而不需要用戶去單擊，那麼我們就使用trigger（）方法來完成模擬操作。
六.一些其他的事件
<script> $(function () { $("#btn").click(function () { //$("#div").hide(2000); //在2秒內隱藏 //$("#div").show(2000); //在2秒內顯示 //$("#div").fadeIn(2000); //增強元素的不透明度，直至元素完全顯示 //$("#div").fadeOut(2000); //降低元素的不透明度，直至元素完全消失 $("#btn").toggle(function () { $("div").slideDown(2000); //改變元素的高度，由上至下顯示 $(this).val("顯示") }, function () { $("div").slideUp(2000); //改變元素的高度，由下至上縮短隱藏 $(this).val("隱藏") }); }); //$("#btn").click(function () { // $("div").fadeTo(600,0.2); //fadeTo方法適用於在0.6s內透明度是0.2 //}); }); </script><body> <div id="div" style="width:300px; height:300px;" >1234</div> <input type="button" name="name" value="操作動畫" id="btn" /></body>
七.動畫方法
八.多行文本框的應用-高度變化
<script src="script/jquery-1.7.1.min.js"></script> <style> input:focus,textarea:focus { border:1px solid #f00; background-color:#fcc; } </style> <script> $(function () { var comment = $("#comment"); $(".bigger").click(function () { if (comment.height() < 500) { comment.height($("#comment").height() + 100); //在原有高度的基礎上增高100 } }); $(".smaller").click(function () { if (comment.height() > 100) { comment.height($("#comment").height() - 100); //在原有高度的基礎上降低100 } }); }) </script><body> <form action="#" method="post" id="regform"> <div class="msg"><span class="bigger">放大</span><span class="smaller">縮小</span></div> <div style="" data-mce-style="color: #800000;">"><textarea rows="8" cols="20" id="comment">海海海海</textarea></div> </form></body>
上面的操作實現了點擊放大時間，textarea的高度變高即面積變大，當點擊縮小時間textarea的面積變小，即實現了動畫的效果。
九.複選框應用
<script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#checkall").bind("click", function () { $(":checkbox").each(function () { $(this).attr("checked", "checked"); //點擊按鈕時間需要全部選中 }); }); $("#checkno").bind("click", function () { $(":checkbox").attr("checked", false); //點擊按鈕時間需要全部不選中 }); $("#checkRev").bind("click", function () { $(":checkbox").each(function () { if ($(this).attr("checked") == "checked") { $(this).attr("checked", false); } else { $(this).attr("checked", true); //點擊按鈕時間需要選中的清除，未選中的被選中 } }); }); //或者： $(this).attr("checked", !$(this).attr("checked")); }); </script><body> <form>你愛好的運動?<br /> <input type="checkbox" name="names" value="足球 " />足球<br /> <input type="checkbox" name="names" value="籃球 " />籃球<br /> <input type="checkbox" name="names" value="排球 " />排球<br /> <input type="checkbox" name="names" value="羽毛球 " />羽毛球<br /> <input type="button" id="checkall" value="全選 " /><br /> <input type="button" id="checkno" value="全不選 " /><br /> <input type="button" id="checkRev" value="反選 " /><br /> <input type="button" name="send" value="提交" /><br /></form></body>
在這裡需要注意的是，判斷複選框選中或者不選中的狀態，必須通過控制元素的checked屬性來達到目的，如果屬性checked為true，說明被選中，如果為false，則說明未被選中。
十.下拉框的應用
<script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#add").click(function () { var selectoption = $("#select1 option:selected"); selectoption.remove(); selectoption.appendTo("#select2"); //把選中的項添加到右邊的aelect框中 }); $("#addAll").bind("click",function () { var options = $("#select1 option"); options.appendTo("#select2"); }); }); </script><body> <div class="center"> <select multiple="multiple" id="select1" style="width: 100px; height: 160px"> <option value="1">選項1</option><option value="2">選項2</option> <option value="3">選項3</option> <option value="4">選項4</option><option value="5">選項5</option><option value="6">選項6</option> <option value="7">選項7</option><option value="8">選項8</option><option value="9">選項9</option> </select> <div> <span id="add">添加到右邊</span> <span id="addAll">全部添加到右邊</span> </div> </div> <div class="center" style="float:right"> <select multiple="multiple" id="select2" style="width: 100px; height: 160px" > </select> </div>
上面的操作是實現了在在左邊點擊選擇的項，然後添加到右邊的框中，可以一個一個的添加，也可以全部一次性添加。
十一.表格的應用
<script src="script/jquery-1.7.1.min.js"></script> <style> .even { background-color: #fff38f; } .odd { background-color: #ffffee; } </style> <script> $("#table tr:odd").addClass("odd"); //選取索引為奇數的行數 $("#table tr:even:not(:first)").addClass("even"); //選取索引為偶數的除了索引為0的行數 $("table tr").each(function () { $(this).click(function () { $(this).css("backgroundColor","red").siblings().css("backgroundColor",""); }); }) </script><body> <table border="1" id="table"> <thead><tr><th>姓名</th><th>性別</th><th>暫住地</th></tr></thead><tbody> <tr class="parent" id="row1"><td colspan="3">前台設計組</td></tr> <tr class="child1"><td>張三</td><td>男</td><td>浙江寧波</td></tr> <tr class="child1"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr class="parent" id="row2"><td colspan="3">前台開發組</td></tr> <tr class="child2"><td>王五</td><td>男</td><td>湖南長沙</td></tr> <tr class="child2"><td>趙六</td><td>男</td><td>湖南長沙</td></tr> <tr class="parent" id="row3"><td colspan="3">後台開發組</td></tr> <tr class="child3"><td>孫七</td><td>男</td><td>湖南長沙</td></tr> <tr class="child3"><td>周八</td><td>男</td><td>湖南長沙</td> </tr> </tbody> </table></body>
上面主要學習了對表格的簡單操作，嘿嘿，今天就總結到這裡，簡單的學習動畫的操作還是要靈活的掌握，其實這些都是簡單的實例，我們在實際操作中當然不會這樣的簡單的，要加油嘍。
/ ` __ | ` /`/ \_/` -"-/` / | | | (d b) \_/ / ,".|.".\_/.".|.", / /" _|_ "/ | / "-`"`-" | | | | | | / / | / / / `"` : /""` `""`""` 快快樂樂大兔子~?分類: JQuery推薦閱讀：
※第二部動畫電又失敗 王微和追光動畫出了啥問題
※盤點：21世紀最偉大的50部動畫電影，你有看過幾部？
※Windows上MPC播放器安裝升級調整
※母親節最佳應景Flash及感恩音樂動畫
※關於這隻粉紅色的小豬，你不知道的幾件小事
TAG:動畫 |