搜索

jQuery事件切换

原创 2019-03-23 10:37:42 276
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jQuery事件切换</title> <script type="text/javascript" src="jquery-3.3.1.min.js&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>


批改老师:灭绝师太批改时间:2019-03-23 11:28:05
老师总结:布局中尽量用hover,toggle会造成不必要的错误!

发布手记

热门词条