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

62 阅读 0 评论 41 点赞

我是靠谱客的博主土豪自行车，这篇文章主要介绍js中定义一个全局的boolean变量，jquery中对button进行隐藏和显示，现在分享给大家，希望可以做个参考。

<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>