تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: كذلك في اختيار العناصر


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

محددات السمة


في هذه المرحلة ، يمكنك تحديد العناصر التي تحتوي على:
  • سمة معينة ، باستخدام محدد $('[nom]')؛
  • سمة معينة لها قيمة محددة، باستخدام المحدد $('[nom=valeur]').
يسرد الجدول التالي محددات السمات المتقدمة التي سنهتم بها.
المحدد العناصر المختارة
['nom*="valeur"'] العناصر التي تحتوي على سمة nomتحتوي على القيمة المحددة (جزئيًا أو كليًا).
['nom~="valeur"'] العناصر التي تحتوي على سمة nomتحتوي على القيمة المحددة ، محددة بمسافات.
['nom$="valeur"'] العناصر التي لها سمة nomتنتهي بالقيمة المحددة.
['nom!="valeur"'] العناصر التي لا تحتوي على السمة nom، أو التي تحتوي على سمة nomأخرى غير القيمة المحددة.
['nom^="valeur"'] العناصر التي لها سمة nomتبدأ بالقيمة المحددة.
لفهم كيفية عمل هذه المحددات ، سنعمل مع الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="canard.jpg" title="animal canard" border="11">
    <img src="chat.jpg" title="animal chat" border="4">
    <img src="cheval.jpg" title="cheval" border="2">
    <img src="chien.jpg" title="animal chien"  border="8">
    <img src="girafe.jpg" title="girafe" border="4">

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // سيتم إدراج رمز jQuery هنا
      }); 
    </script>
  </body>
</html>
في بداية هذه الدورة التدريبية ، أخبرتك أنه من المستحسن فصل أكواد HTML و CSS و jQuery في عدة ملفات. هذه النصيحة لا تزال ذات صلة ؛ ومع ذلك ، نظرًا لصغر حجم الكود ، أخذت حرية وضع كود jQuery مباشرة في HTML . لا تقلق ، سوف نستخدم عدة ملفات منفصلة عندما يصبح الكود أكثر تجسيدًا.
يحتوي نص الملف على خمس علامات <img> . كل لديه ثلاث صفات: src ، title و border . سنستخدم العديد من محددات السمات المتقدمة لتغيير لون بعض حدود الصورة. بعد تحديد الصور ، تشير إحدى العلامات <script> إلى مكتبة jQuery وتحدد أخرى كود jQuery الذي سنكتبه. الكود $(function() { ينتظر توافر DOM . سيتم وضع بيانات jQuery بدلاً من التعليق.
الصورة التالية هي النتيجة عند تشغيل هذا الرمز في Internet Explorer .
jQuery web
سنرسم حدودًا حمراء حول بعض الصور باستخدام طريقة jQuery css() التالية:

    $('selector').css('border-color','red');
... حيث أن selector هو أحد محددات CSS في الجدول التالي:
معيار محدد jQuery صورة معدلة
الصورة التي borderتحتوي السمة الخاصة بها جزئيًا أو كليًا على القيمة "1". $('[border*="1"]') 1
الصورة التي titleتحتوي السمة على كلمة "حيوان" محددة بمسافة. $('[title~="animal"]') 1 ، 2 ، 4
الصورة التي srcتنتهي السمة بـ "e.jpg". $('[src$="e.jpg"]') 5
الصورة التي لا تحتوي على سمة borderتساوي "15". $('[border!="15"]') 1 ، 2 ، 3 ، 4 ، 5
الصورة التي srcتبدأ السمة بـ "ch". $('[src^="ch"]') 2 ، 3 ، 4

محددات هرمية


في شجرة DOM ، باستثناء html، جميع العناصر لها أصل ، وبعض العناصر لها طفل واحد أو أكثر. يركز هذا القسم على محددات التسلسل الهرمي ، والتي يمكنك من خلالها تحديد أبناء الأب ، والطفل رقم N من اللأب، والأطفال العازبين ، وما إلى ذلك.
محدد jQuery العناصر المختارة
('p > e') عناصر eأحفاد العناصرp
('p + e') عناصر eمسبوقة مباشرة بعنصرp
('p ~ e') العناصر eمسبوقة بعنصرp
:empty العناصر التي ليس لديها أطفال
:first-child الطفل الأول
:first العنصر الأول
:last-child الطفل الأخير
:last العنصر الأخير من الاختيار
:nth-child() العنصر الذي هو الطفل الألفي لوالديه
:only-child العناصر التي هي فريدة من نوعها من أولياء أمورهم
لا ينقصنا الا قليلا من الكود لفهم كيفية عمل هؤلاء المحددات. هنا سنستخدم القوائم المتداخلة:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>محددات  CSS </title>
  </head>
  <body dir=”rtl”>
    <div id="listes">
      <ul id="ul1">
        <li> عنصر من القائمة الاولى
          <ul id="ul2">
            <li> الطفل الاول</li>
            <li> الطفل الثاني</li>
          </ul>
        </li>
        <li> عنصر من القائمة 2</li>
        <li> عنصر من القائمة 3</li>
        <li> عنصر من القائمة 4</li>
      </ul>
    </div>
  
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // كود jQuery  هنا 
      }); 
    </script>
  </body>
</html>
تمثل الصورة التالية هذه التعليمات البرمجية.
jQuery web
سوف نعرض بعض عناصر هذه القوائم المتداخلة باللون الأحمر باستخدام طريقة jQuery css() التالية:

$(function() {
    $('sel').css('color','red');
});
... أين selيوجد أحد محددات CSS في الجدول التالي:
معيار محدد jQuery تعديل البند
عناصر ulأحفاد العناصرli $('li > ul') 2 ، 3
عناصر liمسبوقة مباشرة بعنصرli $('li + li') 3 ، 4 ، 5 ، 6
العنصر الأول liللطفل $('li:first-child') 1 ، 2 ، 3
العنصر الأولli $('li:first') 1
العنصر الأخيرli $('li:last') 6
عنصر liالطفل الأخير $('li:last-child') 3 ، 6
عناصر liفرعية فريدة من الوالدين $('li:only-child') لا
الطفل الثانيli $('li:nth-child(2)') 3 ، 4
يعطي المحددان $ ('li: first-child') و $ (li: first ') النتيجة المرئية نفسها. ومع ذلك ، تختلف أسباب هذه النتائج:
  • في حالة $ ('li: first-child') ، يتم تعيين خاصية اللون CSS الأولى إلى اللون الأحمر <li> . وبالمثل بالنسبة للطفل الأول من هذا <li> الأول. من ناحية أخرى ، يرث الطفل الثاني لأول <li> هذه الخاصية.
  • في الحالة الثانية ، يتم تعيين خاصية اللون CSS التي تمت تهيئتها باللون الأحمر إلى أول علامة <li> ، ويرث الطفلان هذه الخاصية.

محددات زائفة للعناصر المحددة


عند استخدام محدد CSS ، يتم تحديد عنصر واحد أو أكثر في DOM . عن طريق إضافة محدد زائف إلى المحدد ، ستتمكن من تصفية التحديد عن طريق الاحتفاظ فقط بالعناصر الفردية والزوجية ، وفهرسة معينة ، إلخ. انظر إلى الجدول التالي:
محدد العناصر المختارة
:even حتى العناصر
:odd البنود الفردية
:eq() العنصر الذي تم تحديد الفهرس الخاص به
:gt() العناصر التي يكون فهرسها أكبر من ( أكبر من ) الفهرس المحدد
:lt() العناصر التي يكون فهرسها أقل من ( أقل من ) الفهرس المحدد
للتغيير ، سنقوم بعمل اختيارات في سلسلة من الفقرات. إليك كود HTML المستخدم:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>محددات CSS </title>
  </head>
  <body dir="rtl">
    <p>الفقرة 1</p>
    <p>الفقرة 2</p>
    <p>الفقرة 3</p>
    <p>الفقرة 4</p>
    <p>الفقرة 5</p>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        //كود jQuery
      }); 
    </script>
  </body>
</html>
سوف نعرض بعض عناصر هذه القوائم المتداخلة باللون الأحمر باستخدام طريقة css() jQuery
معيار محدد jQuery الفقرة المعدلة
عناصر pالأقران $('p:even') 1 ، 3 ، 5
عناصر pغريبة $('p:odd') 2 ، 4
عناصر pبعد الثانية $('p:gt(1)') 3 ، 4 ، 5
عنصر pالفهرس 4 $('p:eq(3)') 4
عناصر pقبل الرابع $('p:lt(3)') 1 ، 2 ، 3

محددات من عناصر معينة


يبحث هذا القسم في محددات محددة لعلامات معينة أو يصعب تصنيفها في فئات أخرى. انظر إلى الجدول التالي:
محدد jQuery العناصر المختارة
:header جميع الألقاب <h1> إلى <h6>
:hidden العناصر المخفية
:visible عناصر مرئية
:not() العناصر التي لا تتطابق مع المحدد المحدد
فيما يلي الكود المستخدم لاختبار هؤلاء المختارين:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>محددات CSS </title>
  </head>
  <body>
    <h1>عنوان من الصنف 1</h1>
    <h2> عنوان من الصنف 2</h2>
    <h3> عنوان من الصنف 3</h3>
    <p>فقرة</p>
    <div> نص في علامة div </div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('div').hide();
        //كود  jQuery
      }); 
    </script>
  </body>
</html>
السطر 17($('div').hide();) ، عبارة jQuery تخفي العلامة <div>باستخدام الطريقة hide() . بدوره ، حاول استخدام عبارات jQuery الثلاثة التالية:
معيار بيان jQuery تأثير
اختر كل العناوين $(':header').css('color','red'); <h1>، <h2>و </div> <H1 id="togg1" class="togg"><i id='c1' class="fas fa-chevron-down" style="float:left"></i>يتم عرض العناوين باللون الأحمر.
عرض العناصر المخفية $('div:hidden').show(); يتم عرض العنصر divالذي كان مخفيًا على السطر 17.
إخفاء جميع العناوين باستثناء العنوان<h1> $(':header:not(h1)').hide(); جميع علامات العنوان مخفية ، باستثناء العلامة <h1>.

محددات الزائفة الخاصة بالنموذج


النماذج لها مجموعة خاصة بها من محددات CSS الزائفة. باستخدامها ، من السهل جدًا معالجة عنصر أو نوع معين من العناصر. انظر إلى الجدول التالي:
محدد العناصر المختارة
:input جميع عناصر من نوع input، textarea، selectوbutton
:button اكتب العناصرbutton
:checkbox اكتب العناصرcheckbox
:checked العناصر التي يتم فحصها
:radio اكتب العناصرradio
:reset اكتب العناصرreset
:image جميع الأزرار من نوعimage
:submit اكتب العناصرsubmit
:text اكتب العناصرtext
:password اكتب العناصرpassword
:selected العناصر المختارة
:focus تحديد العنصر إذا كان لديه التركيز
:enabled عناصر التحقق من صحة
لتوضيح هذه المحددات الزائفة ، سوف نستخدم نموذجًا كلاسيكيًا جدًا يحتوي على:
  • مربع النص ؛
  • كلمة السر ؛
  • زرين راديو
  • مربع نص متعدد الأسطر ؛
  • إرسال زر وزر إعادة الضبط ؛
  • زر الصورة.
هنا هو الكود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>محددات CSS</title>
  </head>
  <body dir="rtl">
    <form>
      اسم المستخدم
      <input type="text" name="nom"><br />

      كلمة العبور
      <input type="password" name="pass"><br />

      الجنس<br>
      رجل <input type="radio" name="sexe" value="H">
      امرأة <input type="radio" name="sexe" value="F"><br />

      تعليقات
      <textarea rows="3" name="commentaires">أكتب تعليقاتك هنا</textarea><br />

      <input type="image" src="chat.jpg"><br />

      <input type="submit" value="ارسال">
      <input type="reset" value="الغاء">
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        // كود  jQuery
      }); 
    </script>
  </body>
</html>
تم التنفيذ ، يبدو هذا الكود كالتالي:
jQuery web
سنقوم بتغيير لون خلفية بعض عناصر النموذج وتغيير حجم زر الصورة باستخدام بضعة أسطر من jQuery ، كما في الجدول التالي:
اكتمال العمل jQuery / بيان جافا سكريبت تأثير
تلوين جميع مجالات المدخلات $(':input').css('background','yellow'); تحتوي مربعات النص وأزرار الاختيار والأزرار على خلفية صفراء.
تلوين حقل إدخال معين $(':password').css('background','yellow'); حقل الكتابة passwordله خلفية صفراء.
تغيير حجم حقل الكتابةimage $(':image').css('width','100px'); يتم تغيير حجم حقل inputالكتابة imageبحيث يكون عرضه 100 بكسل.
التركيز على أول حقل الإدخال والتلوين باللون الأصفر $$('div ul li[class="pair"]')
li[class] document.forms[0].nom.focus(); $(':focus').css('background','yellow'); التعليمة الأولى تعطي التركيز على حقل الإدخال الأول والثانية تلون خلفيتها باللون الأصفر.

المحددات المستخدمة في الجداول


على الرغم من أن الجداول لا تحتوي على محددات محددة ، فإن العديد من المحددات التي تمت مناقشتها في الأقسام السابقة مفيدة في تنسيق جداول HTML بسرعة.
شبه محدد العناصر المختارة
:first العنصر الأول
:last العنصر الأخير
:eq() العنصر الذي تم تحديد الفهرس الخاص به
:gt() العناصر التي يكون فهرسها أكبر من الفهرس المحدد
:lt() العناصر التي يكون الفهرس أقل من الفهرس المحدد
:even عناصر المؤشر حتى
:odd عناصر مؤشر غريب
:empty العناصر التي ليس لديها أطفال
:not() العناصر التي لا تتطابق مع المحدد المحدد
سنقوم بتطبيق هذه المحددات الزائفة من خلال تطبيقها على الجدول المحدد في HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>محددات CSS</title>
  </head>
  <body dir="rtl">
    <form>
      <table border="1">
      <tr><td></td><td>القاعة 1</td><td>القاعة 2</td></tr>
      <tr><td>الاثنين</td><td>X</td><td>X</td></tr>
      <tr><td>الثلاثاء</td><td></td><td></td></tr>
      <tr><td>الاربعاء</td><td>X</td><td></td></tr>
      <tr><td>الخميس</td><td></td><td>X</td></tr>
      <tr><td>الجمعة</td><td>X</td><td>X</td></tr>
      </table>
    </form> 

    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('td').css('text-align','center');
        // كود  jQuery
      }); 
    </script>
  </body>
</html>
سنقوم بتعيين اللون الأصفر لخلفية بعض خلايا الجدول باستخدام طريقة css()jQuery .
العمل المطلوب المحدد
تلطيخ الخلية الأولى $('td:first')
تلوين السطر الاخير $('tr:last')
تلطيخ الخلايا الفارغة $(':empty')
تلوين الخطوط حتى $('tr:even')
تلطيخ الخلايا المقترنة $('td:even')
خطوط مؤشر التلوين أكبر من 2 $('tr:gt(1)')
تلوين خطوط الفهرس أكبر من 1 ، وفي المجموعة الفرعية المقابلة ، خطوط الفهرس أقل من 5 $('tr:gt(0):lt(4)')
تلطيخ خلايا الفهرس أكبر من 5 وفي المجموعة الفرعية المقابلة ، خلايا الفهرس أقل من 11 $('td:gt(4):lt(10)')
تلوين جميع الخطوط عدا الأخير $('tr:not(tr:last)')

تصفح العناصر المحددة


خلال هذا الفصل ، رأيت أنه يكفي تطبيق طريقة jQuery على العناصر المحددة للعمل فورًا على هذه العناصر. في هذا القسم ، سأريك طريقة أخرى للتفاعل بشكل أكثر دقة على الاختيار ، باستخدام هذه الطريقة each() .
على سبيل المثال ، افترض أنه يتم عرض ثلاث صور على صفحة ويب. ويتم تحديد هذه الصور عن طريق مسارهم: images1/i1.jpg ، images1/i2.jpgو images1/i3.jpg. كيف تريد أن يكون jQuery لقراءة هذه الصور في المجلد images2وليس في المجلد images1؟ لا أنوي إحباطك ، إنه ببساطة مستحيل بمعرفتك الحالية في jQuery! لحل هذا التمرين ، سيكون من الضروري أن تكون قادرًا على التصرف بشكل فردي على سمة src كل علامة <img>
لتحقيق غاياتنا ، سنستخدم الطريقة each() التي تستعرض العناصر المحددة بواسطة استعلام jQuery وتسمح بتعديلها باستخدام تعليمات JavaScript . بناء جملة الطريقة each() كالتالي:

$('sel').each(function(index){
  // JavaScript
});
... حيث:
  • selهو محدد CSS ، مثل المحددات التي استخدمناها حتى الآن ؛
  • indexهو متغير JavaScript يمثل موضع العنصر في التحديد. سيكون للقيم المتتالية 0 ، 1 ، 2 ، إلخ. حتى تتم مراجعة جميع العناصر ؛
حتى الآن ، لا شيء سيء حقا! ومع ذلك ، فإن السؤال الذي يطرح نفسه: كيفية الوصول إلى العنصر الحالي ، وهذا يعني العنصر المراد تعديله؟ لهذا يجب عليك استخدام الكلمة this . إذا اتبعت ما قلته سابقًا ، فسيتم التعديل عبر سمة srcالعلامة <img> . حسنًا ، في هذه الحالة ، سوف تستخدم التعبير this.src .
دعنا نلقي نظرة على الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <img src="images1/i1.jpg">
    <img src="images1/i2.jpg">
    <img src="images1/i3.jpg">
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        $('img').each(function(index){
          this.src = 'images2/i' + (index+1) + '.jpg';
        });  
      }); 
    </script>
  </body>
</html>
نجد لدينا ثلاث صور ، والدعوة إلى jQuery وبعض التعليمات. عندما يكون DOM متاحًا ، يتم تحديد الصور الموجودة في المستند مع img المحدد ويتم استعراض العناصر المحددة مع الطريقة each() . هناك حاجة إلى سطر واحد فقط لتعديل عناوين الصور:

this.src = 'images2/i' + (index+1) + '.jpg';
المصطلح this.src هو سمة src العلامة <img>التي تتم معالجتها. وبما أن هناك ثلاث صور لتتم معالجتها، المتغير index سوف يأخذ القيم 0، 1 و 2. مصطلح 'images2/i' + (index+1) + '.jpg'بالتالي سوف يكون القيم على التوالي images2/i1.jpg، images2/i2.jpg و images2/i3.jpg الذي هو بالضبط التأثير المطلوب.
في JavaScript ، يتم استخدام علامة + لسَلسَلة (أي ، نهاية إلى نهاية) نصين أو رقمين أو نص ورقم. هنا ، 'images2/i' + (index+1) + '.jpg'يسلسل النص images2/iوالرقم (index+1)والنص .jpg. لاحظ الأقواس حولها index+1؛ بدونها، فإنه ليس القيمة العددية index+1 التي كان متصلا، ولكن القيمة العددية للمتغير index وعدد 1. ما من شأنه أن يجعل القنوات images2/i01.jpg، images2/i11.jpgو images2/i21.jpg.

تحويل JQUERY / DOM


تحويل عنصر DOM إلى كائن JQUERY
إذا تابعت هذا البرنامج التعليمي بعناية ، فأنت تعلم أن مجرد استخدام محدد jQuery يحول عنصر DOM (أو مجموعة من العناصر) إلى كائن jQuery . على سبيل المثال ، تقوم العبارة $('div')بإرجاع كائن jQuery الذي يتيح الوصول إلى جميع العلامات <div>في المستند. <div>ثم يمكن الوصول إلى العلامة الأولى باستخدام $("div")[0];، والثانية بـ $("div")[1];، وهكذا
تحويل متغير JAVASCRIPT إلى كائن JQUERY
مزيج jQuery و JavaScript معا ، وبيانات jQuery وعبارات JavaScript شائعة. بشكل قاتل ، في يوم أو آخر ، ستحتاج إلى تحويل متغير JavaScript إلى كائن jQuery بحيث يمكنك تطبيق الأساليب القوية لتلك اللغة عليها. حسنًا ، لا يوجد شيء أكثر بساطة:

var variableJS = 'text';
var variableJQ = $(variableJS);
ينشئ السطر الأول متغير JavaScript عن طريق تعيين نص بسيط له. يقوم الثاني بتحويله إلى كائن jQuery عن طريق "لفه" مع الاسم المستعار $().
في بعض الأحيان يكون من الضروري تطبيق معالجة JavaScript على كائن jQuery . نظرًا لأنه يمكن تطبيق أساليب jQuery فقط على كائنات jQuery ، يجب إجراء تحويل jQuery إلى DOM . لهذا ، سوف تقوم بتطبيق الطريقة .get()على محدد jQuery .
على سبيل المثال ، إذا كان المستند يحتوي على علامات متعددة <span>، فيمكن تحويله إلى صفيف JavaScript بالعبارة التالية:

    var spans = $('span').get();
هنا ، يتم تخزين الصفيف في متغير spans JavaScript . يتم الحصول على القيمة المخزنة في الخلية الأولى للصفيف ، ويتم الحصول spans[0].innerHTML على القيمة المخزنة في الخلية الثانية للصفيف spans[1].innerHTML، وهكذا ...
  • من الممكن تحسين اختيار العناصر بفضل محددات السمة ومحددات الزائفة ومحددات التسلسل الهرمي.
  • النماذج لها مجموعة خاصة من محددات الزائفة. من السهل حفظها ، لديهم اسم العلامات المقابلة ويسبقها ":".
  • باستخدام محدد jQuery ، نحصل على كائن jQuery يحتوي على عنصر DOM واحد أو أكثر. يمكن تطبيق المعالجة الشاملة على هذه العناصر من خلال تطبيق طريقة jQuery عليها. عندما لا يكون العلاج العالمي كافيًا ، فإننا نستخدم حلقة each .
  • مع حلقة each، يتم فحص العناصر المحددة المختلفة واحدا تلو الآخر. يتم التعرف عليها بواسطة الفهرس الخاص بهم ، الذي تم تحديد اسمه في معامل الوظيفة. تتم المعالجة من خلال واحد أو أكثر من تعليمات JavaScript .
  • من المفيد في بعض الأحيان تحويل كائنات jQuery إلى عناصر DOM والعكس. يتم تحويل DOM إلى jQuery باستخدام محدد ، وربما عن طريق قصره على أحد العناصر التي تم إرجاعها. بالنسبة لتحويل jQuery إلى DOM ، فإنه يعتمد على استخدام الطريقة get() .