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 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...