jQuery(三)事件以及動畫

2021-02-13 小白成長記錄

1.1什麼是事件？

   頁面對不同訪問者的響應叫做事件，事件處理程序指的是當 HTML 中發生某些事件時所調用的方法，在事件中經常使用術語"觸發"（或"激發"）例如："當您按下按鍵時觸發 keypress 事件"。

    

1.2事件的使用

(1)格式： 

     $("div").事件名稱(function(){

       事件觸發後做的事         

      })

(2)常用的事件：

click():  滑鼠點擊時觸發

dblclick():  滑鼠雙擊後觸發

mouseenter()|mouseover():   滑鼠經過觸發,暫時兩個找不出差別

mouseleave():  滑鼠離開觸發

mousedown():  滑鼠按下時觸發

mouseup():  滑鼠鬆開時觸發

hover():  裡面傳入兩個函數，第一個為滑鼠經過觸發的函數,第二個為滑鼠離開觸發的函數

1.3JQuery效果—顯示和隱藏

接下來用例子說明：

   show(speed,[easing],[fn])

   hide(speed,[easing],[fn]) 

顯示和隱藏HTML元素，裡面有三個參數

speed:速度，可選擇'slow'(慢),'normal'(正常『默認』),or'fast'(快),或者用毫秒(如：1000)；

easing:效果，'swing'(快慢快'默認'),可用參數'linear'(勻速);

fn:回調函數:動畫完成後執行的函數，每個元素執行一次

   

  舉個例子：

查看效果：


當我們要做這種效果時，必須要用到show和hide兩種事件，所以我們可以用到toggle()，切換顯示隱藏

查看效果：

另外還有幾種顯示隱藏的效果

1.上滑下滑：

slideDown()   下滑出來顯示

slideUp()    上滑出去消失

slideToggle()  切換滑

2.淡入淡出：

fadeIn()  淡入，淡淡的顯示

fadeOut()  淡出，淡淡的消失

fadeToggle() 淡入淡出切換

fadeTo([speed],opacity,[easing],[fn])   改變透明度 opactity取0-1的值 值越低就越透明  

上面的每個值都可以寫入三個參數(speed,[easing],[fn])，除了fadeTo多了一個透明度參數，其他都是一樣的，在這裡我只演示切換效果


上滑下滑切換效果

淡入淡出效果

1.3JQuery效果—自定義動畫效果

animate(params,[speed],[easing],[fn])

params:想要的樣式屬性，以對象的方式傳入

查看效果：

相關焦點

  • jQuery animate動畫精講
    <head><meta charset="UTF-8"><title>HTML5學堂 - jQuery animate</title><link rel="stylesheet" href="model/css/reset.css"><script src="model/js/jquery
  • JQuery高級
    參數：            1. speed: 動畫的速度。三個預定義的值("slow","normal", "fast")或表示動滑時長的毫秒值(如1000)          2. easing：用來指定切換效果，默認是"swing"，可用參數"linear" * swing: 動滑執行時效果是 先慢， 中間快， 最後又慢 * linear：動畫執行時是勻速的 3. fn
  • jQuery(一)選擇器
    它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。1.2 jQuery的引用：    1.可以通過官網下載jquery.min.js,接著引用
  • jquery mootools - CSDN
    <script type="text/javascript" src="moo1.2.4.js"></script><script type="text/javascript" src="jquery-1.4.js"></script><script type
  • jquery 三級聯動插件專題及常見問題 - CSDN
    下面的三個框，模擬的是下拉樣式，點擊第一個有分類的選項，出現第二個下拉，依次類推，最多是三組。好了，下面我就來設計這樣的jquery插件吧。2、引入jquery，創建方法我在頁面中使用的是外部連結，https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js 然後我們來創建一個js文件，命名為 select.js，並引入到頁面中。
  • Jquery >>> 002
    2、JQuery對象總結：用jquery選擇器得到的對象，就是jquery對象。下面這個代碼是jquery手冊中講解map用法的示例的代碼： 我們發現得到的是一個jquery對象。我們可以使用get()方法進行轉換為DOM對象。
  • 前端之jQuery
    11')let $iEle=$('#d2')$iEle.prop('checked')false$iEle.prop('checked')true//attr所指的屬性時HTML標籤屬性，而prop是指DOM對象屬性注意：對於標籤上有的能夠看到的屬性和自定義屬性用attr()方法　　   對於返回布爾值比如checkbox，radion，option這三個標籤是否被選中
  • JQuery總結:選擇器歸納、DOM遍歷和事件處理、DOM完全操作和動畫
    方法說明.ready(handler)DOM和CSS完全加載後之間handler.on(type,[selector],[data],handler)綁定type事件，並指定事件處理程序handler;如果指定selector則執行事件委託.on(events,[selector],[data])根據events對象的事件綁定多個事件處理程序.off(type,[selector
  • jQuery 選擇器
    不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：實例<head> <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" rel="external nofollow" > </script
  • 每個程式設計師都會的 35 個 jQuery 小技巧
    function(e){           $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);   });  <DIV id=XY></DIV>  }); 11.返回頂部按鈕你可以利用 animate 和 scrollTop 來實現返回頂部的動畫
  • 從0到1~jQuery入門基礎(t286-t305)
    /js/jquery-3.5.1.js"></script> <script> $(function () { $("#wrapper").hover(function () { $(this).find(".select").css("color","blue");
  • jQuery - AJAX post() 方法
    DOCTYPE html><html><head><meta charset="utf-8"><title>菜鳥教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2
  • jquery 簡單使用和發送 ajax 異步請求
    jquery 的簡單使用。需要引入 js 文件。
  • 案例,PHP+jquery實時顯示網站在線人數的方法
    本文實例講述了PHP+jquery實時顯示網站在線人數的方法。分享給大家供大家參考。具體分析如下：要在網頁展示在線人數最簡單的方法就是用 js 調用 php，這樣就可以顯示有多少人訪問了這個網站。如果要在頁面不刷新的情況下實時顯示，就需要 jquery ajax來實現。
  • 第九篇:使用jQuery操作DOM元素
    元素內容的取值與賦值操作元素的取值操作jQurey有三個方法來獲取DOM元素的內容，分別是text()、html()和val()。<head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="script/jquery
  • jQuery中使用text()、html()、val()方法對Html元素賦值和取值
    ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery
  • jQuery動畫相關函數|精選博客
    （註：默認值: "normal"， 三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ）easing (默認: swing)類型: String一個字符串，表示過渡使用哪種緩動函數。complete類型: Function()在動畫完成時執行的函數。
  • 縱火事件過去一年,京都動畫過得怎麼樣了?
    這場無妄之災，燒毀的不只是工作室大樓和重要手稿，對於家庭、行業以及動畫愛好者說都是一段無法忘卻的悲痛記憶。 傷痛和啟示 NHK電視臺播出的紀錄片《你已不在那裡：京都動畫放火事件》中，講述了兩名火災遇難者的家屬們，最近一年的日常生活。
  • 從零做網站開發:基於Flask和JQuery實現表格管理平臺
    -- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo