首頁 > web前端 > js教程 > 主體

jquery怎麼樣判斷元素是否隱藏起來

coldplay.xixi
發布: 2023-01-04 09:37:59
原創
2839 人瀏覽過

jquery判斷元素是否隱藏的方法:1、使用CSS屬性,程式碼為【var display =$('#id').css('display');】;2、使用jquery內建選擇器,程式碼為【if($("#test").is(":hidden")】。

jquery怎麼樣判斷元素是否隱藏起來

本教學操作環境:windows7系統、jquery3 .2.1版本,DELL G3電腦。

推薦:jquery影片教學

jquery判斷元素是否隱藏的方法:

#1:使用CSS屬性

程式碼如下:

var display =$('#id').css('display');
if(display == 'none'){
   alert("被你发现了,我是隐藏的啦!");
}
登入後複製

#2:使用jquery內建選擇器

假設我們頁面有這麼個標籤,

程式碼如下:

<div id="test">
<p>仅仅是测试所用</p>
</div>
登入後複製

那麼,我們可以用以下語句來判斷id為"test"的標籤是否隱藏:

程式碼如下:

if($("#test").is(":hidden")){...} //前提是已经将jQuery的库导进来了
登入後複製

這樣,我們就能夠很簡單地判斷一個元素是否隱藏,並根據其狀態來設定動畫,比如:

程式碼如下:

if($("#test").is(":hidden")){
       $("#test").show();    //如果元素为隐藏,则将它显现
}else{
      $("#test").hide();     //如果元素为显现,则将其隐藏
}
登入後複製

3 :jQuery判斷元素是否顯示是否隱藏

程式碼如下:

var node=$(&#39;#id&#39;);
登入後複製

第一種寫法

程式碼如下:

if(node.is(&#39;:hidden&#39;)){  //如果node是隐藏的则显示node元素,否则隐藏
  node.show(); 
}else{
  node.hide();
}
登入後複製

#第二種寫法

程式碼如下:

if(!node.is(&#39;:visible&#39;)){  //如果node是隐藏的则显示node元素,否则隐藏
  node.show(); 
}else{
  node.hide();
}
if(node.is(&#39;:visible&#39;)){  //如果node是显示的则隐藏node元素,否则显示
  node.hide();
}else{
  node.show();
}
登入後複製

相關免費學習推薦:javascript (影片)

以上是jquery怎麼樣判斷元素是否隱藏起來的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!