---
title: jQuery Selectors
localeTitle: مختارات jQuery
---
## مختارات jQuery
يستخدم jQuery محددات نمط CSS لتحديد أجزاء ، أو عناصر ، لصفحة HTML. ثم يتيح لك القيام بشيء ما مع العناصر باستخدام أساليب jQuery أو وظائف.
لاستخدام أحد هذه المحددات ، اكتب علامة الدولار والأقواس بعدها: `$()` . هذا هو اختصار للدالة `jQuery()` . داخل الأقواس ، أضف العنصر الذي تريد تحديده. يمكنك استخدام إما أحادي أو مزدوج. بعد ذلك ، أضف نقطة بعد الأقواس والأسلوب الذي تريد استخدامه.
في jQuery ، تكون أدوات اختبار فئة ومعرفات مثل تلك الموجودة في CSS.
في ما يلي مثال لأسلوب jQuery يحدد جميع عناصر الفقرة ، ويضيف فئة "محددة" إليهم:
`
This is a paragraph selected by a jQuery method.
This is also a paragraph selected by a jQuery method.
$("p").addClass("selected");
`
في jQuery ، تكون محددات الفئة ومعرّف الهوية هي نفسها الموجودة في CSS. إذا كنت تريد تحديد عناصر بفئة معينة ، فاستخدم نقطة ( `.` ) واسم الفئة. إذا كنت تريد تحديد عناصر بمعرف معين ، فاستخدم رمز التجزئة ( `#` ) واسم المعرف. تجدر الإشارة إلى أن HTML ليس حساسًا لحالة الأحرف ، لذلك من الأفضل أن تظل علامات HTML ومتغيرات CSS صغيرة جدًا.
الاختيار حسب الصف:
`Paragraph with a class.
$(".p-with-class").css("color", "blue"); // colors the text blue
`
التحديد حسب المعرّف:
`List item with an ID.
$("#li-with-id").replaceWith("Socks
");
`
يمكنك أيضًا تحديد عناصر معينة مع فئاتها ومعرفاتها:
### اختيار حسب الفئة
إذا كنت تريد تحديد عناصر بفئة معينة ، فاستخدم نقطة (.) واسم الفئة.
`
Paragraph with a class.
`
`$(".pWithClass").css("color", "blue"); // colors the text blue
`
يمكنك أيضًا استخدام محدد الفئة مع اسم العلامة لتكون أكثر تحديدًا.
``
`
``
`$("ul.wishList").append("New blender");
`
### اختيار حسب الهوية
إذا كنت تريد تحديد عناصر بقيمة معرف معينة ، فاستخدم رمز التجزئة (#) واسم المعرف.
`
List item with an ID.
`
`$("#liWithID").replaceWith("Socks
");
`
كما هو الحال مع محدد الصف ، يمكن استخدام هذا أيضًا مع اسم العلامة.
`
News Headline
`
`$("h1#headline").css("font-size", "2em");
`
### محددات تعمل كمرشحات
هناك أيضًا محددات تعمل كمرشحات - وعادةً ما تبدأ بالنقطتين. على سبيل المثال ، يحدد الخيار `:first` العنصر الذي يكون الطفل الأول من أصله. فيما يلي مثال لقائمة غير مرتبة ببعض عناصر القائمة. يحدد محدد jQuery أسفل القائمة أول عنصر `` في القائمة - عنصر القائمة "One" - ثم يستخدم طريقة `.css` لتحويل النص إلى اللون الأخضر.
`
`
`$("li:first").css("color", "green");
`
**ملاحظة:** لا تنس أن تطبيق css في JavaScript ليس ممارسة جيدة. يجب عليك دائمًا تقديم أنماطك في ملفات css.
محدد التصفية الآخر ، `:contains(text)` ، يحدد العناصر التي تحتوي على نص معين. ضع النص الذي تريد مطابقته بين الأقواس. هنا مثال مع فقرتين. يأخذ محدد jQuery الكلمة "Moto" ويغير لونه إلى اللون الأصفر.
`
Hello
World
`
`$("p:contains('World')").css("color", "yellow");
`
وبالمثل ، يحدد `:last` selector `:last` العنصر الأخير للطفل التابع له. يحدد محدد JQuery أدناه العنصر `` الأخير في القائمة - عنصر القائمة "Three" - ثم يستخدم طريقة `.css` لتحويل النص إلى اللون الأصفر.
`$("li:last").css("color", "yellow");`
**ملاحظة:** في jQuery selector ، يكون `World` في علامات تنصيص مفردة لأنه موجود بالفعل داخل زوج من علامات الاقتباس المزدوجة. استخدم دائمًا علامات الاقتباس الأحادية داخل علامات اقتباس مزدوجة لتجنب إنهاء سلسلة بدون قصد.
**اختيار متعددة** في jQuery ، يمكنك استخدام العديد من المحددات لتطبيق نفس التغييرات على أكثر من عنصر واحد ، باستخدام سطر واحد من التعليمات البرمجية. يمكنك القيام بذلك عن طريق فصل معرفات مختلفة بفاصلة. على سبيل المثال ، إذا كنت ترغب في تعيين لون الخلفية لثلاثة عناصر باستخدام ids cat و dog و rat على التوالي إلى اللون الأحمر ، فقم بذلك ببساطة:
`$("#cat,#dog,#rat").css("background-color","red");
`
هذه ليست سوى عدد قليل من المحددات المتاحة للاستخدام في jQuery. راجع قسم "مزيد من المعلومات" للحصول على ارتباط إلى القائمة الكاملة على موقع jQuery على الويب.
#### معلومات اكثر:
* [قائمة كاملة من محددات jQuery](http://api.jquery.com/category/selectors/)