鬆軟科技課堂:jQuery 事件函數

来源:https://www.cnblogs.com/sysoft/archive/2020/01/11/12178838.html
-Advertisement-
Play Games

jQuery 事件函數 jQuery 事件處理方法是 jQuery 中的核心函數。 事件處理程式指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”(或“激發”)經常會被使用。 通常會把 jQuery 代碼放到 <head>部分的事件處理方法中: 實例 <html> <head> < ...


jQuery 事件函數

jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程式指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”(或“激發”)經常會被使用。

通常會把 jQuery 代碼放到 <head>部分的事件處理方法中:

實例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

 

在上面的例子中,當按鈕的點擊事件被觸發時會調用一個函數:

$("button").click(function() {..some code... } )

 

該方法隱藏所有 <p> 元素:

$("p").hide();

 

單獨文件中的函數

如果您的網站包含許多頁面,並且您希望您的 jQuery 函數易於維護,那麼請把您的 jQuery 函數放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時,會將函數直接添加到 <head> 部分中。不過,把它們放到一個單獨的文件中會更好,就像這樣(通過 src 屬性來引用文件):

實例

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

  

jQuery 名稱衝突

jQuery 使用 $ 符號作為 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函數(比如 Prototype)同樣使用 $ 符號。

jQuery 使用名為 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict(),幫助您使用自己的名稱(比如 jq)來代替 $ 符號。

 

結論

由於 jQuery 是為處理 HTML 事件而特別設計的,那麼當您遵循以下原則時,您的代碼會更恰當且更易維護:

  • 把所有 jQuery 代碼置於事件處理函數中
  • 把所有事件處理函數置於文檔就緒事件處理器中
  • 把 jQuery 代碼置於單獨的 .js 文件中
  • 如果存在名稱衝突,則重命名 jQuery 庫

jQuery 事件

下麵是 jQuery 中事件方法的一些例子:

Event 函數綁定函數至
$(document).ready(function) 將函數綁定到文檔的就緒事件(當文檔完成載入時)
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的滑鼠懸停事件

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

-Advertisement-
Play Games
更多相關文章
  • [toc] "示例完整源碼地址" 2020年1月10日 10:10:10 shanzm 0 .net中的緩存對象 MemoryCache對象 HttpContext.Cache (Asp.net)對象 示例:(詳見: "001MemoryCache" ) 1.MemCached 安裝包下載: "推薦 ...
  • 場景 在Android中畫筆使用Paint類,畫布使用Canvas類來表示。 繪圖的基本步驟 首先編寫一個繼承自View的自定義View類,然後重寫其onDraw方法,最後把自定義的view添加到actvity中。 效果 註: 博客: https://blog.csdn.net/badao_lium ...
  • 場景 在Android中畫筆使用Paint類,畫布使用Canvas類來表示。 繪圖的基本步驟 首先編寫一個繼承自View的自定義View類,然後重寫其onDraw方法,最後把自定義的view添加到actvity中。 效果 註: 博客: https://blog.csdn.net/badao_lium ...
  • 場景 設置鬧鐘 鬧鐘提醒 註: 博客: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 新建一個MainActivity,在其佈局文件中添加一個時間選擇器和一個Button <?xml ve ...
  • android中寫XML時,需要用到XmlSerializer類 解析XML時,則需要用到XmlPullParser類 1.XmlSerializer類介紹 通過Xml.newSerializer()來獲取XmlSerializer XmlSerializer常用方法如下所示: void setOu ...
  • 最近使用魅族真機測試 App 時,發現 LogCat 不顯示項目工程中通過Log.d()和Log.v()列印的 debug 和 verbose 級別的日誌,甚是奇怪,通過 debug 模式斷點調試也沒看出有什麼問題,無奈之下,Google 一番,終於找到了答案。 原來國內的部分廠商定製的手機對於應用 ...
  • 場景 Android中點擊按鈕啟動另一個Activity以及Activity之間傳值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103919470 在上面啟動Activity和傳值之後,怎樣獲取Acitvity的返回值。下麵 ...
  • 場景 點擊第一個Activity中的按鈕,啟動第二個Activity,關閉第二個Activity,返回到第一個Activity。 在第一個Activity中給第二個Activity傳遞值,第二個Activity中獲取並顯示。 打開第二個Activity Activity傳值 註: 博客:https: ...
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...