:হিডেন সিলেক্টর(:hidden Selector) : জে-কোয়েরী -(পর্ব-১৯)


এটি লুকায়িত (hidden) element কে select করবে। নিম্নক্ত কারন গুলির জন্য কোন element কে hidden বলে বিবেচনা করা হয় -

  1. যদি কোন element এর CSS display value none থাকে (display:none)।
  2. যদি কোন form element এর type="hidden" থাকে।
  3. যদি কোন element এর width এরং hidth 0(zero) set করা হয় (width="0" height="0")।
  4. যদি কোন element এর ancestor element hidden হয়, যার ফলে element টিকে দেখা যাচ্ছেনা।

[বি:দ্র: যদি কোন element এর visibility :hidden অথবা opacity :0 থাকে তবে ঐ element টি যতক্ষন পর্যন্ত layout এ space ধরে রাখরে, ততক্ষন পর্যন্ত সেটি hidden হিসেবে বিবেচ্য হবেনা। যেমন, কোন animation এর সময়, যতক্ষন পর্যন্ত animation টি শেষ না হবে ততক্ষণ পর্যন্ত element টি visible হিসেবে বিবেচ্য হবে।]

উদাহরন Code :

নিম্নের উদাহরন টি সকল hidden div এবং hidden input element গননা করবে।
[sourcecode language="html"]
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:70px;
height:40px;
background:#ee77ff;
margin:5px; float:left;
}
span {
display:block;
clear:left;
color:red;
}
.starthidden {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>

<div class="starthidden">Hider!</div>
<div></div>
<form>
<input type="hidden" />

<input type="hidden" />
<input type="hidden" />
</form>
<span>

</span>
<script>
// in some browsers :hidden includes head, title, script, etc...
var hiddenEls = $("body").find(":hidden").not("script");

$("span:first").text("Found " + hiddenEls.length + " hidden elements total.");
$("div:hidden").show();
$("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
</script>

</body>
</html>
[/sourcecode]

ফলাফল(output):

Selector Example

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করলাম। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

Leave a Comment