JQuery中的OnClick函數用例子解釋

jQuery 是 JavaScript 中快速、小型且功能豐富的庫之一。 jQuery 用於製作 HTML 文檔、事件處理、遍歷和操作等。

每當單擊 HTML 元素時，都會發生 jQuery click 事件。 要觸發jQuery 中的 onclick 函數，使用了click() 方法。 例如，單擊文檔上的段落時，單擊事件將由 $(“p”).click() 方法觸發。 每當發生單擊事件時，用戶可以將函數附加到單擊方法以運行該函數。 每當觸發 click() 事件時，就會執行一段代碼。

通過 HTMLElement.click() 方法模擬鼠標點擊。

Click() 函數是 jQuery 中的一個內置函數，用於啟動單擊事件。 每當單擊相關元素時，click() 方法都會觸發一個事件。 然後，該事件會觸發文檔樹（或事件鏈）中更高元素的單擊事件。

顧名思義，它只是用戶在元素上按下和釋放鼠標按鈕。

一個或多個事件處理程序通過 on() 方法附加到所選元素。 單擊元素時，會發生 click() 事件。 一旦發生 click() 事件，就會執行 click() 方法。 一個函數附加到 click() 方法並被執行。 click() 方法與 jQuery 的其他事件一起使用。

因此 .click() 將事件處理程序綁定到 JavaScript 事件“click”，或者在元素上觸發事件。 JavaScript onclick方法的變體是：

1. .click（處理程序）。
2. .click（[事件數據]，處理程序）。
3. 。點擊（）。

第一個和第二個變體是 .on( “click”, handler ) 的縮寫形式和最後一個變體中 .trigger( “click” ) 的快捷方式。

每當鼠標指針懸停在元素上並且按下並釋放按鈕時，就會將事件 click() 發送到該元素。 該事件可以被 HTML 的任何元素接收。

如果通過以下代碼點擊其他元素，也可以觸發 Click() 事件。

使用此代碼，消息將由元素發出警報

通過以下事件，只觸發了一個click()事件。

• 當鼠標指針位於元素內部並且按下鼠標按鈕時。
• 當鼠標指針位於元素內並釋放鼠標按鈕時。

在採取行動之前，上述事件通常是所需的順序。 否則，另一個合適的事件是鼠標按下或鼠標抬起事件。

由於 .click() 方法是 .on( “click”, handler ) 的快捷方式，因此可以通過使用 .off( “click” ) 來實現分離。

用法

有兩種方法可用於調用 click() 方法：

• 使用給定的函數參數
• 沒有給定的論點

jQuery 中的onclick 函數可用於 HTML 元素，如 div、段落、超鏈接等，以完成所需的任務。 單擊是在按下鼠標按鈕時發生的鼠標事件。 但是，如果鼠標中的指針位於元素內，則會發生該事件。

句法：

$(選擇器).click() ; -> 用於觸發選定元素的點擊事件。

$(選擇器).click(函數); -> 用於將函數附加到單擊事件。

• 使用的可選參數是“函數”，用於在點擊事件發生時執行。
• 返回值：返回與要執行的函數一起指定的選定元素。

方法click()的實現

1. 給定函數參數時

在這種類型的實現中，將一個函數作為輸入，並在調用 click() 方法時執行。

• 代碼的編寫是在腳本標記之間和代碼的 HTML正文中。
• 函數的調用是作為 h1 樣式屬性完成的。
• 參數與函數一起聲明，並單獨作為函數使用。
• 使用此運算符以 1000 毫秒延遲將方法切換應用於對象。
• 具有給定函數參數的實現方法示例如下所示。

代碼的輸出將是“單擊我將切換文本！”

2.當沒有給出論據時

javascript onclick方法觸發一個元素已分配給該方法。 因此一個元素可以單獨調用另一個元素的onclick事件。 這可以通過以下步驟來實現：

1. 必須首先使用可單擊的特定樣式的屬性聲明對象。 必須為該對象聲明一個onclick操作。
2. 將在代碼主體中創建一個腳本塊，其中方法 click() 的屬性是針對不同樣式的格式p完成的。
3. 已經定義的 h1 onclick 方法將在函數調用中被調用。
4. 然後為屬性調用相同的 onclick 方法。
5. 下面顯示了一個代碼示例，該示例顯示了沒有給定參數的 click() 方法的實現。

代碼的輸出是“點擊我會發出警報！”。

• • 許多事件可以在 $.on 方法中使用，例如 dblclick、change 等。

3. 呈現 HTML 按鈕並在單擊按鈕時向頁面添加文本。 Click() 方法最常附加到按鈕上，但是，它可以附加到網頁中的任何其他元素。

• • 一個基本按鈕以“btn-primary”的 id 呈現，它位於 <div> 內，id 為“main.
  • 通過代碼，在點擊按鈕後，新內容將在<p>標籤中以一類“新內容”的形式顯示出來。
  • jQuery 包含在 <script> 標記中。

• • 方法 click() 附加到按鈕的 id 上，並且將參數作為匿名函數的回調函數。
  • 回調函數返回字符串“Button clicked”。

• • 沒有名稱的函數被簡單地稱為匿名函數，並用作回調函數作為方法的參數。 對於構建任何響應式網站和應用程序，匿名函數和回調方法是基石。

• • 代碼將從 <div> “main” 中的按鈕開始。
  • 單擊按鈕後，事件處理程序將調用回調函數，因為 click() 方法附加到按鈕選擇器。
  • 將顯示字符串“Button clicked”。
  • 上面的代碼只會渲染一次內容，但是每次點擊代碼時都顯示字符串，使用 append() 而不是 HTML()。

• • 它將在 <p> 標記內生成三倍作為新內容的字符串。
  • 每次單擊按鈕時都會調用回調函數。

結論

文章中已經討論了jquery 中 onclick 函數的功能及其用法和示例。 只需幾行代碼，就可以通過JavaScript onclick方法創建網頁功能。

如果您想了解更多有關 Web 開發的知識並專攻其他相關領域，那麼您可以查看upGrad提供的“計算機科學理學碩士”課程。 專為入門級專業人士（21 至 45 歲之間的男性和女性）設計，該課程將在一個在線平台上進行，並提供現場課程，以方便長途通勤者。 通過 30 多個項目和作業，學生將獲得IIIT-Bangalore 和 LJMU 校友身份的好處。 如有任何幫助，請隨時聯繫我們的團隊。