হিডেন সিলেক্টর
সিলেক্টর :hidden পৃষ্ঠার সমস্ত এমন এলিমেন্ট নির্বাচন করে,
যেগুলো লুকানো।
visibility: hidden বা
opacity: 0 সহ এলিমেন্টগুলো দৃশ্যমান হিসাবে বিবেচিত হয়, কারণ সেগুলো লেআউটে জায়গা দখল করে।
বিভিন্ন কারণে এলিমেন্টগুলো অদৃশ্য হিসাবে বিবেচিত হতে পারে: CSS প্রপার্টি
display-এর মান - none, অথবা এগুলো এমন এলিমেন্ট যেগুলোর
type="hidden" অ্যাট্রিবিউট আছে,
অথবা তাদের উচ্চতা বা প্রস্থ 0-এ সেট করা আছে,
অথবা তাদের প্যারেন্ট এলিমেন্ট লুকানো।
যেহেতু :hidden CSS স্পেসিফিকেশনের অংশ নয়,
তাই আধুনিক ব্রাউজারে পারফরম্যান্স উন্নত করার জন্য প্রথমে খাঁটি CSS সিলেক্টর ব্যবহার করে
এলিমেন্ট ফিল্টার করা ভাল, তারপর
.filter(':hidden') অ্যাপ্লাই করুন।
অন্য মেথড ব্যবহার করে, যেমন ক্লাস ব্যবহার করে, এলিমেন্টের দৃশ্যমানতা ট্র্যাক করা
বেশি ভাল পারফরম্যান্স দিতে পারে।
সিনট্যাক্স
এভাবেই আমরা লুকানো এলিমেন্ট নির্বাচন করি:
$(':hidden');
উদাহরণ
চলুন #test বাটনে ক্লিক করে
অদৃশ্য বর্গক্ষেত্রগুলো দেখাই:
<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('#test').click(function() {
$('div:hidden').show('slow');
});
