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

最新推荐文章于 2021-06-20 01:45:40 发布

lansky07

最新推荐文章于 2021-06-20 01:45:40 发布

阅读量8.5k

点赞数

分类专栏： jQuery 文章标签： html function 测试 api

本文链接：https://blog.csdn.net/lansky07/article/details/3392404

版权

jQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

测试小程序段代码：

 
 .....
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$("a").addClass("test").show().html("新添加数据");
//对比：$("a").addClass("test").html("新添加数据二");
}); 
</script> 
<style>
.test
{
color:red;
}
</style>
</head>
<body>
<a href="http://blog.csdn.net/lansky07/">
原来数据
</a> 
<br>
<a href="http://blog.csdn.net/lansky07/" style="display:none;">
原来数据二
</a> 
.....
 

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

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

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

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

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

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

 
 .....
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
    $(this).hide("slow");
    return false;
}); 
});
</script>
</head>
<body>
<a href="http://blog.csdn.net/lansky07/">
    现在，只要你点击超链接，超链接就会慢慢的消失。<br/>
   “return false"表示保留默认行为，因此页面不会跳转。
</a>
.....
 