freeCodeCamp/guide/arabic/jquery/jquery-selectors/index.md

title	localeTitle
jQuery Selectors	مختارات 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

يمكنك أيضًا استخدام محدد الفئة مع اسم العلامة لتكون أكثر تحديدًا.

``

My Wish List

`
``

$("ul.wishList").append("<li>New blender</li>");

اختيار حسب الهوية

إذا كنت تريد تحديد عناصر بقيمة معرف معينة ، فاستخدم رمز التجزئة (#) واسم المعرف.

`

List item with an ID.

`

$("#liWithID").replaceWith("<p>Socks</p>");

كما هو الحال مع محدد الصف ، يمكن استخدام هذا أيضًا مع اسم العلامة.

`

News Headline

`

$("h1#headline").css("font-size", "2em");

محددات تعمل كمرشحات

هناك أيضًا محددات تعمل كمرشحات - وعادةً ما تبدأ بالنقطتين. على سبيل المثال ، يحدد الخيار :first العنصر الذي يكون الطفل الأول من أصله. فيما يلي مثال لقائمة غير مرتبة ببعض عناصر القائمة. يحدد محدد jQuery أسفل القائمة أول عنصر <li> في القائمة - عنصر القائمة "One" - ثم يستخدم طريقة .css لتحويل النص إلى اللون الأخضر.

`

• One
• Two
• Three

`

$("li:first").css("color", "green");

ملاحظة: لا تنس أن تطبيق css في JavaScript ليس ممارسة جيدة. يجب عليك دائمًا تقديم أنماطك في ملفات css.

محدد التصفية الآخر ، :contains(text) ، يحدد العناصر التي تحتوي على نص معين. ضع النص الذي تريد مطابقته بين الأقواس. هنا مثال مع فقرتين. يأخذ محدد jQuery الكلمة "Moto" ويغير لونه إلى اللون الأصفر.

<p>Hello</p> <p>World</p>

$("p:contains('World')").css("color", "yellow");

وبالمثل ، يحدد :last selector :last العنصر الأخير للطفل التابع له. يحدد محدد JQuery أدناه العنصر <li> الأخير في القائمة - عنصر القائمة "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