写代码之前,先说一下jq; jq:一般是指jQuery。JQuery是一个优秀的javascript类库,jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果,并且方便地为网站提供Ajax交互。 我发一个jq的文件,你先把这个文件放到和你写HTML的文件相同的文件夹下: 链接:https://pan.baidu.com/s/1krb39cyMg2u6WRRRWqQUPw 提取码:27hi 放好之后就可以写这个代码了:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:200px; height:200px; background:red; } </style> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ $('div').click(function(){ // $('#box').hide(500) // 隐藏 // $('#box').show(500) // 打开 $('#box').toggle(500) // 既可以隐藏有可以打开 // unction(){ // $('#box').hide(500) // 隐藏 // $('#box').show(500) // 打开 $('#box').toggle(500) // 既可以隐藏有可以打开 }) }) </script> </head> <body> <div id="box"></div> <div id="box_1"></div> <!--<button id="null_1">消失</button>--> </body> </html>这里可以很明确的看到,相比js,jq的代码就显得更加简单,内容也变得更加丰富多彩,所以一般我们都会优先选择jq来写。