`

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

HTMLjQueryJavaScript.netBlog 
阅读更多

测试小程序段代码：

  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内容

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

见附件1

 

 

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

见附件2

 

 

更详细的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
  • 大小: 3.2 KB
  • 描述: 附件2
  • 大小: 3.2 KB
分享到：
| (转)公司正式宣布创业失败
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics