تم توضيح محددات jQuery: محددات الفئة ومحددات المعرفات والمزيد

محددات jQuery

يستخدم jQuery محددات نمط CSS لتحديد أجزاء أو عناصر من صفحة HTML. ثم يتيح لك القيام بشيء ما باستخدام العناصر باستخدام طرق أو وظائف jQuery.

لاستخدام واحد من هذه المنتخبات، اكتب علامة الدولار وأقواس بعد ذلك: $(). هذا هو اختصار jQuery()الوظيفة. داخل الأقواس ، أضف العنصر الذي تريد تحديده. يمكنك استخدام علامات الاقتباس المفردة أو المزدوجة. بعد ذلك ، أضف نقطة بعد الأقواس والطريقة التي تريد استخدامها.

في jQuery ، تكون محددات الفئة والمعرفات مماثلة لتلك الموجودة في CSS. دعونا نجري مراجعة سريعة لذلك قبل أن نكمل.

محدد المعرف في CSS

يقوم محدد CSS ID بتطبيق الأنماط على عنصر html محدد. يجب أن يتطابق محدد معرف CSS مع سمة المعرف لعنصر HTML. على عكس الفئات ، التي يمكن تطبيقها على عناصر متعددة في جميع أنحاء الموقع ، يمكن تطبيق معرف محدد فقط على عنصر واحد على الموقع. سيتجاوز معرف CSS خصائص فئة CSS. لتحديد عنصر بمعرف محدد ، اكتب حرف التجزئة (#) ، متبوعًا بمعرف العنصر.

بناء الجملة

#specified_id { /* styles */ }

يمكنك دمج محدد المعرف مع أنواع أخرى من المحددات لتصميم عنصر محدد للغاية.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

ملاحظة حول المعرفات

يجب تجنب الهوية عند التصميم إن أمكن. نظرًا لأنه يتمتع بخصوصية عالية ويمكن تجاوزه فقط إذا قمت بإضافة أنماط مضمنة أو إضافة أنماط إليه . يتجاوز وزن المعرف محددات الفئة ومحددات النوع.

تذكر ، يجب أن يتطابق محدد المعرف مع سمة معرف عنصر HTML.

النوعية

تتميز محددات المعرفات بخصوصية عالية مما يجعل من الصعب تجاوزها. تتمتع الفصول الدراسية بخصوصية أقل بكثير وهي عمومًا الطريقة المفضلة لعناصر النمط لتجنب مشكلات الخصوصية.

فيما يلي مثال على طريقة jQuery التي تحدد جميع عناصر الفقرة ، وتضيف فئة "المحددة" إليها:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

حسنًا ، عودة إلى jQuery

في 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("
  • New blender
  • ");

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

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

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

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

    News Headline

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

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

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

  • عنصر في القائمة - عنصر القائمة "واحد" - ثم يستخدم .cssالطريقة لتحويل النص إلى اللون الأخضر.

    
         
    • One
    • Two
    • Three
    $("li:first").css("color", "green");

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

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

    Hello

    World

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

    وبالمثل ، يقوم :lastالمحدد بتحديد العنصر الذي هو آخر عنصر تابع للعنصر الأصل. محدد JQuery أدناه يختار الأخير

  • عنصر في القائمة - عنصر القائمة "ثلاثة" - ثم يستخدم .cssالطريقة لتحويل النص إلى اللون الأصفر.

    $("li:last").css("color", "yellow");

    ملاحظة: في محدد jQuery ،Worldيوجد بين علامات الاقتباس المفردة لأنه موجود بالفعل داخل زوج من علامات الاقتباس المزدوجة. استخدم دائمًا علامات الاقتباس المفردة داخل علامات الاقتباس المزدوجة لتجنب إنهاء سلسلة بدون قصد.

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

    $("#cat,#dog,#rat").css("background-color","red");

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

    معلومات اكثر:

    • القائمة الكاملة لمحددات jQuery