jQuery事件切换

Original 2019-05-13 10:45:11 244
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery事件切换</title> <script type="text/javascript" src=&quo
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery事件切换</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
		div,p{width: 200px;height: 200px;border: 1px solid #ccc;}
	</style>
</head>
<body>
<script type="text/javascript">
  // hover(over,out)
  // over:鼠标移上元素上要触发的一个函数
  // out:鼠标移出元素上要触发的一个函数
    $(document).ready(function(){
  // 	$('div').hover(
  //       function(){
  //       $(this).css('background','red')
  //       },
  //       function(){
  //       	$(this).css('color','#fff')
  //       }
  // 		)
    
    // toggle() 如果元素是可见的,就切换为隐藏,否则相反
    $('button').click(function(){
    	$('p').toggle().css('background','red')
    })

     })

 

</script>
<div>我是内容</div>
<p style="display: none;"></p>
<button>点击</button>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-05-14 09:15:14
Teacher's summary:完成的不错。jq比js简单很多,练好jq,可以减少很多工作量。继续加油

Release Notes

Popular Entries