日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery中的事件和动画

發布時間：2025/3/20 编程问答 14 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jquery中的事件和动画 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄

一、jquery中的事件

1.加載DOM

2.事件綁定

3.合成事件

4.事件冒泡

5.事件對象的屬性

6.移除事件

二.jquery中的動畫

1.隱藏和顯示

2.滑動效果

3.淡入淡出效果

三、jquery的遍歷

1.對象方法遍歷

2.全局方法遍歷

3.jQuery3.0新特性for of遍歷

一、jquery中的事件

1.加載DOM

  • 在頁面加載完畢后, 瀏覽器會通過 JavaScript 為 DOM 元素添加事件. 在常規的 JavaScript 代碼中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法

方法window.onload$(document).ready()
執行時機必須等待頁面中的所有內容加載完畢網頁中的DOM結構繪制完畢就執行
編寫個數不能同時編寫多個能同時編寫多個
簡化寫法無$()

2.事件綁定

  • 對匹配的元素進行特定的事件綁定: bind()

<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">//為 .head 添加 Onclick 響應函數: 若 .content 隱藏則顯示, 若 .content 顯示, 則隱藏$(function(){$(".head").bind("click", function(){//使用 is() 方法, 來判斷某個給定的 jQuery 對象是否符合指定的選擇器. var flag = $(".content").is(":hidden");if(flag){//show() 方法: 使隱藏的變為顯示$(".content").show();}else{$(".content").hide();}});})</script>

3.合成事件

方法描述
hover()模擬光標懸停事件
toggle()模擬鼠標連續單擊事件
//合成事件: hover: 鼠標移上去執行第一個函數, 移出執行第二個函數. $(".head").hover(function(){$(".content").show();}, function(){$(".content").hide();}); ?//合成事件: toggle: 第一次點擊執行第一個函數, 第二次點擊執行第二個//函數 ... 循環執行. $(".head").toggle(function(){$(".content").show();}, function(){$(".content").hide();});

4.事件冒泡

  • 事件會按照 DOM 層次結構像水泡一樣不斷向上只止頂端

  • 解決: 在事件處理函數中返回 false, 會對事件停止冒泡. 還可以停止元素的默認行為

<script type="text/javascript" src="jquery-3.3.1.min.js"></script><script type="text/javascript">$(function(){//事件的冒泡: 什么是事件的冒泡$("body").click(function(){alert("body click");});$("#content").click(function(){alert("div click");});$("span").click(function(){alert("span click");//如何解決事件的冒泡: 通過在響應函數的結尾返回 false, 可以阻止冒泡. return false;});})</script> ?<body><div id="content">外層div元素<span>內層span元素</span>外層div元素</div><div id="msg"></div> <br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a> </body>

5.事件對象的屬性

  • 事件對象: 當觸發事件時, 事件對象就被創建了. 在程序中使用事件只需要為函數添加一個參數. 該事件對象只有事件處理函數才能訪問到. 事件處理函數執行完畢后, 事件對象就被銷毀了

  • event.pageX, event.pageY: 獲取到光標相對于頁面的 x, y 坐標

6.移除事件

  • 移除某按鈕上的所有 click 事件: $(“btn”).unbind(“click”)

  • 移除某按鈕上的所有事件: $(“btn”).unbind()

  • one(): 該方法可以為元素綁定處理函數. 當處理函數觸發一次后, 立即被刪除. 即在每個對象上, 事件處理函數只會被執行一次

$("a").one("click",function(){alert("click just once");return false; })

二.jquery中的動畫

1.隱藏和顯示

方法描述
hide([speed,[easing],[fn]])隱藏元素方法
show([speed,[easing],[fn]])顯示元素方法
toggle([speed],[easing],[fn])切換元素方法，顯示的使之隱藏，隱藏的使之顯示
參數名稱解釋
speed三種預定速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)
easing用來指定切換效果，默認是"swing"，可用參數"linear"
fn在動畫完成時執行的函數，每個元素執行一次

  • 以上三個方法在不帶任何參數的情況下, 作用是立即隱藏或顯示匹配的元素, 不會有任何動畫。可以通過制定速度參數使元素動起來

  • 以上三個方法會同時減少(增大)內容的高度, 寬度和不透明度

<script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript">function hideFn(){$("#showDiv").hide("slow","swing");}function showFn(){$("#showDiv").show("normal","swing");}function toggleFn(){$("#showDiv").toggle(5000,"linear");} </script> ? ? <input type="button" value="點擊按鈕隱藏div" onclick="hideFn()"> <input type="button" value="點擊按鈕顯示div" onclick="showFn()"> <input type="button" value="點擊按鈕切換div顯示和隱藏" onclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:red">div顯示和隱藏 </div>

2.滑動效果

方法描述
slideToggle([speed],[easing],[fn])切換元素方法，顯示的使之隱藏，隱藏的使之顯示
slideDown([speed,[easing],[fn]])向下滑動方法
slideUp([speed,[easing],[fn]])向上滑動方法

3.淡入淡出效果

方法描述
fadeIn([speed,[easing],[fn]])淡入顯示方法
fadeOut([speed,[easing],[fn]])淡出隱藏方法
fadeToggle([speed],[easing],[fn])切換元素方法，顯示的使之隱藏，隱藏的使之顯示

三、jquery的遍歷

1.對象方法遍歷

格式：jquery對象.each(function(index,element){}); ?index:就是元素在集合中的索引element：就是集合中的每一個元素對象 ? ?<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重慶</li></ul> ? <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript">$(function(){$("ul li").each(function (index,element) {alert(index+"---"+$(element).text());})}) </script>

2.全局方法遍歷

格式：$.each(jquery對象,function(index,element){}); ?index:就是元素在集合中的索引element：就是集合中的每一個元素對象 ? ?$(function(){var $lis=$("ul li");$.each($lis,function(){alert($(this).text());})})

3.jQuery3.0新特性for of遍歷

格式：for(變量 of jquery對象){變量；} ?變量:定義變量依次接受jquery數組中的每一個元素jquery對象：要被遍歷的jquery對象 ? ?$(function(){var $lis = $("#city li");for(li of $lis){alert($(li).text());}});

?

總結

以上是生活随笔為你收集整理的jquery中的事件和动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。