ตัวเลือก hidden
ตัวเลือก :hidden เลือกองค์ประกอบทั้งหมดบน
หน้าเว็บที่ถูกซ่อนอยู่
องค์ประกอบที่มี visibility: hidden หรือ
opacity: 0 จะถือว่ายังมองเห็นได้ เนื่องจากยังคงครองพื้นที่
ในเลย์เอาต์ องค์ประกอบอาจถือว่ามองไม่เห็น
ได้ด้วยหลายสาเหตุ: ค่าของคุณสมบัติ css
display เป็น none, หรือเป็นองค์ประกอบที่มี
แอตทริบิวต์ type="hidden",
หรือความสูงหรือความกว้างของมันถูกตั้งเป็น 0,
หรือองค์ประกอบแม่ของมันถูกซ่อนอยู่
เนื่องจาก :hidden ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด CSS,
เพื่อปรับปรุงประสิทธิภาพใน
เบราว์เซอร์รุ่นใหม่ ควรกรององค์ประกอบตั้งแต่แรกด้วย
การใช้ตัวเลือก css ล้วนๆ แล้วจึง
ค่อยใช้ .filter(':hidden')
การติดตามสถานะการมองเห็นขององค์ประกอบด้วยวิธีอื่น
ตัวอย่างเช่น การใช้คลาส อาจ
ทำให้มีประสิทธิภาพที่ดีกว่า
ไวยากรณ์
นี่คือวิธีเลือกองค์ประกอบที่ซ่อนอยู่:
javascript$(':hidden');
ตัวอย่าง
ลองทำให้เมื่อคลิกที่ปุ่ม #test
แสดงสี่เหลี่ยมจัตุรัสที่มองไม่เห็น:
html<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>cssdiv {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}javascript$('#test').click(function() {
$('div:hidden').show('slow');
});