jquery事件
阿新 • • 發佈：2020-08-10
事件
事件繫結方式
<script src="jquery.js"></script> <script> //方式1 // $('#d1').click(function () { // $(this).css({'background-color':'green'}); // }); //方式2 $('#d1').on('click',function () { $(this).css({'background-color':'green'}); }) </script>
常用事件
click 左鍵點選事件 //獲取游標觸發的事件 $('[type="text"]').focus(function () { $('.c1').css({'background-color':'black'}); }); //失去游標(焦點)觸發的事件 $('[type="text"]').blur(function () { $('.c1').css({'background-color':'purple'}); }); //域內容發生改變時觸發的事件 $('select').change(function () { $('.c1').toggleClass('cc'); }); //滑鼠懸浮觸發的事件 // $('.c1').hover( // //第一步:滑鼠放上去 // function () { // $(this).css({'background-color':'blue'}); // }, // //第二步,滑鼠移走 // function () { // $(this).css({'background-color':'yellow'}); // } // ) // 滑鼠懸浮 等同於hover事件 // 滑鼠進入 // $('.c1').mouseenter(function () { // $(this).css({'background-color':'blue'}); // }); // 滑鼠移出 // $('.c1').mouseout(function () { // $(this).css({'background-color':'yellow'}); // }); // $('.c2').mouseenter(function () { // console.log('得港綠了'); // }); // 滑鼠懸浮事件 // $('.c2').mouseover(function () { // console.log('得港綠了'); // }); // mouseover 和 mouseenter的區別是：mouseover事件是如果該標籤有子標籤，那麼移動到該標籤或者移動到子標籤時會連續觸發，mmouseenter事件不管有沒有子標籤都只觸發一次，表示滑鼠進入這個物件 //鍵盤按下觸發的事件 e\event事件物件 $(window).keydown(function (e) { // console.log(e.keyCode); //每個鍵都有一個keyCode值,通過不同的值來觸發不同的事件 if (e.keyCode === 37){ $('.c1').css({'background-color':'red'}); }else if(e.keyCode === 39){ $('.c1').css({'background-color':'green'}); } else { $('.c1').css({'background-color':'black'}); } }) // 鍵盤抬起觸發的事件 $(window).keyup(function (e) { console.log(e.keyCode); }) input事件: 22期百度:<input type="text" id="search"> <script src="jquery.js"></script> <script> $('#search').on('input',function () { console.log($(this).val()); }) </script>
事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ background-color: red; height: 200px; } #d2{ background-color: green; height: 100px; width: 100px; } </style> </head> <body> <div id="d1"> <div id="d2"></div> </div> <script src="jquery.js"></script> <script> $('#d1').click(function () { alert('父級標籤'); }); $('#d2').click(function () { alert('子級標籤'); }); </script> </body> </html>
阻止後續事件發生
$('#d1').click(function () {
alert('父級標籤');
});
$('#d2').click(function (e) {
alert('子級標籤');
return false;
// e.stopPropagation();
});
事件委託
事件委託是通過事件冒泡的原理，利用父標籤去捕獲子標籤的事件，將未來新增進來的某些子標籤自動繫結上事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<button class="c1">愛的魔力轉圈圈</button>
</div>
<script src="jquery.js"></script>
<script>
// $('.c1').on('click',function () {
// alert('得港被雪飛調教了,大壯很難受!');
// var btn = document.createElement('button');
// $(btn).text('愛的魔力轉圈圈');
// $(btn).addClass('c1');
// console.log(btn);
// //新增到div標籤裡面的後面
// $('#d1').append(btn);
//
// });
#將'button' 選擇器選中的標籤的點選事件委託給了$('#d1');
$('#d1').on('click','button',function () {
alert('得港被雪飛調教了,大壯很難受!');
var btn = document.createElement('button');
$(btn).text('愛的魔力轉圈圈');
$(btn).addClass('c1');
console.log(btn);
console.log($(this)) //還是我們點選的那個button按鈕
//新增到div標籤裡面的後面
$('#d1').append(btn);
});
</script>
</body>
</html>
頁面載入和window.onload
1. jquery檔案要在使用jquery的程式碼之前引入
2. js程式碼最好都放到body標籤下面或者裡面的最下面來寫
3.window.onload
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
4.頁面載入,$(function (){alert('xx');}) -- $(document).ready(function(){});
頁面載入與window.onload的區別
1.window.onload()函式有覆蓋現象，必須等待著圖片資源載入完成之後才能呼叫
2.jQuery的這個入口函式沒有函式覆蓋現象，文件載入完成之後就可以呼叫（建議使用此函式）
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<script>
// 等待整個頁面中的內容全部載入完成之後,觸發window.onload對應的函式裡面的內容
// window.onload 有覆蓋現象,會被後面的window.onload給重新賦值
// window.onload = function () {
// $('.c1').click(function () {
// $(this).css({'background-color':'green'});
// })
// }
$(function () {
$('.c1').click(function () {
$(this).css({'background-color':'green'});
})
});
</script>
<script src="xx.js"></script>
<style>
.c1{
background-color: red;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="c1"></div>
<img src="" alt="">
</body>
</html>