jQuery 元素可見性判斷：:hidden 與 :visible 選擇器完整用法

核心選擇器

jQuery 提供兩個與可見性相關的偽類選擇器：

• :hidden — 匹配所有隱藏的元素
• :visible — 匹配所有可見的元素

判斷依據

元素被視為「隱藏」的條件任一滿足即可：

1. CSS display: none
2. 表單元素 type="hidden"
3. 寬高均為 0
4. 祖先元素隱藏（導致自身不可見）
5. opacity: 0、visibility: hidden 不算 隱藏（仍佔據佈局空間）

實戰範例

HTML 結構

<form id="formID">
    <input id="inputID" type="text" style="display: none" />
</form>

判斷元素是否可見

<script>
// 方法 1：使用 .is() 篩選
if ($("#inputID").is(":visible")) {
    console.log("元素可見");
} else {
    console.log("元素隱藏");
}

// 方法 2：直接檢查 CSS display (不推薦，無法覆蓋祖先隱藏情況)
if ($("#inputID").css("display") === "none") {
    console.log("display 為 none");
}
</script>

判斷元素是否隱藏

<script>
if ($("#elem_id").is(":hidden")) {
    // 元素隱藏時的邏輯
    $("#elem_id").show(); // 顯示它
}
</script>

進階用法

統計頁面可見/隱藏元素數量

var visibleCount = $(":visible").length;
var hiddenCount = $(":hidden").length;
console.log("可見:", visibleCount, "隱藏:", hiddenCount);

僅對可見元素綁定事件

$("button:visible").on("click", function() {
    // 僅當按鈕可見時觸發
});

動畫完成後再判斷

$("#box").fadeOut(400, function() {
    // 動畫結束後，:hidden 才會匹配
    if ($(this).is(":hidden")) {
        console.log("淡出完成，已隱藏");
    }
});

常見誤區

性能提示

• :visible/:hidden 是 jQuery 擴展選擇器，無法利用瀏覽器原生 querySelectorAll，大量元素時較慢。
• 頻繁判斷時，建議緩存 jQuery 對象：var $el = $("#id"); if ($el.is(":visible")) ...
• 僅需檢查 display 時，直接用 el.style.display === 'none' 或 getComputedStyle(el).display === 'none' 更高效。