الفرق بين المراجعتين لصفحة: «jQuery/selected selector»
جميل-بيلوني (نقاش | مساهمات) إضافة محتويات الصفحة. |
|||
| سطر 11: | سطر 11: | ||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
لمَّا كان المحدِّد <code>:selected</code> هو ملحق في مكتبة jQuery وليس جزءًا من مواصفة [[CSS]]، فإنَّ الاستعلامات التي تستعمل <code>:selected</code> لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي <code>querySelectorAll()</code>. للحصول على أداء أفضل في المتصفحات الحديثة، حدِّد العناصر باستعمال محدِّدات CSS الصرفة (pure) ثمَّ استعمل التابع <code>[[jQuery/filter|.filter(" :selected ")]]</code>. | لمَّا كان المحدِّد <code>:selected</code> هو ملحق في مكتبة jQuery وليس جزءًا من مواصفة [[CSS]]، فإنَّ الاستعلامات التي تستعمل <code>:selected</code> لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي [[JavaScript/Document/querySelectorAll|<code>querySelectorAll()</code>]]. للحصول على أداء أفضل في المتصفحات الحديثة، حدِّد العناصر باستعمال محدِّدات CSS الصرفة (pure) ثمَّ استعمل التابع <code>[[jQuery/filter|.filter(" :selected ")]]</code>. | ||
=== أمثلة === | === أمثلة === | ||
المراجعة الحالية بتاريخ 03:32، 18 يونيو 2018
المحدد :selected
الوصف
يحدِّد جميع العناصر المُحدَّدة.
jQuery( ":selected" )
أُضيف مع الإصدار: 1.0.
يُستعمَل المحدِّد :selected خصِّيصًا مع العناصر <option>، ولا يعمل مع مربعات الاختيار (checkboxes) أو أزرار الانتقاء (radio buttons)، لذا استعمل معهم المحدِّد :checked.
ملاحظات إضافية
لمَّا كان المحدِّد :selected هو ملحق في مكتبة jQuery وليس جزءًا من مواصفة CSS، فإنَّ الاستعلامات التي تستعمل :selected لا يمكنها الاستفادة من سرعة الأداء الذي يوفره تابع DOM الأصلي querySelectorAll(). للحصول على أداء أفضل في المتصفحات الحديثة، حدِّد العناصر باستعمال محدِّدات CSS الصرفة (pure) ثمَّ استعمل التابع .filter(" :selected ").
أمثلة
ربط الحدث change بالعنصر <select> الذي يجلب المحتوى النصي لكل خيار محدَّد ثمَّ يضيفه إلى العنصر <div>. يعيد بعد ذلك استدعاء نفسه لإعادة الخطوات نفسها من جديد عند إعادة تحديد الخيارات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selected مثالٌ عن استعمال المحدد</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select name="garden" multiple="multiple">
<option>ثمار</option>
<option selected="selected">شجيرات</option>
<option>أشجار</option>
<option selected="selected">أغصان</option>
<option>عشب</option>
<option>جذور</option>
</select>
<div></div>
<script>
$( "select" )
.change(function() {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.trigger( "change" );
</script>
</body>
</html>