كيفية استخدام محددات jQuery و CSS وأساسيات طريقة عملها

في اليوم الآخر ، كنت أقوم بإجراء مقابلة مع شخص أنهى شهادة الواجهة الأمامية لـ freeCodeCamp. تخرج أيضًا من معسكر تدريبي مرموق ، حيث تم تشفير الحضور من الساعة 8 صباحًا حتى 8 مساءً لمدة ستة أسابيع متتالية. ييكيس!

كانت قدرته على البرمجة رائعة ، لكنني فوجئت برؤية نقص معرفته في CSS. وبالنقص ، أعني أنه لا يعرف كيفية اختيار فصل دراسي لتطبيق أسلوب ما. هذا لا ينعكس عليه سلبا بالضرورة. إذا كان هناك أي شيء ، فإنه يسلط الضوء على كيفية عرض الكثير من المبرمجين لـ CSS.

يعتقد الكثير من الناس أن تعلم CSS غير مهم ، لأن المصممين عادة ما يكونون قادرين على تنفيذ CSS نيابة عنك. في حين أن هذا صحيح ، هناك عدة مرات ستحتاج فيها (بصفتك مبرمجًا) إلى معرفة بعض CSS الأساسية لتحديد عنصر وإخباره بفعل شيء ما عند حدوث شيء آخر.

على سبيل المثال ، من المحتمل أن يكون برنامج Green Sock Animation Platform (GSAP) برنامجًا أكثر من اللازم بحيث لا يركز على المصمم. يتطلب مطورًا لديه معرفة بـ CSS بالإضافة إلى البرمجة.

أنا لا أقول أن كل مطور يحتاج إلى أن يكون سيد CSS. لكنني أعتقد أنه إذا كنت ستطلق على نفسك مطورًا مكدسًا كاملًا ، فيجب أن تعرف أساسيات CSS. وتبدأ الأساسيات بالمحدد .

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

محدد CSS

أجد دائمًا أنه من المفيد اللعب بالرمز ، لذلك إليك CodePen بسيطًا للعب باستخدام المحددات الأساسية.

في HTML ، هناك ثلاث طرق لتسمية العناصر أو تصنيفها. الطريقة الأولى هي الأوسع: عن طريق اسم العلامة. على سبيل المثال ، يمكنك تحديد جميعdiv الصفحات على صفحتك باستخدام المحدد البسيط div. مرحبًا ، كان ذلك سهلاً!

الطريقة الثانية هي الطريقة التي ستستخدمها أكثر من غيرها: classالسمة. يمكنك الاختيار حسب الفصل باستخدام النقطة ( .) ، لذلك في المثال أعلاه ، لتحديد الكلالعناصر مع الطبقة sectionيمكنني استخدام .sectionكما محدد.

الطريقة الثالثة غالبًا ما يتم استخدامها بشكل مفرط ، ولكنها لا تزال مفيدة ، وهذه هي idالسمة. يجب أن تحدد المعرفات عناصرك ، تمامًا كما قد يحدد رقم الضمان الاجتماعي الخاص بك (في الولايات المتحدة) كشخص. هذا يعني أن المعرفات يجب أن تكون فريدة عبر الصفحة بأكملها. لتحديد عنصر بمعرف معين ، يمكنك استخدام الهاشتاج ( #) ، أو octothorpe كما أحب أن أسميه. لتحديد العنصر بمعرف otherأستخدمه #other.

هذه هي المحددات الأساسية. إلى خلاصة:

  • حدد حسب اسم العلامة (بدون بادئة)
  • اختر حسب اسم الفئة (بادئة .)
  • حدد بالمعرف (بادئة #)

ستتيح لك هذه المحددات الثلاثة وحدها تحديد أي شيء تقريبًا على صفحة الويب الخاصة بك.

مسابقة 1

  1. كيف يمكنك تحديد جميع علامات الفقرة على الصفحة؟ (تلميح: علامات الفقرة p)
  2. كيف تختار كل العناصر مع فئة من button-text؟
  3. كيف تختار العنصر بمعرف من form-userinput؟

لا تتردد في مشاركة إجاباتك في التعليقات!

هل يجب أن تكون جميع المعرفات فريدة؟

هذا استطرادي صغير أشعر أنه مهم للغاية. ولكن إذا كنت هنا فقط لمعرفة كيفية استخدام المحددات ، فلا تتردد في التخطي إلى القسم التالي

باستخدام اسم مثل المعرف ، قد تفترض أن كل معرف HTML يجب أن يكون فريدًا وإلا فلن يعمل مستند HTML. بعد كل شيء ، فإن محاولة الحصول على constمتغيرين ستجعل العديد من المحررين يصرخون عليك ، لذا ألا تصرخ HTML أيضًا؟

المشكلة هي، وسوف HTML لا يصيح عليك. في الواقع ، لن يخبرك أحد حتى بوجود خطأ. قد تجد خطأً ينبع من معرّف غير فريد. لكنك ستقود نفسك إلى الجنون في محاولة لمعرفة السبب الجذري للخطأ ، لأنه فشل دقيق للغاية.

يوضح المثال أعلاه سبب تسبب وجود معرّفات مكررة في حدوث مشكلة في صفحة الويب الخاصة بك. أولاً ، يوجد بالفعل اثنان divمع المعرّف other. إذا قمت بالتعليق على الأنماط الخاصة بـ #other، فسترى أنه تم تصميم كلا العنصرين بالفعل. قد يجعلك هذا تعتقد ، "حسنًا ، يمكنني استخدام المعرفات وأسماء الفئات بالتبادل!"

ليس بهذه السرعة. إذا نظرت في لوحة JavaScript ، فسترى أنني قمت بتحديد عناصر معينة بناءً على تسمية العنصر الخاصة بها: اسم العلامة أو اسم الفئة أو المعرف. ستلاحظ أن document.getElementsByTagNameو document.getElementsByClassNameعودة مجموعة من كافة عناصر HTML مطابقة. document.getElementByIdيسترجع فقط أول عنصر HTML يمكنه العثور عليه بالمعرف المطابق. يمكنك التحقق من ذلك عن طريق إلغاء التعليق على getVanillaSelectorsالوظيفة والتحقق من وحدة التحكم.

لمزيد من التعقيد ، إذا كنت تستخدم querySelectorAllطريقة JavaScript (التي تأخذ محدد CSS كمدخل) ، فستحصل على نتيجة مختلفة تمامًا.

وفقط للعبث معك ، يقوم jQuery بشيء مختلف على الرغم من وجود صيغة مشابهة لـ querySelectorAll.

ليس لدي تفسير للسلوك المختلف. ومع ذلك ، يمكنني أن أخبرك بكيفية تجنب ذلك. ها هي القواعد الخاصة بي:

  1. لا تستخدم المعرفات أبدًا. استخدم classالسمات بدلاً من ذلك.
  2. إذا كنت بحاجة إلى استخدام معرّف ، فضع مسافة الاسم بحيث يكون فريدًا حتى في حالة وجود عنصر مشابه على الصفحة ؛ فمثلاmenu-item-01

في بعض الأحيان ، قد تحتاج النماذج وحقول الإدخال إلى معرفات. في هذه الحالة ، يمكنك اتباع القاعدة رقم 2. وإليك كيفية استخدام مساحة الاسم نموذجًا لتسجيل المستخدم:

بهذه الطريقة ، إذا كان لدي نموذجان في نفس الصفحة (دعنا نقول user-signupو user-signin) ، فمن المضمون أن يكون لديهما معرفات فريدة. حتى لو كانت حقول معرف المستخدم متشابهة بين النماذج.

الجمع بين المحددات

في بعض الأحيان لا يقطعها محدد واحد. في بعض الأحيان ، تحتاج إلى الحصول على كل من divله اسم فئة section. في أوقات أخرى ، تحتاج إلى أن يكون كل عنصر يحمل اسم فئة sectionله عنصرًا فرعيًا divلمعرّف user-signup. هناك العديد من مجموعات المحددات الأخرى الممكنة.

في هذا القسم ، ستتعلم ثلاث طرق للجمع بين المحددات ، وأنا واثق من أنها ستناسب 90٪ من احتياجاتك. إذا وجدت أن أكثر من 11٪ من احتياجاتك لم يتم الوفاء بها ، فتعال واشتكى إلي وسأقوم بتعديل ذلك لأقول 89٪ من احتياجاتك :)

كما في السابق ، لنبدأ بـ CodePen:

الجمع بين المحددات لعنصر واحد

حسنًا ، دعنا أولاً نتناول دمج المحددات لعنصر واحد. هذا يعني تحديد العنصر الذي له اسم علامة x، واسم فئة y، ومعرف من z. بالطبع ، لا تحتاج إلى الثلاثة ، لكن يمكنك الجمع بين الثلاثة.

لنفترض أننا نريد تحديد كل divs بفئة item. للقيام بذلك، ونحن الجمع بين الأمرين: div.item. ينتقل من الأكثر عمومية إلى الأكثر تحديدًا من اليسار إلى اليمين. يؤدي ذلك إلى تحديد جميع divالعلامات التي لها أيضًا اسم فئة item. من المهم ملاحظة أنه لا توجد مسافة بين divو .item. تؤدي إضافة مسافة إلى تغيير المحدد تمامًا ، حيث سأنتقل إلى القسم التالي.

إذا قمت بإلغاء تعليق CSS المقابل ، فسترى أن sectionاسم الفئة الذي يحمل اسم الفئة itemلم يتحول إلى اللون الأحمر. هذا لأنه ليس divعلامة.

يمكنك عمل نفس النمط بأسماء ومعرفات الفئات. ولكن إذا كان لديك معرف عنصر ، فيمكنك أيضًا استخدام المعرف فقط. ليس هناك سبب لاختيار معرّف باسم فئة معين ، لأنك إذا اتبعت قواعد المعرف أعلاه ، فلديك عنصر واحد فقط بهذا المعرف على أي حال.

ولكن، لمجرد التعادل، وهنا مثال على اختيار divمع فئة itemوID من other: div.item#other. مرة أخرى ، الانتقال من اليسار إلى اليمين ، ينتقل بشكل عام إلى أكثر تحديدًا.

على الأرجح ستستخدم بناء الجملة هذا لتحديد عنصر له فئات متعددة. للقيام بذلك ، ما عليك سوى فصل جميع الفئات بفترات. لتحديد كافة العناصر التي لديها كل الطبقات itemو section، وكنت استخدام .item.section. لا يهم الترتيب عندما تفعل ذلك بهذه الطريقة ، لذا .section.itemسيعمل أيضًا.

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

محدد "الطفل"

الطريقة الثانية التي يمكنك من خلالها دمج المحددات هي باستخدام محدد "الطفل" ، كما أحب أن أسميه. هناك طريقتان للقيام بذلك ، لذا سأبدأ بالطريقة الأكثر عمومية.

أولاً ، يمكنك تحديد أي طفل لعنصر معين عن طريق إضافة مسافة. على سبيل المثال، لتحديد جميع الأطفال itemالصورة من #otherعنصر، انها تريد ان تكون #other .item. لاحظ المسافة بين المحددات.

ثانيًا ، يمكنك تحديد توابع فورية لعنصر معين باستخدام &gt ؛. "الطفل المباشر" للعنصر هو مستوى واحد فقط عميق. في المثال ، توجد wo .iعناصر t tem الموجودة في he #otعنصر t الخاص بها ، ولكن he .iيتم تغليف أحد عناصر t tem في a .wrapكل عنصر ، بحيث لا يكون أحد العناصر طفلًا مباشرًا.

لمنحك صورة مرئية ، إذا قمت بطي كل شيء تحت #otherالعنصر ، فسترى هذا:

تلك هما فقط الأطفال المباشر لل #otherعنصر. لتحديد فقط تابع مباشر .itemمن #other، وكنت تستخدم #other > .iتيم، الذي من شأنه أن اختيار الطفل مباشرة، ب التحرير ليس undernea واحد th .wrapلكل. أنيق ، أليس كذلك؟

مسابقة 2

  1. كيف يمكنك تحديد جميع علامات الفقرة التي تنتمي إلى sectionالعناصر؟ (تلميح: علامات الفقرة p)
  2. كيف يمكنك تحديد جميع العناصر مع فئة من button-text، والتي هي أحفاد لعناصر مع فئة من button؟
  3. كيف سيكون اختيار العنصر مع فئة من form-inputهذا هو الطفل المباشر من formالعناصر؟
  4. سؤال إضافي : اشرح ما يختاره هذا المحدد: header.title > form.user-signup button.button-danger

كما كان من قبل ، لا تتردد في مشاركة إجاباتك في التعليقات!

وضع كل ذلك معًا - حرفياً

يمكنك الجمع بين المحددات المدمجة. هل حقا. يُظهر سؤال المكافأة أعلاه مثالاً على ذلك ، لكنني أضفت بعض المجموعات في نهاية مثال codepen.

على سبيل المثال ، يمكنك اختيار كل .itemالأطفال divالذين لديهم فئة من parent-itemباستخدام div.parent-item .item. قف!

يمكنك اختيار الأحفاد المباشرين أيضًا. على سبيل المثال ، لتحديد كل divs مع فئة من itemتلك الأحفاد المباشرة لـ divs مع فئة parent-item: div.parent-item > div.item.

وأخيرا، لمجرد فوضى معك، يمكنك السير في شجرة DOM كامل: div.parent-item .coolest-item .item. itemالصف الذي هو طفل في coolest-itemالفصل الذي هو طفل divمع فئة parent-item.

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

المكافأة: استخدام Chrome DevTools للحصول على محدد

يمكنك استخدام Chrome DevTools للحصول على محدد أي عنصر يمكنك تحديده في DOM. إليك الطريقة:

  1. افتح Chrome DevTools. نظرًا لأنك تحدد عنصرًا ، فانتقل وانقر بزر الماوس الأيمن على العنصر الذي تريد تحديده وانقر على "فحص":

2. انقر بزر الماوس الأيمن فوق عنصر DOM الذي تريد تحديده وقم بالتمرير فوق "نسخ" ، ثم انقر فوق "نسخ محدد:"

3. هذا كل شيء! بالمناسبة ، المحدد الذي قمت بنسخه هو محدد #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailing. يمكنك نسخ se lector into document.querySelector أو jQuery والحصول على العنصر.

نأمل أن تكون هذه الكتابة مفيدة! إذا استمتعت بها ، من فضلك أعطني بعض التصفيق حتى يراها المزيد من الناس. شكر!