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


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


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

العملية الأساسية ل JQUERY


ويستند jQuery على وظيفة واحدة: jQuery()، أو الاسم المستعار .$() تقبل هذه الوظيفة مدخلا (parameter) واحدا أو أكثر وتُرجع كائنًا نسميه "كائن jQuery" . يمكن أن تكون المدخلات من أحد الأنواع التالية:
  • وظيفة ، والتي سيتم تنفيذها بمجرد توافر DOM . هذه التقنية تستخدم على نطاق واسع من قبل جميع مبرمجي jQuery .
  • محدد CSS: يتم إرجاع العنصر (أو العناصر) التي تتوافق مع المحدد. سوف نركز على هذه التقنية في هذا الفصل.
  • عنصر HTML أو ملف أو كائن window : يتم إرجاع كائن jQuery المطابق لهذا العنصر.
  • علامة (علامات) HTML واحدة (أو أكثر): يتم إرجاع كائن jQuery المطابق لهذه العلامة و يمكنك تطبيق أساليب jQuery عليها ، على سبيل المثال لإضافة علامة (علامات) على عنصر HTML .

اختيار العناصر


تتمثل إحدى نقاط القوة الكبيرة في jQuery في دمج بناء جملة محددات CSS . من خلال هذا الوسيط ، من الضروري تحديد عقد DOM التي تهمنا ، وذلك باستخدام بناء الجملة $(selection) حيث selectionيمثل محدد. CSS
في الواقع ، يرتبط jQuery بقوة بثلاث لغات أخرى HTML: و JavaScriptو CSS هي لغة مخصصة لتنسيق المستندات المكتوبة بلغة HTML . محددات CSS هي الكلمات والرموز التي تحدد العناصر في مستند HTML . على سبيل المثال ، h2 يمثل علامات<h2> HTML ، أو p يمثل العلامات <p> . باستخدام محدد CSS في الجزء الأول من عبارة jQuery ، سيتم تحديد عنصر (عناصر) HTML المطابقة . بعد ذلك ، سيكون كافياً تطبيق إجراء لتعديل محتواها أو مظهرها.
قبل المتابعة ، إليك بعض محددات CSS التي يجب أن تأخذها في الاعتبار:
  • يسمح لك اسم العلامة ، بدون الأحرف <and> ، بتحديد هذه العلامة. في حالة وجود علامات متعددة بنفس الاسم في المستند ، يتم تحديد كل هذه العلامات. على سبيل المثال ، إذا كان الملف يحتوي على علامات متعددة <div>، فإن محدد CSS div يحدد كل هذه العلامات.
  • تشير علامة # إلى السمة id (أو المعرف) للعلامة. على سبيل المثال ، إذا قمت بتعيين العلامة <p id="premier">، فإن المحدد #premierيختار تلك العلامة. لاحظ أن علامتين لا يمكن أن يكون لهما نفس المعرف.
  • تشير النقطة إلى سمة class . افترض أنك قمت بتعريف العلامة <h2 class="rouge">. يختار المحدد هذه العلامة. عدة علامات يمكن أن يكون لها نفس الفئة. وبالتالي يمكن تطبيق نفس المعاملة على هذه العلامات.
  • للتمييز العلامات <h2>الدرجة rougeعلامات <p>الفئة rouge، سوف تستخدم محددات h2.rouge و p.rouge. تنطبق هذه الحالة بالذات على جميع العلامات والفئات. وبالتالي ، يتم tag_name.class_nameاستخدام المحدد لتحديد علامات tag_nameالفصل class_name .
  • افترض الآن أنك قمت بتحديد <ul></ul>قائمة ذات تعداد نقطي وقائمة ذات تعداد رقمي <ol></ol>. يتم تمييز كل عنصر في القائمتين بعلامات <li> . لتمييز العناصر <li>الموجودة في القائمة ذات التعداد النقطي عن العناصر <li>الموجودة في القائمة ذات التعداد الرقمي ، سوف تستخدم "محدد تنازلي" . وبالتالي ، يكون المحدد ul li لجميع العناصر <li>في القائمة النقطية <ul>، ويكون المحدد ol li لجميع العناصر <li>في القائمة المرقمة <ol> .
  • قد تحتوي بعض علامات HTML على سمة أو أكثر. على سبيل المثال، علامة <img src="chien.jpg" width="40" height="30"> تحتوي على ثلاث سمات src، width و height . لتحديد كل العلامات التي تحتوي على سمة src، سوف تستخدم المحدد [src] .
  • يمكنك حتى الذهاب أبعد من ذلك عن طريق تحديد العلامات ذات السمة التي لها قيمة معينة. على سبيل المثال ، لتحديد جميع العلامات width تم تعيين السمة الخاصة بها على 40 ، ستستخدم المحدد [width="40"] .
  • يمثل الحرف * جميع العلامات في الملف.
والآن ، دعونا نفكر في مثال لفهم كيفية استخدام محددات CSS بشكل أفضل.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul class="red">
      <li class="odd"> العنصر الأول في القائمة النقطية </li>
      <li class="even"> العنصر الثاني في القائمة النقطية </li>
      <li class="odd"> العنصر الثالث في القائمة النقطية </li>
    </ul>
    <div>
      <ul class="blue">
        <li class="odd">premier élément de la liste à puces</li>
        <li class="even">deuxième élément de la liste à puces</li>
        <li class="odd">troisième élément de la liste à puces</li>
      </ul>
    </div>
    <ol class="red">
      <li> العنصر الأول في القائمة المرقمة </li>
      <li> العنصر الثاني في القائمة المرقمة </li>
      <li> العنصر الثالث في القائمة المرقمة </li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // أدخل رمز jQuery هنا
      });
      </script>
  </body>
</html>
يقدم الجدول التالي بعض الأمثلة المهمة عن المحددات وما يتوافقون معه.
محدد CSS محدد jQuery معنى
ul $('ul') العلامات<ul>
ul.bleu $('ul.bleu') العلامة <ul>الصفbleu
div ul $('div ul') العلامة <ul><div>الموجودة في العلامة
div ul li[class="pair"] $$('div ul li[class="pair"]') العلامة <li>المضمنة في العلامة <ul>، الموجودة نفسها في العلامة <div>، وتكون السمة classصالحةpair
li[class] $('li[class]') العلامات <li>التي لها سمةclass
li[class="impair"] $('li[class="impair"]') العلامات <li>التي لها سمة classقيمة فردية
* $('*') جميع علامات الوثيقة
ربما لاحظت استخدام علامات الاقتباس في عمود "jQuery محدد": $('div ul li[class="even"]')و $('li[class="odd"]'). هذا لأنه من المستحيل استخدام الفواصل العليا داخل الفواصل العليا الأخرى. عند حدوث مثل هذه الحالة ، يتم استبدال الفواصل العليا الداخلية بعلامات اقتباس.
ما هي طبيعة الكائن الراجع؟
النتيجة التي يتم إرجاعها بواسطة الدالة $()هي كائن jQuery . يشبه هذا الكائن مصفوفة: تحتوي على خاصية length ويمكن الوصول إلى العناصر المحددة بواسطة فهرس. مثلا :
  • $('a').length إرجاع عدد روابط النص التشعبي الموجودة في الصفحة.
  • $('ul.blue').length إرجاع عدد علامات <ul>الفئة blue .
  • $('li[class="odd"]').length إرجاع عدد العلامات <li>التي تكون فيها سمة class بقيمة فردية (odd) .
  • $('body').length إرجاع "1" لأن الملف يحتوي على علامة واحدة فقط <body> .
للوصول إلى أحد العناصر المحددة ، حدد الفهرس الخاص به بين أقواس معقوفة بعد المحدد. مثلا :
  • $('a')[0] إرجاع أول رابط تشعبي للصفحة.
  • $('ul.bleu')[3] إرجاع علامة <ul>الدرجة الرابعة blue .
  • $('body')[0] ما يعادل document.body .
تطبيق طريقة للاختيار
بمجرد اختيار عنصر واحد أو أكثر بتعليمات $(selector)، يمكنك تطبيق علاج عليها من خلال تشغيل طريقة jQuery . للقيام بذلك ، أضف نقطة بعد قوس الإغلاق وحدد طريقة الاستخدام:

    $(selector).action
... حيث يتم $(selector)تحديد عنصر واحد أو أكثر في الملف وتنفيذ action المعالجة على العناصر المحددة. على سبيل المثال ، لكتابة رسالة في علامة <span>معرف result، ستستخدم شيئًا يشبه الكود التالي:

    $('#result').html('نص للكتابة في علامة span');
هذه الطريقة html() هي واحدة من الطرق الكثيرة التي يمكن استخدامها في jQuery
مفاهيم أساسية
سأتحدث هنا عن فكرتين لا غنى عنهما: وظائف الاستدعاء وتسلسل الطرق.
وظائف رد الاتصال
وظيفة رد الاتصال (أو callback باللغة الإنجليزية) هي وظيفة يتم تنفيذها عند انتهاء وظيفة أخرى من التنفيذ. في jQuery ، تستخدم وظائف رد الاتصال بشكل أساسي لعمل رسوم متحركة واتصالات Ajax . سنعود إلى هذين الموضوعين في الجزء 3 من الدورة.
فقط ، هنا مثالاً على وظيفة رد الاتصال ، يتم تطبيقها على عناصر الفصل red:

$(function() {
    $(".red").fadeOut("slow",function(){
      $(this).fadeIn("slow");
    }); 
});
هذا الرمز يجعل علامات الكلاس red تختفي وتعاود الظهور تدريجياً .
طرق التسلسل
التسلسل هو مفهوم قوي للغاية و مع ذلك سهل الفهم. نظرًا لأن أساليب jQuery تُرجع كائنًا jQuery ، فمن الممكن أن "تقوم" بتسلسلها ، أي لتنفيذها واحدة تلو الأخرى.
على سبيل المثال ، الإرشادات الأولى والثانية تعادل الإرشادات الثالثة:

$('.red').css('background','red');
$('.red').css('color','yellow');

$('.red').css('background','red').css('color','yellow');
لم ندرس طريقة jQuery حتى الآن css()، لكنني متأكد من أنه من خلال ملاحظة كيف تعمل ، تفهم كيف تعمل. هذه الطريقة لها مدخلتان. الأولى هي خاصية CSS والثانية هي القيمة المراد تعيينها لهذه الخاصية.
على سبيل المثال ، $('.red').css('background','red');يعين الخلفية ( background) من اللون الأحمر ( red) إلى علامات الكلاس ( $('.red')) red
العبارة $('.red').css('color','yellow') ، من ناحية أخرى ، تعين اللون الأصفر ( yellow) إلى علامات الفئة red .
بتسلسل هذين البيانين ، redيكون لعلامات الفصل خلفية حمراء وأحرف صفراء. وكل هذا في تعليمات واحدة!
هذه الطريقة css()هي واحدة من الطرق الكثيرة التي يمكن استخدامها في jQuery
  • يستخدم محدد $('sel') jQuery في بناء جملة CSS . عن طريق استبدال selبأي محدد CSS ، سيتم تحديد العناصر المقابلة (إن وجدت) في DOM . مثلا :
    • $('a') يحدد جميع الروابط.
    • $('.rouge') يحدد عناصر الكلاس rouge؛
    • $('#e2') يختار العنصر المعرف باسم e2؛
    • $('[src]') يختار جميع العناصر التي لها سمة src؛
    • $('[width="40"]') يحدد جميع العناصر التي لها سمة widthتساوي 40.
  • يمكن أن يشير الكائن الذي تم إرجاعه بواسطة محدد jQuery إلى أكثر من عنصر واحد. للوصول إلى عنصر ما ، يمكنك تحديد الفهرس الخاص به بين أقواس معقوفة ، مع مراعاة أن العنصر الأول يحتوي على فهرس يساوي 0. على سبيل المثال ، $('a')[2]يشير المحدد إلى الرابط الثالث الموجود في الصفحة.
  • لتطبيق طريقة على كائن jQuery يتم الحصول عليه باستخدام محدد ، ما عليك سوى كتابة هذه الطريقة على يمين المحدد بفصلها عن النقطة. على سبيل المثال، العبارة التالية تكتب كل الروابط في الصفحة باللون الأصفر: $('a').css('color', 'yellow');.
  • لتسلسل طريقتين من jQuery ، اكتبهما واحدًا تلو الآخر عن طريق فصلهما بنقطة. على سبيل المثال، هذه العبارة تطبق على خلفية حمراء والنص باللون الاصفر لعناصر الكلاس المسمي rouge .
    $('.rouge').css('background','red').css('color','yellow');