jQuery事件
程序员文章站
2022-06-24 10:34:18
事件 事件绑定方式 常用事件 事件冒泡 阻止后续事件发生 事件委托 页面载入和window.onload ......
事件
事件绑定方式
<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>
上一篇： 使用PowerShell修改注册表
下一篇： 多线程高并发内容聚合