您的位置：首页 > Web前端 > JQuery

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

2008-11-27 16:50 781 查看

测试小程序段代码：

.....

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

.....

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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