JQuery中的事件及動畫用法實例_jquery

本文實例講述了JQuery中的事件及動畫用法。分享給大家供大家參考。具體分析如下：

1.bind事件

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> $("#divid h5.head").bind("click", function () {  //bind事件，其中包含三個參數，第一個為事件，第二個為事件<br /> alert($(this).text());<br /> });<br /> $("#divid h5.content").css("display", "none");    //css方法就是可以動態設定標籤樣式<br /> });<br /> $(function () {<br /> $("#btnid").bind("click", function () {<br /> if (bool == true) {<br /> $("#btnid .content").css("display", "none");<br /> bool = false;<br /> $(this).val("顯示");<br /> }<br /> else {<br /> $("#btnid .content").css("display", "");<br /> bool = true;<br /> $(this).val("隱藏");<br /> }<br /> });<br /> });<br /> $(function () {<br /> $("input[type=button]").bind("click", function () {  //內容的顯示與隱藏<br /> var content = $("#divid .content");<br /> if (content.is(":visible")) {<br /> content.hide();<br /> $(this).val("顯示");<br /> }<br /> else {<br /> content.show();<br /> $(this).val("隱藏");<br /> }<br /> });<br /> });<br /> </script>

Rocky?

就讓雨下來 不用帶傘 讓一切完蛋 看被淋濕的心 多久才會曬乾

在上面的操作中我們新學習了bind事件，而bind事件是三個參數，第一個參數是事件的名字，例如：click，dbclick，mouseover等，第二個參數是data，也就是傳遞過來的事件對象，第三個參數是一個方法，即用來處理處理綁定的事件函數這就是我們的一個特殊的事件；另外在這裡還舉例寫了一個動畫中的例子，即文本信息的顯示或者隱藏，在還沒學習show（）和hide（）之前我們一般是按照上面第一種方式來寫的，定義一個bool類型的變數即可，這樣寫起來還是很簡單的，但是在寫顯示隱藏時間處理按鈕上面還蠻蠻煩的，所以在學習了show（）和hide（）後就簡單許多了，就是直接可以隱藏和顯示。可以比較一下，顯然在程式碼的處理上簡單啦。

2.toggle事件與事件冒泡

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> $("input[type=button]").toggle(function () {    //toggle兩個參數都是事件，輪流呼叫<br /> $(this).css("backgroundColor","re​​d");<br /> }, function () {<br /> $(this).css("backgroundColor", "yellow");<br /> });<br /> });<br /> $(function () {<br /> $("div").each(function () {<br /> $(this).bind("mouseup", function (e) {<br /> alert(e.pageX);   //輸出滑鼠的x方向的位置<br /> alert(e.pageY);   //輸出滑鼠的y方向的位置<br /> alert(e.which);   //輸出滑鼠的按鍵的選擇，1為滑鼠左鍵，2為滾軸按鍵，3為滑鼠右鍵<br /> });<br /> });<br /> });<br /> $(function () {<br /> $("#txt").keydown(function () {<br /> e.preventDefault();      //阻止a標籤連結<br /> alert(e.keyCode);           //鍵盤取得其ask碼<br /> });<br /> });<br /> $(function () {<br /> $("#ouuerdiv").click(function () {<br /> alert($(this).text());<br /> });<br /> $("#div").click(function () {<br /> alert($(this).text());<br /> });<br /> $("#innerdiv").click(function () {          //在這裡是寫了一個事件的冒泡現象，組織冒泡可以使用preventDefault或precentDefault<br /> alert($(this).text());<br /> });<br /> })<br /> </script>

外部div

中部div

內部div

百度
<br>

Toggle事件：模擬滑鼠點擊事件，當滑鼠移動到元素上時觸發第一個事件，當滑鼠離開元素時觸發第二個事件。兩個事件之間相互切換觸發；另外還要說下事 件冒泡，事件冒泡其實簡單的理解為：在一個頁面上可以有多個事件，也可以多個元素對應一個事件。像上面一樣假設頁面中存在兩個元素，其中一個div元素嵌套在另一個div元素中並且都綁定了一個click事件，那麼當你點擊內部中div元素時間，外部的div也會顯示，這就是事件冒泡。這裡要注意的是都綁定了一個事件，容易想當然的認為僅僅的內部發生click事件。

3.移除事件和連續增加多個事件

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> $("removeall").click(function () {      <br /> $("#btn").unbind();                //實現移除事件<br /> });<br /> $("#btn").bind("click", function () {          //可連續新增多個事件<br /> $("#text").append("<p>我是第一個新增的事件")<br /> })<br /> .bind("click", function () {<br /> $("#text").append("<p>我是第二個新增的事件")<br /> })<br /> .bind("click", function () {<br /> $("#text").append("<p>我是第三個新增的事件")<br /> })<br /> });<br /> </script>

按我刪除所有的事件

div文字訊息

上面我們學習了bind事件，就是添加一個事件，而unbind就是移除事件，我們可以對比一下，嘿嘿，而針對連續添加多個事件其實就是當你添加玩一個事件後繼續.bind添加事件即可。

4.模擬事件

我們學習的上面的bind事件、click事件等一般都是透過點擊按鈕才能觸發的事件，但是有時間，需要透過模擬使用者操作，來達到點擊的效果，例如：在使用者進入也買年後就觸發click事件，而不需要使用者去點擊，那麼我們就使用trigger（）方法來完成模擬操作。

5.一些其他的事件

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> $("#btn").click(function () {<br /> //$("#div").hide(2000);        //在2秒內隱藏<br /> //$("#div").show(2000);        //在2秒內顯示<br /> //$("#div").fadeIn(2000);      //增強元素的不透明度，直到元素完全顯示<br /> //$("#div").fadeOut(2000);     //降低元素的不透明度，直到元素完全消失<br /> $("#btn").toggle(function () { <br /> $("div").slideDown(2000);     //改變元素的高度，從上到下顯示<br /> $(this).val("顯示")         <br /> }, function () {<br /> $("div").slideUp(2000);       //改變元素的高度，由下至上縮短隱藏<br /> $(this).val("隱藏")<br /> });<br /> });<br /> //$("#btn").click(function () {<br /> //    $("div").fadeTo(600,0.2);       //fadeTo方法適用於0.6s內透明度為0.2<br /> //});<br /> });<br /> </script>

1234

動畫方法

6.多行文字方塊的應用-高度變化

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> var comment = $("#comment");<br /> $(".bigger").click(function () {<br /> if (comment.height() < 500) {<br /> comment.height($("#comment").height() 100);  //在原有高度的基礎上增加100<br /> }<br /> });<br /> $(".smaller").click(function () {  <br /> if (comment.height() > 100) {<br /> comment.height($("#comment").height() - 100);  //在原有高度的基礎上降低100<br /> }<br /> }); <br /> })<br /> </script>

放大縮小

">海海海 div>

上面的操作實現了點擊放大時間，textarea的高度變高即面積變大，當點擊縮小時間textarea的面積變小，即實現了動畫的效果。

7.複選框應用

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> $("#checkall").bind("click", function () {<br /> $(":checkbox").each(function () {<br /> $(this).attr("checked", "checked");         //點選按鈕時間需全部選取<br /> });<br /> });<br /> $("#checkno").bind("click", function () {<br /> $(":checkbox").attr("checked", false);    //點選按鈕時間需全部不選取<br /> });<br /> $("#checkRev").bind("click", function () {<br /> $(":checkbox").each(function () {<br /> if ($(this).attr("checked") == "checked") {<br /> $(this).attr("checked", false);<br /> }<br /> else {<br /> $(this).attr("checked", true);   //點選按鈕時間需要選取的清除，未選取的被選取<br /> }<br /> });<br /> });<br /> //或：<br /> $(this).attr("checked", !$(this).attr("checked"));<br /> });<br /> </script>

你愛好的運動?

足球

籃球

排球

羽球

這裡要注意的是，判斷複選框選中或不選中的狀態，必須透過控制元素的checked屬性來達到目的，如果屬性checked為true，說明被選中，如果為false，則表示未被選中。

8.下拉框的應用

複製程式碼 程式碼如下:

<script><br /> $(function () {<br /> $("#add").click(function () {<br /> var selectoption = $("#select1 option:selected");<br /> selectoption.remove();<br /> selectoption.appendTo('#select2');    //把選取的項目加到右邊的aelect框中<br /> });<br /> $("#addAll").bind("click",function () {<br /> var options = $("#select1 option");<br /> options.appendTo('#select2');<br /> });<br /> });<br /> </script>

選項1 選項2 選項3
選項4 選項5 選項6
選項7 選項8 選項9

往右邊加
全部加到右邊

上面的操作是實現了在左邊點擊選擇的項，然後添加到右邊的框中，可以一個一個的添加，也可以全部一次性添加。

9.表格的應用

複製程式碼 程式碼如下:

<script><br /> $("#table tr:odd").addClass("odd");          //選取以奇數的行數<br /> $("#table tr:even:not(:first)").addClass("even");   //選取索引為偶數的除了索引為0的行數<br /> $("table tr").each(function () {<br /> $(this).click(function () {<br /> $(this).css("backgroundColor","re​​d").siblings().css("backgroundColor","");<br /> });<br /> })<br /> </script>

姓名	性別	暫住地
前​​台設計組
張三	男	浙江寧波
李四	女	浙江杭州
前​​台開發組
王五	男	湖南長沙
趙六	男	湖南長沙
後台開發組
孫七	男	湖南長沙
週八	男	湖南長沙

希望本文所述對大家的jQuery程式設計有所幫助。