الفرق بين المراجعتين ل"jQuery/visible selector"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:المحدد <code>:visible()</code>...') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المحدد <code>:visible()</code> في jQuery}}</noinclude> | <noinclude>{{DISPLAYTITLE:المحدد <code>:visible()</code> في jQuery}}</noinclude> | ||
| − | == المحدد :visible == | + | == المحدد <code>:visible</code> == |
=== الوصف === | === الوصف === | ||
| سطر 8: | سطر 8: | ||
أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | أُضيف مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | ||
| − | + | تعدّ العناصر مرئية إذا كانت تشغل مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر. | |
| − | العناصر ذات الخاصية <code>visibility: hidden</code> أو <code>opacity: 0</code> | + | العناصر ذات الخاصية <code>[[CSS/visibility|visibility]]: hidden</code> أو <code>[[CSS/opacity|opacity]]: 0</code> تعدّ مرئية، نظرًا لأنها لا تزال تستهلك مساحة في تخطيط الصفحة. |
| − | + | تعدّ العناصر غير الموجودة في المستند مخفية؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط المُطبّقة. | |
هذا المحدد هو عكس المحدد <code>[[jQuery/hidden selector|:hidden]]</code>. لذلك، كل عنصر مُحدد بواسطة <code>:visible</code> يكون غير مُحدد بواسطة <code>[[jQuery/hidden selector|:hidden]]</code> والعكس بالعكس. | هذا المحدد هو عكس المحدد <code>[[jQuery/hidden selector|:hidden]]</code>. لذلك، كل عنصر مُحدد بواسطة <code>:visible</code> يكون غير مُحدد بواسطة <code>[[jQuery/hidden selector|:hidden]]</code> والعكس بالعكس. | ||
| سطر 18: | سطر 18: | ||
تُعد جميع عناصر <code>option</code> مخفية، بغض النظر عن حالة <code>selected</code> الخاصة بها. | تُعد جميع عناصر <code>option</code> مخفية، بغض النظر عن حالة <code>selected</code> الخاصة بها. | ||
| − | أثناء الحركات التي تخفي عنصرًا ما، | + | أثناء الحركات التي تخفي عنصرًا ما، يعدّ العنصر مرئيًا حتى نهاية الحركة. أثناء حركة إظهار عنصرٍ ما، يعدّ العنصر مرئيًا عند بداية الحركة. |
| − | + | عدّل الإصدار jQuery [http://api.jquery.com/category/version/3 3] قليلًا من معنى <code>:visible</code> (وبالتالي معنى <code>[[jQuery/hidden selector|:hidden]]</code>). فبدءًا من هذا الإصدار، ستُعد العناصر مرئيةً <code>:visible</code> إذا كانت تحتوي على أي مربعات تنسيق، بما في ذلك المربعات التي يبلغ عرضها و/أو ارتفاعها صفر. على سبيل المثال، ستُحدد عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code> والعناصر السطرية (inline elements) دون أي محتوى بواسطة المحدد <code>:visible</code>. | |
| − | |||
| − | عدّل الإصدار jQuery [http://api.jquery.com/category/version/3 3] قليلًا من معنى <code>:visible</code> (وبالتالي معنى <code>[[jQuery/hidden selector|:hidden]]</code> ). فبدءًا من هذا الإصدار، ستُعد العناصر <code>:visible</code> إذا كانت تحتوي على أي مربعات تنسيق، بما في ذلك المربعات التي يبلغ عرضها و/أو ارتفاعها صفر. على سبيل المثال، ستُحدد عناصر <code>br</code> والعناصر | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
| − | * نظرًا لأن <code>:visible</code> عبارة عن ملحق jQuery وليست جزءًا من مواصفات CSS فإن الاستعلامات التي تستخدم <code>:visible</code> لا يمكن أن تستفيد من تحسين الأداء المقدم بواسطة تابع DOM الأصلي <code>querySelectorAll() | + | * نظرًا لأن <code>:visible</code> عبارة عن ملحق jQuery وليست جزءًا من مواصفات CSS فإن الاستعلامات التي تستخدم <code>:visible</code> لا يمكن أن تستفيد من تحسين الأداء المقدم بواسطة تابع DOM الأصلي <code>[[JavaScript/Document/querySelectorAll|querySelectorAll()]]</code>؛ لتحقيق أفضل أداء عند استخدام <code>:visible</code> لتحديد العناصر، حدد أولاً العناصر باستخدام محدد CSS خالص، ثم استخدم <code>[[jQuery/filter|.filter(":visible")]]</code>. |
| − | * يمكن أن يكون لاستخدام هذا المحدد | + | * يمكن أن يكون لاستخدام هذا المحدد تأثيرٌ كبيرٌ على الأداء، لأنه قد يجبر المتصفح على إعادة تصيير (re-render) الصفحة قبل أن يتمكن من تحديد مستوى الرؤية. يمكن أن يوفر تتبع رؤية العناصر باستخدام طرائق أخرى، باستخدام صنفٍ ما على سبيل المثال، أداءً أفضل. |
=== أمثلة === | === أمثلة === | ||
| − | تحويل جميع عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> المرئية إلى اللون الأصفر عند النقر | + | تحويل جميع عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> المرئية إلى اللون الأصفر عند النقر:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
مراجعة 10:59، 24 يونيو 2018
المحدد :visible
الوصف
تحديد كل العناصر المرئية.
jQuery( ":visible" )
أُضيف مع الإصدار: 1.0.
تعدّ العناصر مرئية إذا كانت تشغل مساحة في المستند. العناصر المرئية لها عرض أو ارتفاع أكبر من الصفر.
العناصر ذات الخاصية visibility: hidden أو opacity: 0 تعدّ مرئية، نظرًا لأنها لا تزال تستهلك مساحة في تخطيط الصفحة.
تعدّ العناصر غير الموجودة في المستند مخفية؛ ليس لدى jQuery طريقة لمعرفة ما إذا كانت ستكون مرئية عند إلحاقها بوثيقة ما لأنها تعتمد على الأنماط المُطبّقة.
هذا المحدد هو عكس المحدد :hidden. لذلك، كل عنصر مُحدد بواسطة :visible يكون غير مُحدد بواسطة :hidden والعكس بالعكس.
تُعد جميع عناصر option مخفية، بغض النظر عن حالة selected الخاصة بها.
أثناء الحركات التي تخفي عنصرًا ما، يعدّ العنصر مرئيًا حتى نهاية الحركة. أثناء حركة إظهار عنصرٍ ما، يعدّ العنصر مرئيًا عند بداية الحركة.
عدّل الإصدار jQuery 3 قليلًا من معنى :visible (وبالتالي معنى :hidden). فبدءًا من هذا الإصدار، ستُعد العناصر مرئيةً :visible إذا كانت تحتوي على أي مربعات تنسيق، بما في ذلك المربعات التي يبلغ عرضها و/أو ارتفاعها صفر. على سبيل المثال، ستُحدد عناصر <br> والعناصر السطرية (inline elements) دون أي محتوى بواسطة المحدد :visible.
ملاحظات إضافية
- نظرًا لأن
:visibleعبارة عن ملحق jQuery وليست جزءًا من مواصفات CSS فإن الاستعلامات التي تستخدم:visibleلا يمكن أن تستفيد من تحسين الأداء المقدم بواسطة تابع DOM الأصليquerySelectorAll()؛ لتحقيق أفضل أداء عند استخدام:visibleلتحديد العناصر، حدد أولاً العناصر باستخدام محدد CSS خالص، ثم استخدم.filter(":visible"). - يمكن أن يكون لاستخدام هذا المحدد تأثيرٌ كبيرٌ على الأداء، لأنه قد يجبر المتصفح على إعادة تصيير (re-render) الصفحة قبل أن يتمكن من تحديد مستوى الرؤية. يمكن أن يوفر تتبع رؤية العناصر باستخدام طرائق أخرى، باستخدام صنفٍ ما على سبيل المثال، أداءً أفضل.
أمثلة
تحويل جميع عناصر <div> المرئية إلى اللون الأصفر عند النقر:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>visible مثال على التابع</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>إظهار العناصر المخفية لرؤية أنها لا تتغير</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>