jQuery Academy · درس

إنشاء محدّدات زائفة مخصّصة

تعلّم تسجيل محدّداتك الزائفة المخصّصة باستخدام jQuery.expr[':'] لتبسيط منطق تحديد العناصر المعقّد وتحسين قابلية قراءة الشيفرة.

إنشاء محدّدات زائفة مخصّصة درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

لماذا نستخدم المحددات المخصصة؟

تتميز المحددات المضمّنة في jQuery بقوة كبيرة، لكنكم قد تواجهون أحيانًا احتياجات تصفية محددة ومعقدة أو متكررة.

هنا تأتي فائدة المحددات الكاذبة المخصصة! فهي تتيح لكم تعريف عوامل تصفية متخصصة، مما يبسّط منطق التحديد المعقد ويجعل الشيفرة أنظف وأسهل قراءة.

عندما لا تكفي المحددات الافتراضية

تخيلوا أنكم تحتاجون كثيرًا إلى تحديد جميع عناصر <div> التي لا تملك فئة محددة فحسب، بل تملك أيضًا سمة data-status مضبوطة على 'active'.

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

التعرّف على jQuery.expr[':']

يُعد jQuery.expr[':'] الكائن الذي تسجلون فيه المحددات الكاذبة المخصصة. فكّروا فيه على أنه توسيع لمحرك التحديد الأساسي في jQuery.

عندما تصادف jQuery محددًا مثل :myCustomSelector، تبحث عن myCustomSelector في هذا الكائن. وتُسنِدون دالة إلى مفتاح (اسم المحدد الخاص بكم)، ثم تنفذها jQuery لكل عنصر تختبره.

تعريف `:has-tooltip`

لنعرّف محددًا مخصصًا بسيطًا، :has-tooltip، يحدد العناصر التي تملك سمة title. هكذا تضيفونه إلى jQuery.expr[':'].

تتلقى الدالة التي توفرونها عنصر DOM الحالي elem الذي يجري اختباره. وينبغي أن تعيد true إذا استوفى العنصر معاييركم، وfalse خلاف ذلك.

jQuery.expr[':'].hasTooltip = function(elem) {
  // Check if the element has a 'title' attribute
  return !!$(elem).attr('title');
};

استخدام المحدد المخصص

بعد تعريف المحدد :has-tooltip، يمكنكم استخدامه مثل أي محدد كاذب آخر في jQuery! حاولوا تشغيل المثال أدناه.

سيُبرز جميع العناصر التي تملك سمة title، موضحًا قوة عامل التصفية المخصص الجديد.

<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .highlight {
    border: 2px solid green;
    background-color: #e0ffe0;
  }
</style>
</head>
<body>
  <p title="This is a tooltip">Paragraph with tooltip</p>
  <div id="no-tooltip">Just a div</div>
  <span title="Another tooltip here">Span with tooltip</span>

  <script>
    jQuery.expr[':'].hasTooltip = function(elem) {
      return !!$(elem).attr('title');
    };

    $(document).ready(function() {
      $('p:has-tooltip, span:has-tooltip').addClass('highlight');
    });
  </script>
</body>
</html>

وسائط `elem` و`i` و`match`

عند تنفيذ دالة المحدد المخصص، تتلقى ثلاث وسائط مهمة:

elem: عنصر DOM الحالي الذي يجري اختباره.
i: فهرس elem ضمن مجموعة العناصر التي تكرّر jQuery عليها حاليًا.
match: مصفوفة تحتوي على النتائج الناتجة عن التعبير النمطي المستخدم لتحليل المحدد. وتُعد ضرورية للمحددات التي تقبل وسائط.

بالنسبة إلى المحددات البسيطة، ستستخدمون بشكل أساسي الوسيطة elem.

محدد يستند إلى سمات البيانات

لننشئ محددًا :data-status(active) للعثور على العناصر التي تساوي فيها سمة data-status القيمة 'active'. يوضح هذا كيفية استخدام الوسيطة match.

ستوجد القيمة 'active' (الوسيطة الموجودة داخل القوسين) في match[3]. وهذا ما يجعل المحدد ديناميكيًا!

<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .active-item {
    background-color: lightgreen;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div data-status="active">Item 1 (Active)</div>
  <div data-status="inactive">Item 2 (Inactive)</div>
  <p data-status="active">Item 3 (Active)</p>
  <span>Item 4 (No Status)</span>

  <script>
    jQuery.expr[':'].dataStatus = function(elem, i, match) {
      const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
      const actualStatus = $(elem).data('status');
      return actualStatus === expectedStatus;
    };

    $(document).ready(function() {
      $(':data-status(active)').addClass('active-item');
    });
  </script>
</body>
</html>

فهم `match[3]`

مصفوفة match هي نتيجة تحليل jQuery الداخلي لسلسلة المحدِّد باستخدام التعبير النمطي. بالنسبة إلى محدِّد مثل :yourSelector(argument)، عادةً ما يتم التقاط الجزء argument في match[3].

تُعد هذه الآلية أساسية لإنشاء محددات مخصّصة ديناميكية ومرنة يمكنها قبول المعلمات، مما يجعلها أكثر قابلية لإعادة الاستخدام وأقوى في سيناريوهات التصفية المختلفة.

منطق متقدم: `:containsExact`

لنبنِ محدِّدًا أكثر تقدمًا: :containsExact(text). بخلاف :contains() الافتراضي في jQuery، سيطابق هذا المحدِّد العناصر التي يكون محتواها النصي *بالكامل* (باستثناء العناصر التابعة) مطابقًا للنص المُعطى تمامًا.

يتطلب ذلك غالبًا مقارنة $(elem).text().trim() بعناية لضمان التطابق التام.

<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .exact-match {
    font-weight: bold;
    color: blue;
    background-color: #e0f0ff;
    padding: 5px;
    margin: 3px;
  }
</style>
</head>
<body>
  <div>Hello World</div>
  <div>Hello there!</div>
  <p>Hello</p>
  <span>World</span>

  <script>
    jQuery.expr[':'].containsExact = function(elem, i, match) {
      const searchText = match[3]; // The text inside the parentheses
      const elementText = $(elem).text().trim();
      return elementText === searchText;
    };

    $(document).ready(function() {
      $(':containsExact(Hello World)').addClass('exact-match');
    });
  </script>
</body>
</html>

نصائح حول المحددات المخصّصة

ضع أفضل الممارسات التالية في الاعتبار عند إنشاء المحددات المخصّصة:

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

تحدي المحدد المخصّص

تريد إنشاء محدد مخصّص :is-empty يحدد العناصر التي لا تحتوي على محتوى نصي ولا على عناصر تابعة. يشبه ذلك محدد jQuery المضمّن :empty.

أي مقطع من مقاطع الشيفرة التالية يعرّف هذا المحدد الزائف المخصّص تعريفًا صحيحًا؟

مراجعة: المحددات المخصّصة

تعلّمت في هذا الدرس كيفية توسيع إمكانات jQuery القوية في التحديد من خلال إنشاء محددات زائفة مخصّصة باستخدام jQuery.expr[':'].

استكشفت كيفية تعريف محددات بسيطة، وتمرير المعلمات إليها عبر مصفوفة match، وتطبيقها لتبسيط منطق التصفية المعقد، مما يجعل شيفرة jQuery أكثر قابلية للقراءة والصيانة وكفاءة.

الأسئلة الشائعة

هل درس «إنشاء محدّدات زائفة مخصّصة» مجاني؟

نعم — نص درس «إنشاء محدّدات زائفة مخصّصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «إنشاء محدّدات زائفة مخصّصة»؟

تعلّم تسجيل محدّداتك الزائفة المخصّصة باستخدام jQuery.expr[':'] لتبسيط منطق تحديد العناصر المعقّد وتحسين قابلية قراءة الشيفرة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.

كم من الوقت يستغرق درس «إنشاء محدّدات زائفة مخصّصة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy