码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 效果

时间:2018-09-28 20:32:33      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:html   消失   llb   函数   slow   doctype   另一个   分享   splay   

jQuery 隐藏/显示(hide()/show()):

技术分享图片
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
实例

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow","fast"或毫秒.

可选的 callback 参数是隐藏或显示完成后所执行的函数名称.

下面的例子演示了带有 speed 参数的hide()方法:

技术分享图片
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
实例

 

jQuery toggle()

通过 jQuery,可以使用toggle() 方法来切换hide()和show()方法.

显示被隐藏的元素,并隐藏已显示的元素:

技术分享图片
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
实例

 

<hr>

jQuery 效果

标签:html   消失   llb   函数   slow   doctype   另一个   分享   splay   

原文地址:https://www.cnblogs.com/zbw582922417/p/9720392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!