jQuery-show()与html()及hide()用法 学习笔记四

测试小程序段代码:

  1. .....
  2. <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  3. <script type="text/javascript"> 
  4. $(document).ready(function(){
  5. $("a").addClass("test").show().html("新添加数据");
  6. //对比:$("a").addClass("test").html("新添加数据二");
  7. }); 
  8. </script> 
  9. <style>
  10. .test
  11. {
  12. color:red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <a href="http://blog.csdn.net/lansky07/">
  18. 原来数据
  19. </a> 
  20. <br>
  21. <a href="http://blog.csdn.net/lansky07/" style="display:none;">
  22. 原来数据二
  23. </a> 
  24. .....

解释一下上面测试程序的意思:

首先增加样式,
然后
show( ):显示隐藏的匹配元素,两个链接都显示了出来。
html("新添加数据*"):设置每一个匹配元素的html内容

我们发现 超连接里面的内容原来数据 已经被替换了成新添加数据.并且有两个链接.效果如下:

 

注意注释了的对比的那条语句,现在把原来的的语句注释,而把对比语句注释去除,其效果为如下:

 

更详细的show()、html()可以参考API。

下面说一下hide()用法,测试程序代码片段如下:

  1. .....
  2. <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5. $("a").click(function(){
  6.     $(this).hide("slow");
  7.     return false;
  8. }); 
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. <a href="http://blog.csdn.net/lansky07/">
  14.     现在,只要你点击超链接,超链接就会慢慢的消失。<br/>
  15.    “return false"表示保留默认行为,因此页面不会跳转。
  16. </a>
  17. .....

效果通过测试可以看到,正如程序刚运行显示的提示效果:点击超链接,超链接就会慢慢的消失,页面不会跳转--这是语句:return false的结果。在程序中$(this)  表示前面的$("a")对象。

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值