小白的jquery学习之路08事件操作

最新推荐文章于 2024-05-05 23:45:07 发布

weixin_37770640

最新推荐文章于 2024-05-05 23:45:07 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_37770640/article/details/80636623

本文详细介绍了jQuery中的事件处理方法，包括事件绑定、触发、解除绑定等操作，并通过具体实例展示了如何使用这些方法来实现页面交互效果。此外还涉及了事件委托的概念及应用。

事件

页面载入
- ready(fn)
事件处理
- on(eve,[sel],[data],fn)^1.7+
- off(eve,[sel],[fn])^1.7+
- ~~bind(type,[data],fn)~~^3.0-
- one(type,[data],fn)
- trigger(type,[data])
- triggerHandler(type, [data])
- ~~unbind(t,[d|f])~~^3.0-
事件委派
- ~~live(type,[data],fn)~~^1.7-
- ~~die(type,[fn])~~^1.7-
- ~~delegate(s,[t],[d],fn)~~^3.0-
- ~~undelegate([s,[t],fn])~~^3.0-
事件切换
- hover([over,]out)
- toggle([spe],[eas],[fn])^1.9*
事件

增加事件

$("#box").on('click mouseenter',function(){
alert("心艺真棒") })
删除事件
$("#box").off('click')
给元素绑定一个只执行一次的事件
$("#box").one('click',function(){

alert('后会有期')})

hover相当于mouseenter和mouseleave结合版

$("#box").hover(function(){

$(this).css({'background':'black'})

},function(){
$(this).css({'background':'#ff0'})

})

给未来元素加事件

var newh='<p class="title">我是h2标签</p>'
//将新创建的标签加到box中
$("#box").append(newh);
//给未来元素用on加事件
$("#box p").on('click',function(){

alert('zzz')})

triggle用法引发事件

<html>
<head>
	<style type="text/css">




	</style>
	<!--引入jquery文件 -->
<script src="jquery.js"></script>

<script type="text/javascript">
   

$(function(){
	var age=prompt("请输入年龄，如果年龄大于18，则跳转");
	if(age>=18){
		$('#ff').trigger('submit')
	}

	
})

</script>

</head>
<body>

</br></br>

	<form action="1.html" action="post" id="ff">
	请输入用户名：<input type="text"></br>
	请输入密码：<input type="text"></br>
	<input type="submit" value="提交事件">
     </form>

</body>
</html>