jQuery裡面的常用的事件和基礎動畫的實現

来源:https://www.cnblogs.com/remain/archive/2018/08/21/9512349.html
-Advertisement-
Play Games

一:瞭解jquery裡面常用的事件 二:瞭解基礎動畫的實現 1:載入DOM 在JavaScript中使用window.onload事件作為窗體載入事件(它在頁面所有數據載入完成之後才會執行) 在jQuery裡面中使用 $(document).ready(function()) 作為窗體載入事件(在D ...


 

一:瞭解jquery裡面常用的事件


二:瞭解基礎動畫的實現


1:載入DOM

在JavaScript中使用window.onload事件作為窗體載入事件(它在頁面所有數據載入完成之後才會執行)

在jQuery裡面中使用 $(document).ready(function()) 作為窗體載入事件(在DOM載入完成之後就會執行)


2:事件綁定

在文檔載入完成後,可以使用bind()方法來對匹配元素進行特定事件的綁定

bind(type [data],function)

例子:$("div").bind("mouseover mouseout click",function(){ })

unbind() 對匹配的元素進行移除事件的方法 unbind("type") type--事件類型

3:常用的事件
blur 失去焦點 focus 獲取焦點 focusin focusout load unload click dblclick mousedown mouseup
mousemove mouseover mouseout mouseenter mouveleave change select submit keydown keypress
keyup error

4: 阻止事件冒泡: event.stopPropagation()

5:觸發事件 trigger()

$("#id").trigger("click") 常用模擬觸發事件

 

6:事件對象的屬性

event.type ----獲取事件類型
event.stopPropagation() -----阻止事件冒泡
event.pageX ---獲取游標相對於頁面的X坐標
event.pageY --獲取游標相對於頁面的Y坐標
event.target --獲取事件源對象(獲取到觸發事件的元素)
event.which --在滑鼠單擊事件中獲取滑鼠的左中右鍵
event.metaKey --為鍵盤事件中獲取CTRL鍵

event.metaKey :jquery1.4以及之前CTRL按下為true 後續版本改為false


7: 動畫
show("速度") 顯示元素
hide("速度") 隱藏元素
toggle() 切換效果

fadeOut() fadeIn() 這兩個方法是改變元素的不透明度(實現隱藏和顯示的效果)

slideUp() slideDown() 這兩個方法是改變元素的高度


自定義動畫:animate(params,speed,function(){ }) //一個包含樣式屬性及值的映射 速度 在動畫完成之後執行的方法

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL的uuid這個函數。簡要介紹一下。 用法 簡單看到,這個值,每次執行都是不同的。 生成規則 第1 2 3 段是與時間有關的。 time_low、time_mid、time_high_and_version轉成16進位後分別對應第1 2 3段。這個時間是從1582-10-15 00:00:0 ...
  • 我對CSS選擇器的認識 一、簡述 CSS選擇器是對HTML元素進行選擇的篩選條件,大概可以分為兩類: 在真正使用的時候,幾個簡單的選擇器可以組合成更複雜的選擇器,所以誰也說不上CSS選擇器有多少。還有兩個選擇器是功能性的,它們可以給元素已有內容之前或之後添加新內容。 我做了一個項目,裡面包含一個測試 ...
  • TCP三次握手 客戶端與伺服器之間互相發送HTTP請求響應之前需要先進行TCP連接,因為HTTP是一個無連接、無狀態協議,不存在連接的概念,只有請求和響應的概念。而請求和響應實際上只是數據包,他們需要傳輸通道進行傳輸,而這個傳輸通道就是TCP創建的通道。那麼這個通道是如何創建的呢?就是通過TCP三次 ...
  • angularjs學習第二天筆記---過濾器。主要學習了過濾器的使用方式,以及內置過濾器之:貨幣過濾器(currency)、時間過濾器(date) ...
  • 為什麼要使用 RxJS RxJS 是一套處理非同步編程的 API,那麼我將從非同步講起。 前端編程中的非同步有:事件(event)、AJAX、動畫(animation)、定時器(timer)。 非同步常見的問題 回調地獄(Callback Hell) 競態條件(Race Condition) 記憶體泄漏(Me ...
  • less文件只有被編譯後才能被瀏覽器識別和使用 less編譯工具:1. Koala :國人開發的less全平臺編譯工具 網址:http://koala-app.com/ 2. Winless : windows下的less編譯工具 網址:http://winless.org 3. Codekit : ...
  • canvas 繪製圖片是根據原始圖片的尺寸進行繪製,而不是根據利用屬性或樣式放大縮小後的圖片,所以要乘以原始圖片與現在圖片的比例。 ...
  • 在開發中總是忘記, 特意在此記錄 關鍵字: $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(i ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...