溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關jQuery如何隱藏和顯示HTML元素的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
jQuery 效果
jQuery 可以有多種效果：隱藏、顯示、切換，滑動，淡入淡出，以及動畫，等等！
jQuery hide() 簡單實例
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果您點擊我，我會消失。</p>
<p>點擊我，我會消失。</p>
<p>也要點擊我哦。</p>
</body>
</html>注釋：本實例演示了一個簡單的 jQuery hide() 方法。下面的實例演示如何隱藏部分文本：
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.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>
<h4>中國辦事處</h4>
<div class="ex">
<button class="hide" type="button">隱藏</button>
<p>聯系人：張先生<br />北三環中路 100 號<br />北京</p>
</div>
<h4>美國辦事處</h4>
<div class="ex">
<button class="hide" type="button">隱藏</button>
<p>聯系人：David<br />第五大街 200 號<br /> 紐約</p>
</div>
</body>
</html>
jQuery hide() 和 show()
通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素，語法如下：
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。
<!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>下面的例子演示了帶有 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() 方法。語法如下：
$(selector).toggle(speed,callback);
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 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();
});
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>注釋：點擊切換按鈕會隱藏已顯示的元素，再次點擊則會顯示被隱藏的元素。
感謝各位的閱讀！關于“jQuery如何隱藏和顯示HTML元素”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
