js中定义一个全局的boolean变量，jquery中对button进行隐藏和显示

最新推荐文章于 2021-06-28 15:34:55 发布

u010746364

最新推荐文章于 2021-06-28 15:34:55 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/u010746364/article/details/53317260

版权

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
window.isMoused=false; <!--定义一个全局变量-->
$(document).ready(function(){
$("button").mouseover(function(){

if (window.isMoused) { <!--对boolean型的全局变量进行操作-->
$("p").show(); <!--显示-->
}
else {
$("p").hide(); <!--隐藏-->
}
window.isMoused = !window.isMoused;

});
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

（1）注意：双击时间是dblclick而不是dbclick。

$("button").dblclick(function(){

if (window.isMoused) { <!--对boolean型的全局变量进行操作-->
$("p").show(); <!--显示-->
}
else {
$("p").hide(); <!--隐藏-->
}

（2）ready事件

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）

（3）

注意：（1）这里定义一个全局的boolean变量window.isShow，而不是var window.isShow这样子定义；

（2）这里$("p").hide(1000)和$("p").show(1000)带上参数，表示时间，慢慢的隐藏；

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
window.isShow=true;
$(document).ready(function(){
  $("button").click(function(){
  if (window.isShow) {
  $("p").hide(1000);
  } else {
  $("p").show(1000);
  }
  window.isShow=!window.isShow;
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

等价于toggle()

<!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(1000);
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

（4）$(selector).hide(speed,callback);使用这里的回调方法，

从这里弹出两次alert对象框可以看出，$("p")表示的是所有的p标签，那么就会对所有的p标签执行hide事件了，所以弹出了两次alert对话框。

<!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, function() {
      alert("coding");
  });
  });
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

u010746364

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中定义一个全局的boolean变量，jquery中对button进行隐藏和显示

window.isMoused=false; $(document).ready(function(){$("button").mouseover(function(){if (window.isMoused) { $("p").show(); }else {$("p").hide(); }window.isMoused = !window.isMoused;});});
复制链接

扫一扫