在jQuery中，大多數DOM事件都有一個等效的jQuery方法，
如果想在頁面中指定一個點擊事件,語法格式如下：
$('p').click();下一步就是點擊后所觸發的事件，可以通過一個函式實作
$("p").click(function(){
// 觸發事件過后所執行的代碼
});下面說一下常用的事件方法
$(document).ready()
$(document).ready()方法允許在檔案完全加載完畢后執行函式，
click
click()方法是當用戶點擊html元素是觸發的方法
例如：當用戶點擊<p>元素時，會隱藏<p>元素;
<body>
<p>1點擊此處會消失1</p>
<p>2點擊此處會消失2</p>
<p>3點擊此處會消失3</p>
<script src="../../jquery-3.6.0.js"></script> //引入jQuery庫
<script>
$(document).ready(function(){
$('p').click(function(){ //獲取p標簽的點擊事件，當點擊p元素時，會執行以下代碼
$(this).hide(); //（hide：隱藏）將p元素進行隱藏
})
})
</script>
</body>
當點擊"點擊此處p1會消失" 時會隱藏如下圖：
dblcick()
顧名思義dblcick():雙擊元素觸發事件,當滑鼠雙擊時會發生事件
<body>
<p>1雙擊此處我會消失</p>
<p>2雙擊此處我會消失</p>
<p>3雙擊此處我會消失</p>
<p>4雙擊此處我會消失</p>
<p>5雙擊此處我會消失</p>
<script src="../../jquery-3.6.0.js"></script>
<script>
$('p').dblclick(function(){ //雙擊滑鼠發生下面的事件
$(this).hide(); //將點擊的p標簽進行隱藏
})
</script>
</body>mouseenter()
當滑鼠的指標放在了這個元素時，則會發生mouseenter()事件
<body>
<p id="p1">這里是p1</p>
<script src="../../jquery-3.6.0.js"></script>
<script>
$('#p1').mouseenter(function(){
alert('您的滑鼠移到了id為p1的元素上面！')
})
</script>
</body>mouseleave()
則與mouseenter()相反，當滑鼠離開這個元素時，則會發生mouseleave()事件
<body>
<p id="p1">這里是p1</p>
<script src="../../jquery-3.6.0.js"></script>
<script>
$('#p1').mouseleave(function(){
alert('您的滑鼠移已經離開id="p1"的p標簽了！')
})
</script>
</body>mousedown() 和mouseup()
mousedown()當滑鼠按下觸發事件，mouseup()當滑鼠松開時觸發事件，可以用console.log列印到控制臺查看結果，
<body>
<p id="p1">這里是p1</p>
<script src="../../jquery-3.6.0.js"></script>
<script>
$('p').mousedown(function(){
console.log('滑鼠已經在該段落上按下')
})
$('p').mouseup(function(){
console.log('滑鼠在段落上松開');
})
</script>
</body>hover()
hover()和css中的hover一致，當滑鼠放在該元素上時觸發第一個（mouseenter）事件，離開時會觸發第二個（mouseleave）事件
此方法用于模擬游標懸停事件
<body>
<p>此處是p1</p>
<script src="../../jquery-3.6.0.js"></script>
<script>
$('p').hover(function(){ //此處觸發進入事件
console.log('你已經進入了p1');
},
function(){ //此處觸發離開事件
console.log('你可已經離開了p1');
})
</script>
</body>focus() 與 blur()
這兩個事件通常用于表單元素
focus():當元素獲得焦點時則觸發的事件
blur():當元素失去焦點時會觸發的事件
<body>
<!--focus（）事件-->
<input type="text">文本框
<script src="../../jquery-3.6.0.js"></script>
<script>
$('input').focus(function(){ //當獲得焦點時
$(this).css('background-color','yellow'); //背景顏色會變成黃色
$(this).css('outline','none'); //取消邊框
})
/*blur()事件*/
$('input').blur(function(){ //失去焦點時
$(this).css('background-color','red'); input背景顏色會變成紅色
})
</script>
</body>以上就是jQuery所有的事件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296899.html
標籤：其他
上一篇：分享 10 個高星的創意專案！
下一篇：JS陣列基礎