jQuery的事件是什麼? jquery事件的介紹
本篇文章帶給大家的內容是關於jQuery的事件是什麼? jquery事件的介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
頁面載入
在DOM中提供了load事件用於頁面載入完畢之後執行機制,jQuery提供了ready()方法實作相似的功能,但是存在以下的差異。
1.DOM中的load事件沒有任何的簡寫形式,但在jQuery的ready()方法中提供了簡寫形式。
2.在HTML頁面載入完成以後,load事件才會被觸發;而在DOM節點樹載入完畢以後,ready()方法就會被呼叫。
3.一個HTML頁面中只能存在一個load事件,但可以存在多個ready()方法。
ready()方法的語法結構:
1.$(document).ready(function(){}); 2.$().ready(function(){});//简写 3.$(function(){});//简写
事件綁定
單一事件綁定與單一事件解綁定
單一事件綁定
jQuery中提供了bind()方法完成綁定事件,語法如下
$element.bind(type,data,callback);
type:表示綁定事件的名稱,是字串類型,沒有'on'。
data:作為element.data屬性值傳遞給事件物件的額外資料物件(可選項)。
callback:表示綁定事件的處理函數。
範例程式碼如下:
<body> <button id='btn'>按钮</button> <script> function click1(){ console .log('this is button,'); } $('#btn').bind('click',click1);
單一事件解綁
jQuery中提供了unbind()方法來解綁事件。具體方法如下:
$element.unbind(type[,data,callback]);
$('#btn').unbind('click');//只传递事件名称,解绑定该事件的所有处理函数。 $('#btn').undind('click'click1);//传递时间名称和指定的处理函数,解绑定该事件的指定处理函数。
多重事件綁定與解綁定
<style> #title { width: 100px; height: 20px; border: 1px solid black; } ul { list-style: none; padding: 0; display: none; } li { width: 100px; height: 20px; border: 1px solid black; } </style> </head> <body> <p id="title">菜单</p> <ul> <li>北京</li> <li>南京</li> <li>天津</li> </ul> <script> // mouseover表示鼠标悬停在指定元素之上 mouseout表示鼠标从指定元素上移开 //jQuery支持链式操作,多事件绑定时,事件名称之间使用空格分离。 $('#title').bind('mouseover mouseout', function(){ if ($('ul').is(':hidden')) { $('ul').css('display','block'); } else { $('ul').css('display','none'); } }); /* unbind()方法 1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定 2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定 3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定 */ $('#title').unbind('mouseover mouseout');
事件綁定方法的對比
jQuery中提供多組事件綁定與解綁定的方法
1.bind()與unbind() - jQuery 3.0版本後刪除方法
2.on()與off()方法- jQuery 1.7版本後新增方法
其實bind()與unbind()的底層方法就是on()和off()
3.live()與die() - jQuery 1.7版本後刪除方法
作用- 實現事件委託
4.delegate()與undelegate() - jQuery 1.6版本後新增方法,jQuery
3.0版本後刪除方法
作用- 實作事件委託
5. one() - 為事件綁定一次性的函數
事件切換
hover()方法
jQuery中提供了hover()方法模擬滑鼠懸停事件效果。
$element.hover(over,out);
範例程式碼如下:
<style> #title { width: 100px; height: 20px; border: 1px solid black; } ul { list-style: none; padding: 0; display: none; } li { width: 100px; height: 20px; border: 1px solid black; } </style> </head> <body> <p id="title">菜单</p> <ul> <li>北京</li> <li>南京</li> <li>天津</li> </ul> <script> $('#title').hover(function(){ $('ul').css('display','block'); },function(){ $('ul').css('display','none'); }); </script> </body>
事件模擬
jQuery中提供了trigger()方法用於模擬除法匹配元素綁定的事件
$element.trigger(type[,dat]);
<body> <button id="btn">按钮</button> <script> // 绑定事件 - 由用户行为进行触发,调用处理函数 $('#btn').bind('click',function(){ console.log('this is button.'); }); // 模拟用户触发事件 $('#btn').trigger('click'); </script> </body>
相關推薦:
#以上是jQuery的事件是什麼? jquery事件的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

React通過JSX與HTML結合,提升用戶體驗。 1)JSX嵌入HTML,使開發更直觀。 2)虛擬DOM機制優化性能,減少DOM操作。 3)組件化管理UI,提高可維護性。 4)狀態管理和事件處理增強交互性。

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-
