jQuery 3.3 - :hidden selector

: مختفي المختار




jquery

مختفي مخفي

الوصف: يحدد كل العناصر المخفية.

  • الإصدار المضاف: 1.0 jQuery (": hidden")

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

  • لديهم قيمة display CSS none .
  • وهي عناصر شكلية type="hidden" .
  • يتم تعيين العرض والارتفاع بشكل صريح إلى 0.
  • عنصر السلف مخفي ، لذلك لا يظهر العنصر على الصفحة.

العناصر ذات visibility: hidden أو opacity: 0 تعتبر مرئية ، لأنها لا تزال تستهلك مساحة في التخطيط. أثناء الحركات المتحركة التي تخفي عنصرًا ، يُعتبر العنصر مرئيًا حتى نهاية الرسم المتحرك.

العناصر التي ليست في وثيقة لا تعتبر مرئية ؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط السارية.

هذا المحدد هو عكس :visible المحدد :visible . لذلك ، لا يتم تحديد كل عنصر محدد بواسطة :hidden بواسطة :visible والعكس.

أثناء الرسوم المتحركة لإظهار عنصر ، يعتبر العنصر مرئيًا في بداية الرسم المتحرك.

كيف :hidden تم تحديد :hidden في jQuery 1.3.2. يفترض أن يكون العنصر مخفيًا إذا لم يستهلك أي من الآباء أي مساحة في المستند. لا تؤخذ رؤية CSS بعين الاعتبار (وبالتالي $( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false ). توضح ملاحظات الإصدار التغييرات بمزيد من التفصيل.

jQuery 3 يعدل قليلاً معنى :hidden (وبالتالي من :visible ). بدءًا من هذا الإصدار ، سيتم النظر في العناصر :hidden إذا لم يكن لديها أي مربعات تنسيق. على سبيل المثال ، لن يتم تحديد عناصر br والعناصر المضمنة التي لا تحتوي على محتوى بواسطة :hidden select :hidden .

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

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

مثال:

يعرض جميع الخفية divs وتعول المدخلات المخفية.

<!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>
// In some browsers :hidden includes head, title, script, etc...
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>

عرض: