首頁 > 網際網路

jquery實現滑鼠雙擊div消失效果

2019-12-12 17:13:39

jquery實現滑鼠雙擊div消失效果,主要用到jquery中的dblclick雙擊事件,還有用到hide()隱藏元素方法。下面介紹實現的過程。

1

新建一個html檔案,命名為test.html,用於使用jquery方法實現滑鼠雙擊div消失效果。


2

在test.html頁面,使用script標籤載入jquery.min.js檔案,成功載入該檔案,才能使用dblclick事件和hide()方法。


3

在test.html頁面,建立一個div模組,在裡面輸入「雙擊滑鼠左鍵的,我就消失。」文字。


4

在test.html頁面,使用style標籤定義div的樣式,設定div的寬高為150px,背景顏色為紅色,文字顏色為白色。


5

在test.html頁面,在script標籤內,使用$(document).ready()方法在頁面載入時執行function函數。


6

在function函數內,獲得div物件,再使用dblclick雙擊事件實現當div被雙擊時,用hide()方法把div隱藏,即讓div消失。


7

在瀏覽器開啟test.html檔案,雙擊紅色的正方形,div消失了,實現了滑鼠雙擊div消失效果。




IT145.com E-mail:sddin#qq.com