jQuery Academy · درس

محدّدات السمات المتقدّمة

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

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

مرحبًا، محددات السمات!

مرحبًا بك في طريقة قوية لتحديد العناصر في jQuery! سنتعمق في محددات السمات، التي تتيح لك اختيار العناصر استنادًا إلى سمات HTML الخاصة بها.

فكّر في السمات على أنها بيانات إضافية مرفقة بوسم HTML، مثل id وclass وhref وdata-* وغيرها.

التحديد حسب وجود السمة

يعثر أبسط محدد للسمات على العناصر التي تحتوي على سمة محددة، بغض النظر عن قيمتها. وتُكتب صيغته هكذا: [attributeName].

يكون هذا مفيدًا جدًا عندما تحتاج فقط إلى معرفة ما إذا كانت السمة موجودة في عنصر ما. فعلى سبيل المثال، يعثر $('[title]') على جميع العناصر التي تحتوي على سمة title.

جرّب بنفسك: وجود السمة

لنستخدم محدد الوجود للعثور على جميع العناصر التي تحتوي على سمة title وعرض أسماء وسومها.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

مطابقة قيم السمات التامة

لتحديد العناصر التي تحتوي سمة فيها على قيمة تامة، استخدم [attributeName="value"].

هذا المحدد دقيق! ولن يطابق العنصر إلا إذا كانت قيمة السمة مطابقة تمامًا لما تحدده، بما في ذلك حالة الأحرف (إذ إن مطابقة قيم السمات في jQuery حساسة لحالة الأحرف).

المطابقة التامة قيد التنفيذ

اعثر على العناصر التي تحتوي على سمة data-type وتكون قيمتها تمامًا "primary".

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

قيم السمات التي تبدأ بـ...

يعثر المحدد [attributeName^="value"] على العناصر التي تبدأ قيمة إحدى سماتها بسلسلة نصية محددة.

يكون مفيدًا لتجميع العناصر التي تتبع قواعد تسمية متشابهة.
وهو مناسب جدًا لتصفية الروابط، مثل جميع الروابط التي تبدأ بـ /products.

القيم التي تنتهي بـ وتحتوي على

توفّر هذه المحددات مرونة أكبر للمطابقات الجزئية:

[attributeName$="value"]: يطابق العنصر إذا كانت قيمة السمة تنتهي بالسلسلة النصية المحددة.
[attributeName*="value"]: يطابق العنصر إذا كانت قيمة السمة تحتوي على السلسلة النصية المحددة في أي موضع منها.

عرض مباشر: المطابقات الجزئية

لاحظ كيف تستهدف ^= و$= و*= عناصر مختلفة استنادًا إلى قيم جزئية للسمات الموجودة في سمات href الخاصة بها.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

محددات الكلمات والواصلات

إليك محددان متخصصان إضافيان:

[attributeName~="value"]: يطابق العنصر إذا احتوت قيمة السمة على كلمة محددة تفصلها مسافات. ويُستخدم غالبًا مع سمات class.
[attributeName|="value"]: يطابق العنصر إذا كانت قيمة السمة تساوي تمامًا "value" أو تبدأ بـ "value-" (تليها واصلة). ويُستخدم عادةً مع رموز اللغات مثل lang="en-US".

تحقق سريع: المحددات

ما محددات jQuery التي ستتعرف بشكل صحيح على عنصر <div> أدناه؟

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

مراجعة: محددات السمات

عمل رائع! لقد أتقنت محددات السمات المتقدمة:

[attr]: يتحقق من وجود السمة.
[attr="val"]: يطابق القيم التامة.
[attr^="val"]: يطابق القيم التي تبدأ بـ.
[attr$="val"]: يطابق القيم التي تنتهي بـ.
[attr*="val"]: يطابق القيم التي تحتوي على.
[attr~="val"]: يطابق القيم التي تحتوي على كلمة تفصلها مسافة.
[attr|="val"]: يطابق القيم المطابقة تمامًا أو التي تبدأ بـ 'val-'.

استخدم هذه المحددات لكتابة شفرة jQuery دقيقة وفعّالة للغاية!

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

هل درس «محدّدات السمات المتقدّمة» مجاني؟

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

ماذا ستتعلم في «محدّدات السمات المتقدّمة»؟

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

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

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

كم من الوقت يستغرق درس «محدّدات السمات المتقدّمة»؟

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

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

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

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

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