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

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

2016-02-28 14:11 696 查看

我们所以会使用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>

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

标签：

相关文章推荐

新的分享

章节导航