微意技术博客

微意技术博客,记录一个web前端成长和学习历程的个人博客网站!

利用jq显示和隐藏某些元素!

今天我要说的是jq而不是js,显示和隐藏某些元素js当然也可以实现,但是跟jq相对比起来就显得比较生硬了,jq在我的理解里是做特效用的(我是新手理解没大神透彻),所以他有一些效果是js比不上的,比如我现在写的这个东西。

我们要用jq的话首先我们要引入一个JQ库文件:

  1. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> 

当然这个jq库在网上也有很多下载,你可以下载下来放在自己的服务器来引用。

实例显示跟隐藏:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> 
  5. <script type="text/javascript"> 
  6. $(document).ready(function(){ 
  7.   $("#hide").click(function(){ 
  8.   $("p").hide(1000); 
  9.   }); 
  10.   $("#show").click(function(){ 
  11.   $("p").show(1000); 
  12.   }); 
  13. }); 
  14. </script> 
  15. </head> 
  16. <body> 
  17. <button id="hide" type="button">隐藏</button> 
  18. <button id="show" type="button2">显示</button> 
  19. <p>微意网络科技!</p> 
  20. <p>分享你所想的!</p> 
  21. </body> 
  22. </html> 

我们可以把代码粘贴到下面运行一下来看看:

提示:您可以先修改部分代码再运行

是不是比起js来要温柔很多啊。

转载请注明出处:微意技术博客 - http://www.lovevy.cc//javascript/2016/0709/57.html

评论