تحديد العناصر باستخدام jQuery

مرحبًا،

يستخدم jQuery صياغة XPath لتحديد عناصر DOM.

لذلك، إذا كنت تستخدم CSS أو سبق لك استخدام XPath لتحديد العقد في XML، فأنت تعرف بالفعل كيفية تحديد العناصر باستخدام jQuery!

لِنستخدمها مع jQuery 🚀

يُحدَّد العنصر الذي ينتمي إلى الفئة المطلوبة باستخدام عامل النقطة (.).

في المثال أدناه، سيُحدَّد كل عنصر ينتمي إلى فئة title، ثم يتغير لونه. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

سنقدّم الأسلوب css() في الدروس التالية. 

يكفي أن تعرف الآن أن الأسلوب css() يُستخدم لتحديد نمط العنصر

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

في المثال أدناه، سيُحدَّد العنصر الذي يحمل المعرّف title، ثم يتغير لونه.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

يمكن تحديد العنصر الذي يحمل الوسم المطلوب باستخدام اسم الوسم فقط

في المثال أدناه، سيُحدَّد العنصر الذي يحمل وسم span، ثم يتغير لونه.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

محدِّد العنصر الابن

إذا أردنا تحديد العناصر الفرعية لعنصر ما، فإننا نستخدم عامل أكبر من (>).

في المثال أدناه، سيُحدَّد جميع العناصر الفرعية للعنصر المطلوب.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

يمكننا تحديد العنصر المطلوب من خلال التحقق مما إذا كانت سمة أحد العناصر تحتوي على قيمة.

في المثال أدناه، تُحدَّد العناصر التي تحمل وسم <a> والسمة target التي تبلغ قيمتها _blank.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

يجعل jQuery تحديد العناصر في DOM أسهل من خلال توفير بعض الأساليب، بالإضافة إلى محددات XPath.

لنتعرّف إليها.

الأسلوب parent()

يمكننا تحديد العنصر الأب للعنصر المطلوب باستخدام الأسلوب parent() الذي يوفّره jQuery.

في المثال أدناه، يُحدَّد العنصر الأب للعنصر، ثم يتغير لون نص العنصر الأب.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

الأسلوب children()

يمكننا تحديد جميع العناصر الفرعية للعنصر المطلوب باستخدام الأسلوب children() الذي يوفّره jQuery.

في المثال أدناه، تُحدَّد جميع العناصر الفرعية للعنصر، ثم يتغير لون نصها.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

الأسلوب parents()

يمكننا تحديد العناصر السلف للعنصر المطلوب باستخدام الأسلوب parents() الذي يوفّره jQuery.

في المثال أدناه، تُحدَّد العناصر السلف للعنصر، ثم يتغير لون نص العنصر الأب.

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

لذلك نمرّر محدد XPath معاملًا لتحديد السلف الذي نريد اختياره.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

الأسلوب next()

يُستخدم الأسلوب next() لتحديد العنصر الشقيق التالي للعنصر المطلوب.

في المثال أدناه، يُحدَّد أول عنصر شقيق تالٍ للعنصر الذي يحمل الوسم a.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

الأسلوب nextAll()

يُستخدم الأسلوب nextAll() لتحديد العناصر الشقيقة التالية للعنصر المطلوب.

في المثال أدناه، تُحدَّد جميع العناصر الشقيقة التي تأتي بعد العنصر الذي يحمل وسم div.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

الأسلوب siblings()

يمكنك تحديد جميع العناصر الشقيقة للعنصر المطلوب باستخدام الأسلوب siblings().

في المثال أدناه، تُحدَّد جميع العناصر الشقيقة للعناصر التي تحمل وسم p.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

الأسلوب prev()

يُستخدم الأسلوب prev() لتحديد العنصر الشقيق السابق لعنصر ما.

يُحدَّد أول عنصر شقيق سابق للعنصر الذي يحمل الوسم a.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

الأسلوب prevAll()

يُستخدم الأسلوب prevAll() لتحديد العناصر الشقيقة السابقة للعنصر المطلوب.

في المثال أدناه، تُحدَّد جميع العناصر الشقيقة التي تسبق العنصر الذي يحمل وسم div.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

تهانينا 🎉

علّمنا هذا القسم كيفية تحديد عناصر DOM.

في القسم التالي، سنواصل التعلّم عن معالجة DOM.