第九天前端jQuery常用事件

最新推荐文章于 2024-05-01 22:58:15 发布

qq_40298829

最新推荐文章于 2024-05-01 22:58:15 发布

阅读量140

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_40298829/article/details/109212692

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

十二jQuery事件

1.鼠标事件

click 单机鼠标时

dblclick 鼠标双击时

mousedown()/up 鼠标按下/弹起时

mouseover/out 鼠标移入/移出时

hover 相当于 mouseover 与 mouseout 事件的组合

toggle 鼠标连续单机事件

<script language="javascript" src="../js/jquery-1.8.2.js"></script>
<script language="javascript">
$(function(){
	//鼠标点击双击
	$("input[type='button']").click(function(){
		$(this).css("background-color","#ff0000")
	})
	$("input[type='button']").dblclick(function(){
		$(this).css("color","#0000ff")
	})
	//鼠标按下按起
	$("li:first").mousedown(function(){
		$(this).css("background-color","#00ff00")
	})
	$("li:first").mouseup(function(){
		$(this).css("background-color","#bbbbbb")
	})
	//鼠标移入移出
	$("li").mouseover(function(){
		$(this).addClass("c1");
	})
	$("li").mouseout(function(){
	//	$(this).removeClass("c1")//删除指定样式
		$(this).removeClass()//删除所有的样式
	})
	//hover	mouseover 与 mouseout 事件的组合
	$("li:last").hover(
	function(){
		$(this).css("color","#ff0000")
	},
	function(){
		$(this).css("font-size","32px")
	}
	)
	//toggle	鼠标连续单机事件
	$("li:even").toggle(
		function(){
			$(this).css("height","40px")
		},
		function(){
			$(this).css("width","300px")
		},
		function(){
			$(this).css("font-size","40px")
		}
	)
})
</script>
<body>
<ul>
  <li>首页</li>
  <li>学院介绍</li>
  <li>专业介绍</li>
  <li>就业</li>
</ul>
<input type="button" value="鼠标点击" />
</body>

2.键盘事件

keydown 按下键盘时

keyup 放开键盘时

keypress 产生可打印的字符时

<script language="javascript" src="../js/jquery-1.8.2.js"></script>
<script language="javascript">
$(function(){
	//按下键盘时
	$("input[type='text']").keydown(function(event){
		if(event.keyCode=="13"){
			if(confirm("确认要提交嘛")){
			}
		}
	})
	//放开键盘时
	$("input[type='text']").keyup(function(event){
		if(event.keyCode=="13"){
			alert("提交成功");
		}
	})
	//放开键盘时
	$("input[type='text']").keypress(function(event){
		alert("产生可打印的字符");
	})
})
</script>
<body>
<input type="text" value="默认值"/>
</body>

3.表单事件

focus 获得焦点时

blur 失去焦点时

submit 提交时

<script language="javascript" src="../js/jquery-1.8.2.js"></script>
<script language="javascript">
	$(function(){
		//获取和失去焦点触发的事件
		$("input[type='text']").focus(function(){
			$(this).css("background-color","#ff0000")
		})
		$("input[type='text']").blur(function(){
			$(this).css("background-color","#00ff00")
		})
	})
</script>
<body>
<h2>用户登录</h2>
<form action="" method="post">
输入姓名:<input type="text" name="uname" id="nm1"/>
<br/><input type="submit" value="提交"/>
</form>
</body>

4绑定事件

格式

bind(type,fn)

多个事件绑定一个函数

<script language="javascript">
	$(function(){
		$("h2").bind("click mouseover",function(){
			$(this).css({"color":"#ff0000"})
		})
	})
</script>
<body>
<h2>标题二</h2>
</body>

多个事件绑定多个函数

<script language="javascript">
	$(function(){
		$("h2").bind("click mouseover",function(){
			$(this).css({"color":"#ff0000"})
		})
	})
</script>
<body>
<input type="button" value="单击"/>
</body

5.显示/隐藏的动画效果

显示隐藏元素

show(long millions) 通过时间控制元素渐变显示速度

hide(long millions) 通过时间控制元素渐变隐藏速度

淡入淡出元素

fadeIn(long millions) 通过时间控制元素渐变淡入速度

fadeOut(long millions) 通过时间控制元素渐变淡出速度

缩进展开元素

slideUp(long millions) 通过时间控制元素渐变缩进速度

slideDown(long millions) 通过时间控制元素渐变展开速度

<script language="javascript" src="../js/jquery-1.8.2.js"></script>
<script language="javascript">
$(function(){
	//通过时间控制元素渐变显示/隐藏速度
	$("input[value='显示']").click(function(){
		$("img:hidden").show(3000)
	})
	$("input[value='隐藏']").click(function(){
		$("img:visible").hide(3000)
	})
	//	通过时间控制元素渐变淡入/淡出速度
	$("input[value='淡入']").click(function(){
		$("img:hidden").fadeIn(3000)
	})
	$("input[value='淡出']").click(function(){
		$("img:visible").fadeOut(3000)
	})
	//通过时间控制元素缩进/展开速度
	$("input[value='缩进']").click(function(){
		$("img:hidden").slideDown(3000)
	})
	$("input[value='展开']").click(function(){
		$("img:visible").slideUp(3000)
	})
	})
</script>
<body>
<img src="../QQ图片20190530124206.gif" width="300" height="350" />
<br/>
<input type="button" value="显示" /><input type="button" value="隐藏" /><br/>
<input type="button" value="淡入" /><input type="button" value="淡出" /><br/>
<input type="button" value="缩进" /><input type="button" value="展开" /><br/>
</body>
</html>