الأصناف الزائفة والمحدّدات المخصّصة
افهم الأصناف الزائفة المضمّنة مثل :has() و:not() و:nth-child()، ثم تعلّم إنشاء محدّداتك المخصّصة لتصفية العناصر القابلة لإعادة الاستخدام.
الأصناف الزائفة والمحدّدات المخصّصة درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.
اكتشف قوة الفئات الزائفة
مرحبًا بك في المحددات المتقدمة! سنستكشف اليوم الفئات الزائفة، وهي كلمات مفتاحية خاصة تُضاف إلى المحددات لتعريف حالة خاصة للعنصر المحدد.
- تتيح لك استهداف العناصر التي يصعب تحديدها باستخدام سمات HTML أو أسمائها القياسية.
- فكّر فيها على أنها عوامل تصفية ديناميكية لتحديداتك.
تبدأ هذه الفئات بنقطتين رأسيتين (:)، مثل :hover أو :first-child.
الاستهداف حسب الموضع: :nth-child()
تحدّد الفئة الزائفة :nth-child() العناصرَ بناءً على موضعها بين مجموعة من العناصر الشقيقة. وهي مفيدة للغاية لتنسيق القوائم أو صفوف الجداول.
:nth-child(n): تحدّد العنصر الابن رقم n.:nth-child(odd): تحدّد العناصر الأبناء ذات الأرقام الفردية.:nth-child(even): تحدّد العناصر الأبناء ذات الأرقام الزوجية.
يبدأ العد من الرقم 1 للعنصر الابن الأول.
التنسيق باستخدام :nth-child(odd/even)
لنرَ كيف يمكن لـ :nth-child(odd) و:nth-child(even) تطبيق تنسيقات متناوبة بسرعة، مثل الخطوط المتناوبة في القوائم.
جرّب تشغيل هذا المثال لرؤية التأثير:
$(document).ready(function() {
// Selects odd list items and makes their text blue
$('li:nth-child(odd)').css('color', 'blue');
// Selects even list items and makes their text green
$('li:nth-child(even)').css('color', 'green');
});
// HTML Structure (imagine this is in your page):
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// <li>Item 4</li>
// </ul>صيغ :nth-child() المتقدمة
يمكنك استخدام صيغ أكثر تعقيدًا داخل :nth-child()، مثل An+B. تمثّل A هنا حجم الدورة، بينما تمثّل B الإزاحة.
:nth-child(3n): تحدّد كل عنصر ثالث (الثالث، والسادس، والتاسع...).:nth-child(3n+1): تحدّد العناصر الأبناء الأول، والرابع، والسابع... .
يتيح ذلك إجراء عمليات تحديد دقيقة جدًا وفق فواصل منتظمة.
استثناء العناصر باستخدام :not()
تتيح لك الفئة الزائفة :not() استثناء عناصر محددة من عملية التحديد. أي إنها تشبه قولك: «حدّد جميع الفقرات، باستثناء الفقرات التي تحمل الصنف 'intro'».
- تتلقى محددًا آخر كوسيط:
:not(selector). - تُعد هذه الطريقة قوية لتحسين عمليات التحديد الحالية دون كتابة محددات جديدة ومعقدة.
استخدام :not() عمليًا
تخيّل أنك تريد إضافة حد إلى جميع عناصر القائمة باستثناء العنصر الأول تمامًا. إن :not(:first-child) مناسب جدًا لهذا الغرض.
شاهد كيف يساعدنا :not() في استثناء العنصر الأول:
$(document).ready(function() {
// Selects all list items that are NOT the first child
$('li:not(:first-child)').css('border-top', '1px solid gray');
});
// HTML Structure:
// <ul>
// <li>First Item</li>
// <li>Second Item</li>
// <li>Third Item</li>
// </ul>تحديد العناصر الأب باستخدام :has()
تتميّز الفئة الزائفة :has() بكونها فريدة؛ فهي تحدّد عنصرًا إذا كان يحتوي على عنصر واحد على الأقل يطابق المحدد المُمرَّر كوسيط.
- تشبه هذه العملية أن تقول: «أعطني جميع عناصر
<div>التي تحتوي على وسم<p>بداخلها». - يتيح لك ذلك تحديد العناصر الأب بناءً على خصائص العناصر الأبناء.
تمييز العناصر باستخدام :has()
لنفترض أنك تريد تمييز حاويات <div> التي تحتوي على صورة فقط. يمكن لـ :has('img') تنفيذ ذلك بكفاءة.
شغّل هذا الرمز لمعرفة عنصر div الذي سيحصل على حد:
$(document).ready(function() {
// Selects divs that contain an image and adds a border
$('div:has(img)').css('border', '2px solid red');
});
// HTML Structure:
// <div id="container1">
// <p>Text only</p>
// </div>
// <div id="container2">
// <img src="example.png" alt="An image">
// <p>Text and image</p>
// </div>المحددات المخصصة: توسيع jQuery
ماذا تفعل إذا لم تكن المحددات المضمنة في jQuery كافية؟ يمكنك إنشاء محددات زائفة مخصصة خاصة بك! يتيح لك ذلك تصفية العناصر وفق منطق مخصص ودقيق للغاية.
- تسجّلها باستخدام
jQuery.expr[':']. - يجعل ذلك رمز التحديد أكثر وضوحًا وقابلية لإعادة الاستخدام.
هذه ميزة متقدمة تلائم احتياجات التصفية الفريدة حقًا.
إنشاء :contains-word() مخصص
لننشئ محددًا مخصصًا باسم :contains-word() يعثر على العناصر التي تحتوي على كلمة كاملة محددة، وليس مجرد جزء من كلمة.
يعرّف هذا المثال :contains-word() ثم يستخدمه:
$(document).ready(function() {
// Define a custom pseudo-selector ':contains-word'
$.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
var pattern = new RegExp('\b' + word + '\b', 'i');
return function(elem) {
return pattern.test($(elem).text());
};
});
// Use the custom selector to find paragraphs containing 'hello'
$('p:contains-word("hello")').css('background-color', 'yellow');
});
// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>تحدي الفئات الزائفة
ألقِ نظرة على HTML التالي:
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>ما محدد jQuery الذي سيستهدف فقط 'Two' و'Four'؟
مراجعة: الفئات الزائفة والمحددات المخصصة
لقد أتقنت تقنيات قوية لتحديد العناصر باستخدام jQuery!
- تتيح لك الفئات الزائفة (مثل
:nth-child()و:not()و:has()) تحديد العناصر بناءً على حالتها أو علاقتها بالعناصر الأخرى. - تستهدف
:nth-child()العناصر حسب موضعها، حتى باستخدام الصيغ. - تستثني
:not()العناصر من عملية التحديد. - تحدّد
:has()العناصر الأبناء بناءً على عناصرها الأبناء. - يمكنك أيضًا إنشاء محددات زائفة مخصصة خاصة بك باستخدام
jQuery.expr[':']لإجراء تصفية دقيقة للغاية.
واصل التدرب على هذه التقنيات لتحسين استهداف عناصر DOM!
الأسئلة الشائعة
هل درس «الأصناف الزائفة والمحدّدات المخصّصة» مجاني؟
نعم — نص درس «الأصناف الزائفة والمحدّدات المخصّصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.
ماذا ستتعلم في «الأصناف الزائفة والمحدّدات المخصّصة»؟
افهم الأصناف الزائفة المضمّنة مثل :has() و:not() و:nth-child()، ثم تعلّم إنشاء محدّداتك المخصّصة لتصفية العناصر القابلة لإعادة الاستخدام. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «الأصناف الزائفة والمحدّدات المخصّصة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- محدّدات السمات المتقدّمة
- الأصناف الزائفة والمحدّدات المخصّصة
- تقنيات اجتياز DOM بكفاءة