jQuery效果(一)——隐藏/显示

最新推荐文章于 2021-08-11 00:28:54 发布

furway

最新推荐文章于 2021-08-11 00:28:54 发布

阅读量346

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/furway/article/details/51893025

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery 隐藏/显示

语法:

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

eg1:

<!DOCTYPE html>
<html>
<head>
<script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>

<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});

});
</script>
</head>

<body>
<p>田红玲，我爱你。</p>
<p>傻逼，田红玲。</p>
<p>滚蛋,田红玲。</p>
</body>
< html>

eg2:

<!DOCTYPE html>
<html>
<head>
<script src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
$(".ex.hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>

<style type="text/css">

div.ex{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}

</style>
</head>

<body>

<h3>我爱你</h3>

<div class="ex">
<button class="hide" type="button">隐藏< tton>
<p>姓名：田红玲 <br />
田大大<br />
田傻逼</p>
</div>

</body>
<ht ml>

jQuery toggle()

使用toggle()方法来切换hide()和show()方法。

<!DOCTYPE html>
<html>
<head>

<script  src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
<script type="text/javascript">

$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});

</script>

</head>

<body>

<button type="button">切换<bu tton>

<p>这是个段落</p>
</body>
< html>

furway

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果(一)——隐藏/显示

jQuery 隐藏/显示语法:$(selector).hide(speed,callback);$(selector).show(speed,callback);eg1:http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">$(document).ready(function(){$
复制链接

扫一扫

专栏目录