الفرق بين المراجعتين لصفحة: «jQuery/hidden selector»

مرئينص الويكي

المراجعة الحالية بتاريخ 10:33، 29 مايو 2018

المحدد `‎:hidden()‎`

الوصف

يختار هذا المحدد كل العناصر المخفية.

`jQuery( ":hidden" )‎`

أُضيف مع الإصدار: 1.0.

يمكن للعناصر أن تُعد مخفية لعدة أسباب منها:

أن تطبق الخاصية display: none عليها.
هي حقول من حقول النماذج التي لها الخاصية type="hidden"‎.
ضبطت قيمة طولها وعرضها إلى 0.
العنصر الأب مخفي، مما يعني أن العنصر الابن مخفي أيضًا ولا يظهر في الصفحة.

العناصر التي لها الخاصية visibility: hidden أو الخاصية opacity: 0 تعدّ مرئية رغم أنها لا تظهر في الشاشة إلا أنها ما زالت تحتل جزءًا من الصفحة. خلال تطبيق الحركات التي تخفي عنصرًا ما، يعدُّ هذا العنصر مرئيًا حتى نهاية الحركة.

العناصر التي لا توجد في الصفحة لا تعدّ مرئية. لا تمتلك jQuery طريقة لمعرفة إذا ما ستكون هذه العناصر مرئية عند إضافتها إلى صفحة معينة إذ يتعلق ذلك بالتنسيق المطبق آنذاك.

هذا المحدِد هو عكس المحدد ‎:visible، لهذا يمكننا القول أن كل عنصر يُحدَّد باستعمال المحدد hidden: لن يُحدد باستعمال المحدد visible: والعكس صحيح.

خلال الحركات التي تظهر عنصرًا ما، يعدُّ هذا العنصر مرئيًا من بداية الحركة.

لقد تغيرت آلية عمل المحدد ‎:hidden في الإصدار jQuery 1.3.2. يعدُّ عنصر ما مخفيًا إن لم يستهلك هو أو أحد من آبائه أي مساحة من الصفحة. الخاصية visibility في CSS لا تؤخذ بالحسبان لأنها لا تخفي العنصر بشكل جذري، وبالتالي فإنَّ ‎$( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false.

غيّرت jQuery 3 معنى المُحدِّد ‎:hidden (وبالتالي المُحدِّد ‎:visible) قليلًا، وبدءًا من هذا الإصدار، أصبحت العناصر تُعدّ على أنها ‎:hidden إذا لم يكن لها صناديق (layout box)، وبالتالي لم تعد تُحدَّد عناصر <br> والعناصر السطرية (inline elements) التي لا تملك محتوى باستخدام المُحدِّد ‎:hidden.

ملاحظات إضافية

لمّا كان المحدد hidden: هو ملحق في مكتبة jQuery وليس جزءًا من مواصفة CSS، فإن الاستعلامات التي تستعمل المحدد hidden: لا يمكنها الإستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي ()querySelectorAll. للحصول على أداء أفضل عند استعمال المحدد hidden: لاختيار العناصر، يجب تحديد العناصر باستعمال محددات CSS الصرفة (pure) وبعد ذلك استعمال التابع ‎.filter(":hidden")‎.

إن استعمال هذا المحدد بكثرة يمكن أن يؤثر على أداء الشيفرة، ويمكنه أيضًا أن يفرض على المتصفح أن يعيد عرض الصفحة (re-render) قبل أن يحدد الخاصية visibility لكل عنصر. لذلك ينصح تتبع إذا كان العنصر ظاهرًا باستعمال طرائق أخرى، مثل استعمال أصناف، فهذا يساعد على تحسين أداء الشيفرة.

أمثلة

إظهار كل العناصر <div> المخفية وعد العناصر <input> المخفية:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>hidden demo</title>
 <style>
 div {
   width: 70px;
   height: 40px;
   background: #e7f;
   margin: 5px;
   float: left;
 }
 span {
   display: block;
   clear: left;
   color: red;
 }
 .starthidden {
   display: none;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.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>
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
$( "span:first" ).text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span:last" ).text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
</script>
</body>
</html>

مصادر

صفحة المحدد ‎‎:hidden()‎‎ في توثيق jQuery الرسمي.

@@ سطر 10: / سطر 10: @@
 يمكن للعناصر أن تُعد مخفية لعدة أسباب منها:
 * أن تطبق الخاصية <code>[[CSS/display|display: none]]</code> عليها.
-* هي حقول من حقول النماذج  التي لها الخاصية <code>type="hidden"‎</code>.
+* هي حقول من حقول النماذج  التي لها الخاصية <code>type="[[HTML/input/hidden|hidden]]"‎</code>.
 * ضبطت قيمة طولها وعرضها إلى 0.
 * العنصر الأب مخفي، مما يعني أن العنصر الابن مخفي أيضًا ولا يظهر في الصفحة.