1.ready: 当页面加载完时就会执行此函数事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<script src="./src/js/tool/jquery-1.8.3.min.js"></script>
<script>
$().ready(function(){
$(".box1").css({
backgroundColor:'red'
})
})
</script>
</body>
</html>
效果图:
2.click:触发页面内元素的单击事件
列子:点击后把背景颜色改为绿色
<script>
$(".box1").click(function(){
$(".box1").css({
backgroundColor:'green'
})
})
</script>
点击前
点击后
3.dblclick:触发页面内元素的双击事件
列子:点击后把背景颜色改为绿色
<script>
$(".box1").dblclick(function(){
$(".box1").css({
backgroundColor:'green'
})
})
</script>
点击前
点击后
4.focus:获取焦点时触发
<script>
$("input").focus(function(){
$("input").css({
backgroundColor:'green'
})
});
</script>
获取前:
获取后:
5.blur:失去焦点时触发
<script>
$("input").blur(function () {
$("input").css({
backgroundColor: "green",
});
});
</script>
失去前:
失去后:
6.mouseenter:移入事件
<script>
$(".box1").mouseenter(function(){
$(".box1").css({
backgroundColor:'yellow'
})
})
</script>
移入前:
移入后:
7.mouseleave:移出事件
<script>
$(".box1").mouseleave(function(){
$(".box1").css({
backgroundColor:'green'
})
})
</script>
移出前:
移出后:
8.on(event,selector,data,function)
event(必需): 一个或多个由空格分隔的事件
selector: 可选。规定只能添加到指定的子元素上的事件处理程序
data: 当一个事件被触发时,要传递给事件处理函数的event.data。
function:回调函数
利用on写的移入
<script>
$(".box1").on('mouseenter',function(){
$(".box1").css({
backgroundColor:'yellow'
})
})
</script>
移入前:
移入后: