jQuery 3.3 - :visible selector

: محدد المرئي




jquery

محدد واضح

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

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

تعتبر العناصر مرئية إذا كانت تستهلك مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر.

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

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

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

تعتبر جميع عناصر option مخفية ، بغض النظر عن حالتها selected .

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

كيف :visible تم حساب :visible تم تغييره في jQuery 1.3.2. توضح ملاحظات الإصدار التغييرات بمزيد من التفصيل.

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

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

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

مثال:

اجعل جميع الأقسام المرئية تتحول إلى اللون الأصفر عند النقر.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>visible demo</title>
  <style>
  div {
    width: 50px;
    height: 40px;
    margin: 5px;
    border: 3px outset green;
    float: left;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
 
<script>
$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});
</script>
 
</body>
</html>

عرض: