02 jQuery中的事件、動畫、複合函數

来源:https://www.cnblogs.com/ITRonion/archive/2019/11/30/11964201.html

jQuery中的事件 在JavaScript中,常用的基礎事件有滑鼠事件、鍵盤事件、window事件、表單事件、事件綁定和處理函數的語法格式如下 語法q 事件名 = "函數名()"; 或者 DOM對象.事件名 = 函數; 1、載入事件 $(function () {}); //推薦使用 $(docu ...


jQuery中的事件

在JavaScript中,常用的基礎事件有滑鼠事件、鍵盤事件、window事件、表單事件、事件綁定和處理函數的語法格式如下

語法q

  事件名 = "函數名()";    或者        DOM對象.事件名 = 函數;

1、載入事件

$(function () {});    //推薦使用
$(document).ready(function () {});   //推薦使用
window.onload = function () {}    

 

2、滑鼠事件

click()         觸發將函數綁定到指定元素的click事件      滑鼠單擊時

mouseover()      觸發將函數綁定到指定元素的mouseover事件   滑鼠指針移過時    

mouseout()     觸發將函數綁定到指定元素的mouseout事件     滑鼠指針移出時

mouseenter()    觸發將函數綁定到指定元素的mouseenter事件     滑鼠指針進入時

mouseleave()      觸發將函數綁定到指定元素的mouseleave事件    滑鼠指針離開時

mouseover() 和 mouseenter()的區別:mouseover()包含子元素綁定,而mouseenter不包含子元素綁定

3、鍵盤事件

keydown()        觸發或將函數綁定到指定元素的keydown事件  鍵盤按下時

keyup()          觸發或將函數綁定到指定元素的keyup事件    釋放按鍵時

keypress()        觸發或將函數綁定到指定元素的keypress事件  產生可列印的字元時

 

$(document).keydown(function (event){
     if (event.keyCode == "13") {    //按Enter事件
            alert("確認要提交嗎?");
          }
      });

 

4、瀏覽器事件

此事件是當瀏覽器視窗大小發生變化時而觸發來完成頁面的一些特效

語法

$(selector).resize();

綁定事件與移除事件

在jQuery中,如果需要為匹配的元素同時綁定多個事件,則可以使用bing()方法,其語法格式如下

語法

bind(type,[data],fn);

bind() 方法有三個參數,其中參數data不是必需的,如下表所示

type    事件類型   主要包括click、mouseover、mouseout等基礎事件,此外,還是可自定義事件

[data]    可選參數   作為event.data屬性值傳遞事件對象的額外數據對象,該參數不是必需的

fn     處理函數   用來綁定處理函數

 

綁定單個事件

$("#btn").bind("click", function() {
    alert('綁定單擊事件');
   });

綁定多個事件

$("#btn").bind({
    "mouseover":function(){
        alert('事件一');
     },
    "mouseout":function () {
        alert('事件二');
    }
});

 

移除事件

語法

unbind([type],[fn]);

[type]    事件類型    主要包括click、mouseover、moseout 等基礎事件外,此外,還可以是自定義事件

[fn]     處理函數    用來處理綁定的處理函數

如果沒有參數則是移除所有被bind()綁定的函數

 

 綁定多個事件的函數還有很多,例如常用的鏈式編程on()

 

綁定事件---on()

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
或
$( "#dataTable tbody" ).on( "click", function() {
  console.log( $( this ).text() );
});

其用法和bind()類似

 

綁定多個事件--鏈式編程

$("#btn").click(function(){
    console.log("單擊");
}).mouseover(function(){
    console.log("滑鼠懸浮");
});

 

 jQuery中的動畫

1、show()、hide()

前期學過顯示和隱藏,其實shwo() 和 hide() 也是一種動畫,當加入參數時效果明顯

show()     顯示    用於顯示元素其原理相當於css("display","block")

hide()    隱藏    用於顯示元素其原理相當於css("display","none")

show() 和 hide() 中的三個參數:

1、[duration]速度,預設400毫秒,也可用字元串表示("slow","normal","fast")

 

2、[easing] 一個字元串,指示要在過渡中使用哪個緩動函數

3、[complete] 回調函數,指當顯示完後隱藏後執行的函數

常用的的是show() 、show([duration],[complete]) 或 hide() 、hide([duration],[complete])

/* show() */
$("#btn").click(function (){
    //第一種顯示,第一個參數為數字
$("#dv").show(1000,function(){
    alert("我已經顯示完成了");
       });
        //第二種顯示,第一個參數為字元串
$("#dv").show("fast",function(){
    alert("我已經顯示完成了");
       });
    //第三種顯示,無參
    $("#dv").show();
});    

hide()用法也和show()一樣

 

2、

 


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

更多相關文章
  • [toc] 一、準備工作 先來一段偽代碼,首先你能看懂麽? 繼續做以下的前期準備工作: 新建一個測試資料庫TestDB; 創建測試表table1和table2; 插入測試數據; 準備工作做完以後,table1和table2看起來應該像下麵這樣: 準備SQL邏輯查詢測試語句 Oracle SQL語句執 ...
  • https://www.jianshu.com/p/faa5e852b76b https://bbs.csdn.net/topics/70039385 https://www.runoob.com/sqlite/sqlite-insert.html http://c.biancheng.net/vi ...
  • 基本語法如下 sqlite> select * from tb_user; sqlite> select userid,username from tb_user; 格式化的查詢輸出 sqlite> .header on sqlite> .mode column sqlite> select * f ...
  • 概述&背景 MySQL一直被人詬病沒有實現HashJoin,最新發佈的8.0.18已經帶上了這個功能,令人欣喜。有時候在想,MySQL為什麼一直不支持HashJoin呢?我想可能是因為MySQL多用於簡單的OLTP場景,並且在互聯網應用居多,需求沒那麼緊急。另一方面可能是因為以前完全靠社區,這種演進 ...
  • SQL:Structured Quety Language SQL SERVER是一個以客戶/伺服器(c/s)模式訪問、使用Transact-SQL語言的關係型資料庫管理子系統(RDBMS) DBMS :Database Management System資料庫管理系統 資料庫:程式用來存取數據的 ...
  • Responding to the Launch of Your App Initialize your app’s data structures, prepare your app to run, and respond to any launch-time requests from the ...
  • 一、完成了內容中的右邊的一部分。練習了三點:小盒子在大盒子中的位置,最好用大盒子的內邊距完成佈局,而不是用小盒子的外邊距來進行佈局;複習了ul,li的用法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D ...
  • css背景樣式屬性介紹 背景樣式就是自定義 標簽的背景顏色或背景圖像。 背景屬性說明表 屬性名 | 屬性值|描述 | | background color | f00、red、rgb(255,0,0)|設置背景顏色。 background image |url(背景圖片路徑)|設置背景圖像。 bac ...
一周排行
  • 本文將介紹如何在.NET Core3環境下使用MVVM框架Prism的使用事件聚合器實現模塊間的通信 一.事件聚合器 在上一篇 ".NET Core 3 WPF MVVM框架 Prism系列之模塊化" 我們留下了一些問題,就是如何處理同模塊不同窗體之間的通信和不同模塊之間不同窗體的通信,Prism提 ...
  • Microsoft Visual Studio 2010 的項目為件改為Microsoft Visual Studio 2015預設打開 2010 的Solution (.Sln) file 更改為 2015 的Solution (.Sln) file ...
  • 設計一個簡單的登錄視窗,要求輸入用戶名:小金,密碼:123456時候點登錄能正確轉到另一個視窗。 1、建立窗體應用。 2、這裡創建一個login和一個NewForm的窗體。 3、在login的窗體拖拉2個label和2個textbox和1個linklabel的控制項。一個標簽名字為用戶名,一個標簽為密 ...
  • 已有站點:HTTP80 %systemroot%\system32\inetsrv\APPCMD ADD APP /SITE.NAME:"HTTP80" /path:/Redirect /physicalPath:"C:\Windows\System32\drivers\etc" /applicat ...
  • ``` var xmlstr = @" some_appid 1413192605 component_verify_ticket some_verify_ticket "; Stopwatch sw = Stopwatch.StartNew(); for (int i = 0; i ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,記錄一下學習過程以備後續查用。 一、引言 很多人說原型設計模式會節省機器記憶體,他們說是拷貝出來的對象是原型的複製,不會使用記憶體。我認為這是不對的,因為拷貝出來的每一個對象都是實際 存在的 ...
  • 實現把String字元串轉化為In後可用參數代碼: public string StringToList(string aa) { string bb1 = "("; if (!string.IsNullOrEmpty(aa.Trim())) { string[] bb = aa.Split(new ...
  • 1.ImportData主方法 把傳入為object數組類型,按照下標取出對應的參數,此處為Table和Username public object[] ImportData(object[] Param) { DataTable dt = (DataTable)Param[0]; string m ...
  • C#實現對Excel操作,根據數據的類型不同或者來源不同會放在不同的頁簽中,C#實現添加頁簽代碼如下:(path為文檔保存的地址,dt為要處理的源數據) public void addSheet(string Path, DataTable dt) { var SlDoc = new SLDocum ...
  • public partial class Form1 : Form { public Form1() { InitializeComponent(); Dog dog = new Dog(); InsertDog(dog); dog.OnAlert(); //Console.WriteLine(); ...
x