jQuery隱藏元素的hide方法

在我們想要隱藏頁面中的某個(gè)元素時(shí)，我們會(huì)想到使用css樣式中的hover偽類。通過給元素設(shè)置hover屬性從而達(dá)到一個(gè)隱藏效果。

但是這個(gè)方法只適用于隱藏少部分的元素，在后期我們還想要將其他元素進(jìn)行隱藏的時(shí)候會(huì)很麻煩，需要一個(gè)一個(gè)的添加屬性。

接下來我們將學(xué)會(huì)如何使用jQuery隱藏元素hide。

首先先搭建好頁面基礎(chǔ)樣式，放幾個(gè)button標(biāo)簽作為按鈕：

其次我們給標(biāo)簽設(shè)置css樣式，button標(biāo)簽我們用作為點(diǎn)擊事件的。

div標(biāo)簽就作為我們需要隱藏的元素。

我們需要實(shí)現(xiàn)的效果是，當(dāng)我們點(diǎn)擊它們相對(duì)應(yīng)的按鈕時(shí)會(huì)觸發(fā)相對(duì)應(yīng)的效果。

當(dāng)我們點(diǎn)擊到方塊一的隱藏元素按鈕時(shí)，我們的div1方塊就要進(jìn)行一個(gè)隱藏操作，點(diǎn)擊顯示按鈕時(shí)div1方塊就要顯示出來。

同理第二個(gè)方塊也是同樣的操作，當(dāng)我們第一次點(diǎn)擊按鈕的時(shí)候方塊就需要隱藏起來，第二次點(diǎn)擊就要進(jìn)行顯示。

這里需要注意我們?cè)趦蓚€(gè)方塊的樣式中都設(shè)置了hover偽類。hover屬性中包含樣式只會(huì)在我們鼠標(biāo)移到方塊上的時(shí)候顯示。想要進(jìn)行隱藏效果還是需要display屬性。

第二個(gè)方塊中我們運(yùn)用到了css動(dòng)畫，分別設(shè)置了動(dòng)畫運(yùn)行的時(shí)間，播放函數(shù)以及次數(shù)等（看圖片注釋）。

接下來進(jìn)入正題，兩個(gè)方塊我們使用不同的方法進(jìn)行效果演示。首先方塊一我們直接使用hide（）方法。

先介紹一下speed是指動(dòng)畫運(yùn)行的時(shí)間

• easing：（Optional）是指切換效果
• fn：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次

在我們了解后將他們帶入到方法中使用，動(dòng)畫運(yùn)行的時(shí)間是可以隨意改動(dòng)的?？梢詫⑺臄?shù)值改大改小，這是我們會(huì)發(fā)現(xiàn)動(dòng)畫運(yùn)行的速度會(huì)大不同。

點(diǎn)擊運(yùn)行就可以看到方塊一的隱藏和顯示效果。要記得再寫jQuery代碼的時(shí)候一定要插jQuery插件，否則會(huì)報(bào)錯(cuò)。

這里可以看到div1方塊已經(jīng)被我們隱藏了，接下來是toggle（）方法。

仔細(xì)觀察我們會(huì)發(fā)現(xiàn)其實(shí)兩種方法之間的差別不是很大，只是toggle（）方法要相對(duì)應(yīng)的簡潔更加的方便。

因?yàn)槲覀兘o第二方塊設(shè)置了動(dòng)畫效果，所以在我們點(diǎn)擊按鈕的時(shí)候也會(huì)觸發(fā)css動(dòng)畫效果。他會(huì)慢慢地消失，慢慢的出現(xiàn)。效果就需要自己慢慢的查看了。

jquery設(shè)置元素的顯示、隱藏

1.show()、hide()

• $(“#id”).show()表示為display：block;
• $(“#id”).hide()表示為display:none;
• $(“#id”).toggle()切換元素的可見狀態(tài)。如果元素是可見的，切換為隱藏的；如果元素是隱藏的，則切換為可見的。

2.display

$(“#id”).css(‘display',‘none');//隱藏
$(“#id”).css(‘display',‘block');//顯示

或者

$(“#id”)[0].style.display=‘none';//隱藏
$(“#id”)[0].style.display=‘block';//顯示

3.visibility

$(“#id”).css(‘visibility',‘hidden');//元素隱藏
$(“#id”).css(‘visibility',‘visible');//元素顯示

區(qū)別：

• display:none —不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁面上徹底消失，通俗來說就是看不見也摸不到。
• visibility:hidden— 使對(duì)象在網(wǎng)頁上不可見，但該對(duì)象在網(wǎng)頁上所占的空間沒有改變，即它仍然具有高度、寬度等屬性，通俗來說就是看不見但摸得到。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論