如需要跟多资料请点击下方图片⬇(扫码加好友→备注 66)
Jquery 事件
ready 加载事件
ready() 类似于 onLoad() 事件
ready() 可以写多个,按顺序执行
$(document).ready(function(){}) 等价于 $(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ready 事件 </title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
// 文档载入完便触发 ready 方法
$(document).ready(function(){$("div").html("ready go...");
})
// $(document).ready(function(){}) == $(function(){})
$(function(){$("p").click(function () {$(this).hide();});
});
$(function(){$("#btntest").bind("click",function(){$("div").html("剁吧...");
});
});
</script>
</head>
<body>
<h3> 页面载入时触发 ready() 事件 </h3>
<div></div>
<input id="btntest" type="button" value="剁手" />
<p>aaa</p>
<p>bbbb</p>
<p>ccc</p>
<p>dddd</p>
</body>
</html>
bind() 绑定事件
为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
$(selector).bind(eventType [, eventData], handler(eventObject));
eventType:是一个字符串类型的事件类型,就是你所需要绑定的事件。
这类类型可以包括如下:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
mouseleave,change, select, submit, keydown, keypress, keyup, error
[, eventData]:传递的参数,格式:{名: 值, 名 2: 值 2}
handler(eventObject):该事件触发执行的函数
简单的 bind() 事件
<script type="text/javascript">
$(function(){/*$("#test").bind("click",function(){alert("世界会向那些有目标和远见的人让路!!");
});*/
/*
* js 的事件绑定
ele.onclick=function(){};
* */
// 等同于上面的放方法
$("#test").click(function(){alert("世界会向那些有目标和远见的人让路!!");
});
/*
1. 确定为哪些元素绑定事件
获取元素
2. 绑定什么事件(事件类型)第一个参数:事件的类型
3. 相应事件触发的,执行的操作
第二个参数:函数
* */
$("#btntest").bind('click',function(){// $(this).attr('disabled',true);
$(this).prop("disabled",true);
})
});
</script>
<body>
<h3>bind() 方简单的绑定事件 </h3>
<div id="test" style="cursor:pointer"> 点击查看名言 </div>
<input id="btntest" type="button" value="点击就不可用了" />
</body>
绑定多个事件
<script type="text/javascript">
$(function(){
// 绑定 click 和 mouseout 事件
/*$("h3").bind('click mouseout',function(){console.log("绑多个事件");
});*/
// 链式编程
$("h3").bind('click',function(){alert("链式编程 1");
}).bind('mouseout',function(){$("#slowDiv").show("slow");// 让 slowDiv 显示
});
/*$("#test").click(function(){console.log("点击鼠标了....");
}).mouseout(function () {console.log("移出鼠标了...");
});*/
$("#test").bind({click:function(){alert("链式编程 1");
},
mouseout:function(){$("#slowDiv").show("slow");
}
});
});
</script>
<body>
<h3>bind() 方法绑多个事件 </h3>
<div id="test" style="cursor:pointer"> 点击查看名言 </div>
<div id="slowDiv"style="width:200px; height:200px; display:none;">
人之所以能,是相信能
</div>
</body>