两种事件切换函数

Original 2019-04-08 12:54:00 264
abstract:<!DOCTYPE html> <html> <head> <title>jquery的事件函数he事件切换</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></sc
<!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>


Correcting teacher:查无此人Correction time:2019-04-08 16:06:41
Teacher's summary:完成的不错。jq和js每行结束后面增加;号。继续加油

Release Notes

Popular Entries