返回两种事件切换函......登陆

两种事件切换函数

意外2019-04-08 12:54:00263
<!DOCTYPE html>
<html>
<head>
	<title>jquery的事件函数he事件切换</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
		div{width: 100px;height: 100px;background: #ccc;border: 1px solid yellow}
	</style>
</head>
<body>
	blur();当元素失去焦点	(也就是鼠标移上或移下)<br>
	focus();当元素获得焦点;<br>
	change();当元素值发生改变;<br>
	click()点击事件;<br>
	dblclick();双击事件;<br>
	hover(over,out);鼠标移上触发一个函数,移下触发一个函数;<br>
	toggle()元素可见就切换隐藏,否则相反;<br>
<input type="text" name="">
<div>请叫我鲁先生</div>
<div class="like"></div>
<button>点击</button>

<script>
		
	$(document).ready(function(){
	// blur();当元素失去焦点	(也就是鼠标移上或移下)
		// $('input').blur(function(){
		// 	$('input').css('background','red')
		// })

	// focus();当元素获得焦点;
		$('input').focus(function(){
			$('input').css('background','red')
		})

	// change();当元素值发生改变;
		// $('input').change(function(){
		// 	$('input').css('background','red')
		// 	})

	// hover(over,out);鼠标移上触发一个函数,移下触发一个函数;<br>
	// $('div').hover(
	// 	function(){
	// 		$(this).css('background','blue')
	// 	},
	// 	function(){
	// 		$(this).css('color','#fff')
	// 	}
	// )


	$('button').click(function(){
		$('.like').toggle()
	})


})




</script>

</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送