jQuery中用来让元素显示和隐藏的函数

来源：互联网发布：网络违法行为查处编辑：程序博客网时间：2024/05/18 21:49

我们所以会使用jQuery，是因为在这个jQuery这个库中有很多的函数已经写好，我们可以直接拿过来去用，于是我们知道了解一些函数是非常重要的，在这个地方我们就介绍一些函数。

首先介绍的函数是如何让html标签隐藏的标签

隐藏函数:hide(),这个函数的完整版是hide(speed,callback);

第一个参数是speed是表示隐藏的速度，第二个是callback是在隐藏之后要调用的函数

显示函数:show()这个函数的完整版是show(speed,callback);

这个函数的第一个参数是是显示的速度，第二个参数是在html标签显示之后要调用的函数。

显示隐藏函数:toggle()，一样的这个函数也有两个参数，这个函数是上面两个函数的概括，当html标签

状态是隐藏的时候，调用这个函数会显示html标签。当html标签是显示的时候，调用这个函数会将html标签显示。

当然如果仅仅这些函数是不能满足可爱的用工的程序员的满足的，对于html标签我们不想看到她，或者是想看到她的时候可以让她淡入或者是淡出。怎样让元素淡入或者是淡出。

fadeIn()是将已经隐藏的元素淡入到屏幕上这个函数一样有两个参数，和上面的一样，在这个地方也不说了。

fadeOut()这个函数是将屏幕上的html元素淡出，一样的有两个参数。

fadeToggle()这个函数，我们自动的会想到html元素的淡入和淡出都会可以做到

fadeTo()这个函数是允许渐变为给定的不透明度，这函数有三个参数(speed,opacity,callback);第二个参数就是我们为淡入淡出设置的不透明度。数值在0到1之间。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function(){

$("#hide").click(function(){
$(".form1").hide();
});
$("#show").click(function(){
$(".form1").show();
});
//当textarea获取焦点的时候，将背景颜色设置为红色
$("textarea").focus(function(){
$(this).css("background-color","#cccccc");
});
$("textarea").blur(function(){
$(this).css("background-color","white");
});
$(":button").click(function(){
// document.write(document.getElementById('text1').value);
document.getElementById("p2").innerHTML=document.getElementById('text1').value;
$("#p2").css("display","block");
});
$("button.b1").click(function(){
$(".div1").fadeIn();
$(".div2").fadeIn("slow");
$(".div3").fadeIn(1000);
});
$("button.b2").click(function(){
$(".div1").fadeOut();
$(".div2").fadeOut("slow");
$(".div3").fadeOut(1000);
});
$("button.b3").click(function(){
setTimeout(function(){
$(".div1").fadeToggle();
$(".div2").fadeToggle("slow");
$(".div3").fadeToggle(1000);
},2000);
});

});
</script>
<style type="text/css">
.img1
{
width: 200px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<p>今天我要好好的学习，了解JQuery的一些函数</p>
<img src="image\wang.jpg" class="img1">
<p id="show" style="cursor:pointer"><strong>评论</strong></p>
<form class="form1" style="display:none">
<p>评论一下吧:</p>
<textarea id="text1"cols="40" rows="10">
</textarea><br>
<button type="button">评论</button>
<p id="p2" style="display:none"></p>
<p id="hide"style="display:inline;cursor:pointer">收起</p>
</form>
<p>是否占用了空间</p>


<button class="b1">点击我看有什么变化</button>
<button class="b2">点击我将刚才隐藏的元素显示</button>
<button class="b3">点击我会会有怎样的变化</button>
<div class="div1" style=" display:none;width:100px; height:100px; background-color:red;"></div><br/>
<div class="div2" style="width:100px; display:none; height:100px; background-color:green;"></div><br/>
<div class="div3" style="width:100px; height:100px; display:none; background-color:yellow;"></div>
</body>
</html>

0 0