jquery如何實(shí)現(xiàn)元素的隱藏或顯示效果?這篇文章為大家介紹jquery如何設(shè)定元素的隱藏或顯示,讓大家了解實(shí)現(xiàn)元素隱藏和顯示相互切換效果的方法。有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你們有幫助。
jquery實(shí)作元素隱藏和顯示效果有兩種方法,分別為:
##1、使用hide() 和show() 方法來(lái)隱藏和顯示元素
2 、使用toggle() 方法來(lái)隱藏和顯示元素
下面我們來(lái)看看這兩種方法具體是如何實(shí)現(xiàn)元素的隱藏和顯示。
hide() 和show() 方法實(shí)作隱藏和顯示元素
#jquery的hide()方法用來(lái)隱藏元素
jquery的show()方法用來(lái)顯示元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>這是一段測(cè)試文字。</p>
<button class="btn1">Hide--隱藏</button>
<button class="btn2">Show--顯示</button>
</body>
</html>
效果圖:

#點(diǎn)擊隱藏按鈕,就可以使用hide()方法來(lái)隱藏元素:

點(diǎn)選顯示按鈕,就可以使用show()方法來(lái)顯示被隱藏的元素:

toggle() 方法實(shí)作隱藏與顯示元素(隱藏或顯示的切換)
#toggle() 方法可以切換元素的可見(jiàn)狀態(tài),即:切換元素的隱藏或顯示。
toggle() 方法會(huì)判斷元素的隱藏或顯示,如果被選元素可見(jiàn),則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("p").toggle();
});
</script>
</head>
<body>
<p>這是一段測(cè)試文字。</p>
<button class="btn">toggle()</button>
</body>
</html>
效果圖:

注意:使用jquery方法,無(wú)論是hide()、show()、toggle(),或是其他方法,都要先引用jquery.js檔。
總結(jié):以上就是jquery實(shí)作元素的隱藏或顯示效果的全部?jī)?nèi)容,程式碼很簡(jiǎn)單,代價(jià)可以自己試試看。希望能對(duì)大家的學(xué)習(xí)有所幫助,更多相關(guān)教學(xué)請(qǐng)?jiān)煸L
jQuery影片教學(xué),JavaScript影片教學(xué),bootstrap影片教學(xué)!
以上是jquery如何實(shí)現(xiàn)元素的隱藏或顯示效果(程式碼實(shí)例)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!