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


الدرس: النماذج والجداول


الصفحة السابقة
في هذا الفصل ، سوف نلقي نظرة على النماذج والجداول في jQuery . أنا لا أتحدث عن جداول HTML <table></table>، لكن عن جداول JavaScript المحددة على سبيل المثال عن طريق إجراء تسلسل للبيانات أو إرجاعها بواسطة الطريقة queue() .
سترى أولاً كيفية إدارة التركيز(focus) أو فقدان التركيز لعنصر الجدول أو كيفية إفراغ نموذج. في الخطوة الثانية ، سترى طرقًا مختلفة مرتبطة بمعالجة البيانات الموجودة في الجداول.

النماذج


بعض التقنيات التي سنراها ممكنة في HTML5 و CSS3 . لسوء الحظ ، لن يتوفر لزوار موقعك بالضرورة متصفح حديث ، لذلك من الجيد معرفة كيفية إعدادهم في jQuery .
إعطاء التركيز (FOCUS) لعنصر
إذا كان عليك إنشاء صفحة تسجيل دخول ، فسيقدر مستخدميك أن يتم تحديد مربع النص الأول (المربع الذي سيتم إدخال اسمه) افتراضيًا. هذا بسيط للغاية في jQuery . افترض أنك قمت بتعريف مربع النص #user كما يلي:
الذي يعطي الشكل التالي.

  <input type="text" id="user">
لعرض نقطة الإدراج في مربع النص هذا وضربات المفاتيح التي وقع الضغط عليها ، استخدم عبارة jQuery هذه:

$('#user').focus();
أي عنصر لديه التركيز(FOCUS)؟
قد يكون من المثير للاهتمام أحيانًا معرفة أي عنصر له التركيز في نموذج ما. على سبيل المثال ، لتعديل التنسيق الخاص به بحيث يعرف المستخدم في بسهولة العنصر الذي يتم تعديله.
في هذا المثال ، يحتوي النموذج على ثلاثة مربعات نصية <input type="text"> وواحدة <textarea> . عندما ينقر المستخدم في أحد هذه العناصر ، يتم عرض معرفه في علامة <span> .

<span id="status">أنقر فوق احد عناصر النموذج</span><br /><br />
<form>
  <input type="text" id="zone1"><br />
  <input type="text" id="zone2"><br />
  <input type="text" id="zone3"><br />
  <textarea id="zone4"></textarea>
</form>

<script src="jquery.js"></script>
<script>
  $(function() {
    var leFocus;  
    $('input, textarea').focus( function() { 
      leFocus = $(this).attr('id');        
      $('#status').text(leFocus + ' a le focus');
    }); 
  });
</script>
بمجرد تعريف المتغيرleFocus ، يتم البحث في DOM لتحديد العلامات <input> أو <textarea> لديها التركيز(focus) :

$('input, textarea').focus( function() {
ثم يتم ارجاع اسم العلامة التي تحتوي على التركيز في دالة الإرجاع. الكلمة الأساسية thisهي العنصر الذي يحتوي على التركيز. هنا ، نستخرج سماتها id بالطريقة attr() :

leFocus = $(this).attr('id');
يتم عرض اسم المعرف في النهاية في العلامة <span> :

$('#status').text(leFocus + ' لديه التركيز focus');
تسليط الضوء على العنصر الذي لديه التركيز(FOCUS)
لقد تعلمت للتو تحديد العنصر الذي يحتوي على التركيز في نموذج. أقترح الآن تعديل تنسيق هذا العنصر. لذلك ، يجب أن تكون مهتمًا ليس فقط بالعنصر الذي يكسب التركيز ( الطريقة (focus()، ولكن أيضًا بالعنصر الذي يفقده (الطريقة (blur() خلاف ذلك ، بعد بضع نقرات ، سيكون من المستحيل معرفة أي عنصر يحتوي على التركيز ، لأن جميعهم سيكون لديهم نفس التنسيق!
في المثال التالي ، سنعمل على خلفية لون العناصر التي تربح وتفقد التركيز. لكن لا شيء يمنعك من التصرف بناء على خاصية أو أكثر. هنا هو الرمز المستخدم:

<span id="status"> أنقر فوق احد عناصر النموذج </span><br /><br />
<form>
  <input type="text" id="zone1"><br />
  <input type="text" id="zone2"><br />
  <input type="text" id="zone3"><br />
  <textarea id="zone4"></textarea>
</form>    

<script src="jquery.js"></script>
<script>
  $(function() {
    var leFocus;  
    $('input, textarea').focus( function() { 
      leFocus = '#' + $(this).attr('id');        
      $(leFocus).css('background-color', '#afc');
    }); 
    $('input, textarea').blur( function() { 
      leFocus = '#' + $(this).attr('id');        
      $(leFocus).css('background-color', '#fff');
    }); 
  });
</script>
جرب الكود
بمجرد تعريف المتغيرleFocus ، يتم استخدام الطريقة focus() لمعرفة أي عنصر يكتسب التركيز:

$('input, textarea').focus( function() {
تتم تهيئة المتغيرleFocus بعد ذلك بمعرف هذا العنصر ، مسبوقًا بعلامة # :

leFocus = '#' + $(this).attr('id');
المتغير leFocus قابل للاستخدام مباشرة في محدد jQuery . من خلال العمل على خاصية CSS background-color، يتغير لون خلفية العنصر بمجرد الحصول على التركيز:

$(leFocus).css('background-color', '#afc');
يبقى الآن تغيير لون خلفية العنصر الذي فقد التركيز ، إذا كان هناك مثل هذا العنصر. لهذا، ونحن نستخدم طريقة blur()، وتطبيق عناصر <input> و <textarea> الوثيقة:

$('input, textarea').blur( function() {
كما هو الحال في طلب jQuery السابق ، يتم تخزين معرف العنصر في المتغير leFocus :

leFocus = '#' + $(this).attr('id');
الآن فقط استخدم هذا المتغير في محدد لتغيير لون خلفية العنصر الذي فقد التركيز:

$(leFocus).css('background-color', '#fff');
إفراغ نموذج
لإلغاء البيانات المدخلة في نموذج ، ما عليك سوى استخدام زر reset :

<input type="reset" id="annuler" value="Cancel">
إذا كنت ترغب في ذلك ، يمكن أيضًا تنفيذ هذا الإجراء في jQuery . قم بإعداد زر إعادة ضبط النموذج:

<button id="raz"> إعادة تعيين </button>
التقط الحدث clickعلى هذا الزر وقم بتنفيذ الوظيفة (reset_form() (أو أي اسم آخر يناسبك):

$('#raz').click(reset_form);
وهنا هو رمز هذه الوظيفة:

function reset_form () {
  $(':input')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .prop('checked', false)
   .prop('selected', false);
}
محدد jQuery يختار جميع العلامات <input> من الوثيقة، ما عدى العناصر button ، submit ، reset و hidden :

$(':input')
.not(':button, :submit, :reset, :hidden')
تتم إزالة قيم هذه العناصر (إن وجدت):

.val('')
ثم، إذا كانت موجودة، يتم حذف الصفات checked و selected :

.prop('checked', false)
.prop('selected', false);
عندما تحتوي الصفحة على نموذج واحد فقط ، ما عليك سوى تحديثه لحذف أي بيانات قد يتم إدخالها. لذلك ، سوف تستخدم بيان location.reload();JavaScript .
التحقق من صحة النماذج
هل تريد التحقق من صحة البيانات التي أدخلها المستخدم في أحد النماذج الخاصة بك؟ على سبيل المثال ، من خلال اختبار أن عنوان البريد الإلكتروني الذي تم إدخاله قد تم تشكيله جيدًا ، أو أن تاريخ الميلاد هو تاريخ؟ الأسهل هو استخدام البرنامج المساعد(plugin) . بعد أن وصلت إلى هذه النقطة في الدورة التدريبية ، أنت لا تعرف بعد كيفية استخدام الإضافات (plugin) في jQuery ، ولكن هل تعتقد أن هذا موضوع الجزء التالي. إذا لم يكن لديك الصبر للانتظار حتى ذلك الحين ، فارجع إلى الفصل الأول من قسم الإضافات.

الجداول


الوظيفة $.GREP()
تبحث هذه الوظيفة عن عناصر المصفوفة التي تلبي معيارًا واحدًا أو أكثر. هنا بناء الجملة:

var tableau2 = $.grep(tableau, function(element, index) { … }, inv);
... حيث:
  • tableau هو الصفيف الذي يحتوي على البيانات لتصفيتها؛
  • element و indexهي العناصر والأرقام لعناصر مجموعة.
  • Inv يشير إلى ما إذا كان المعيار يجب ( true) أو لا يجب ( false أو غير محدد).
و القليل من الممارسة سيكون مرحبا به حقا. فيما يلي بعض أسطر التعليمات البرمجية. اثنين من علامات <span> تستخدم لعرض النتائج، وثلاثة أزرار لتصفية الجدول الانطلاق وفقا لمعايير مختلفة:

<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="filtre1">بعد الخامس</button>
<button id="filtre2">مختلف عن Mathis, Hugo و Yanis</button>
<button id="filtre3">قبل الخامس</button>


<script src="jquery.js"></script>
<script>
  $(function() {
    var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé', 'Nathan', 'Manon', 'Noah', 'Sarah ', 'Louis', 'Luna', 'Kylian', 'Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo', 'Zoé', 'Yanis', 'Maélys'];
    var tableau2;
    $('#un').text('"البيانات الأصلية : ' + tableau.join(', '));
    $('#filtre1').click(function() {
      tableau2 = $.grep(tableau, function(el,ind) {
        return (ind > 4);
      });
      $('#deux').text('بعد الخامس : ' + tableau2.join(', '));
    });
    $('#filtre2').click(function() {
      tableau2 = $.grep(tableau, function(el,ind) {
        return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
      });
      $('#deux').text('مختلف عن Mathis, Hugo و Yanis : ' + tableau2.join(', '));
    });
    $('#filtre3').click(function() {
      tableau2 = $.grep(tableau, function(el,ind) {
        return (ind > 4);
      }, true);
      $('#deux').text('قبل الخامس : ' + tableau2.join(', '));
    });
  }); 
</script>
جرب الكود
يبدأ كود jQuery بتحديد الصفيف وتخزين بعض الأسماء ، ثم يحدد الصفيف الذي سيتم تخزين النتائج فيه:

$(function() {
  var tableau = ['Luca', '…' 'Maélys'];
  var tableau2;
العبارة التالية تقرأ البيانات المخزنة في الصفيف ونسخها في العلامة الأولى <span>، مفصولة بفاصلة ومسافة:

$('#un').text('"البيانات الأصلية : ' + tableau.join(', '));
عند النقر على الزر الأول:

$('#filtre1').click(function() {
...
يتم تطبيق الوظيفة grep() على المصفوفة فقط عن طريق تحديد العناصر التي يكون فهرسها أكبر من 5 (يتم شرح القيمة 4 بحقيقة أن العنصر الأول يحتوي على فهرس يساوي 0):

tableau2 = $.grep(tableau, function(el,ind) {
  return (ind > 4);
});
ثم يتم عرض الجدول الذي تم تحديثه بواسطة الوظيفة ر grep() في العلامة الثانية <span> :

$('#deux').text('بعد الخامس : ' + tableau2.join(', '));
عند النقر فوق الزر الثاني ، يتم تطبيق الوظيفة grep() على الجدول. يتم الحفاظ على العناصر المختلفة لكل من "Mathis" و "Hugo" و "Yanis" :

tableau2 = $.grep(tableau, function(el,ind) {
  return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
});
ثم يتم عرض النتيجة في العلامة الثانية .
أخيرًا ، عند النقر فوق الزر الثالث ، يتم تطبيق الوظيفة grep()على المصفوفة مع الحفاظ على عناصر الفهرس فقط أكبر من 5. لأن المُدخل الثالث له قيمة true، يتم عكس معيار التحديد. وبالتالي ، فإن عناصر التي لها فهرس أقل من 5 التي سيتم عرضها:

tableau2 = $.grep(tableau, function(el,ind) {
  return (ind > 4);
}, true);
يتم عرض النتيجة في العلامة الثانية <span> .
الوظيفة $.MAP()
تقوم هذه الوظيفة بنسخ جزء أو كل جدول من خلال تطبيق علاج. هنا بناء الجملة:

tableau2 = $.map(tableau, function(el, ind) { … });
... حيث:
  • Tableau هو الجدول الذي يحتوي على البيانات المراد نسخها ؛
  • el و indهي العناصر والفهرس لعناصر مجموعة.
  • tableau2 هي المجموعة التي يتم فيها تخزين نتائج الوظيفة map() .
لجعل هذا أكثر وضوحا ، سوف نعمل على مثال ملموس. اثنين من علامات <span> تستخدم لعرض النتائج، واثنين من أزرار الأوامر لنسخ الجدول البداية من خلال تطبيق اثنين من العلاجات المختلفة:

<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="copie1">الأسماء بأحرف كبيرة</button>
<button id="copie2">فهرس و أسماء بأحرف صغيرة</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
    var tableau2;
    $('#un').text('"البيانات الأصلية : ' + tableau.join(', '));
    $('#copie1').click(function() {
      tableau2 = $.map(tableau, function(el,ind) {
        return (el.toUpperCase());
      });
      $('#deux').text(' الأسماء بأحرف كبيرة : ' + tableau2.join(', '));
    });
    $('#copie2').click(function() {
      tableau2 = $.map(tableau, function(el,ind) {
        return (ind + ' : ' + el.toLowerCase());
      });
      $('#deux').text('فهرس و أسماء بأحرف صغير : ' + tableau2.join(', '));
    });
  }); 
</script>
جرب الكود
تحدد عبارات jQuery الأولى صفيف البدء والمصفوفة التي سيتم فيها إنشاء النسخ وتعرض صفيف البداية:

$(function() {
  var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
  var tableau2;
  $('#un').text('Données originales : ' + tableau.join(', '));
عند النقر على الزر الأول ، يتم تطبيق الوظيفة map() على الجدول. يتم إرجاع الأسماء الأولى بأحرف كبيرة وتخزينها في tableau2 :

tableau2 = $.map(tableau, function(el,ind) {
  return (el.toUpperCase());
ثم يتم عرض هذا الجدول في العلامة الثانية <span> :

$('#deux').text('Prénoms en majuscules : ' + tableau2.join(', '));
عند النقر فوق الزر الثاني ، يتم تطبيق الوظيفة map() على الجدول. يتم تحويل كل عنصر من عناصر الصفيف إلى سلسلة تحتوي على فهرس الصفيف متبوعًا بالفاصل ":" والاسم الأول يتم تحويله إلى أحرف صغيرة:

tableau2 = $.map(tableau, function(el,ind) {
  return (ind + ' : ' + el.toLowerCase());
كما كان من قبل ، يتم عرض النتيجة في العلامة الثانية <span> .
الوظيفة $.INARRAY()
تبحث عن عنصر في الجدول؟ الوظيفة inArray() هنا لأجلك. هنا بناء الجملة:

var position = $.inArray('valeur', tableau, index)
... حيث:
  • Valeur هي القيمة المطلوبة ؛
  • Tableau هو الجدول الذي سنبحث فيه ؛
  • Index ، إذا كان محددًا ، هو رقم الخلية التي تبدأ منها عملية البحث (كن حذرًا ، تحتوي الخلية الأولى على فهرس 0) ؛
  • Position هو الموضع الأول للقيمة في الجدول. إذا كان البحث غير ناجح ، فان الوظيفة inArray()تُرجع 1-.
افترض أن المتغير tableau معرف على النحو التالي:

var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
يعرض الجدول التالي بعض أمثلة القيم التي تم إرجاعها بواسطة الدالة inArray() .
تعليمات القيمة الراجعة
$.inArray('Emma',tableau) 1
$.inArray('Léa',tableau) 4
$.inArray('Luca',tableau, 5) -1 لأن لوكا في الموضع 0 وليس بعد الموضع 5
$.inArray('Alfred',tableau) -1 لأن ألفريد ليس في الجدول
الوظيفة $.MERGE()
من الضروري في بعض الأحيان تجميع المعلومات الموجودة في جدولين. الوظيفة merge() موجودة لتسهيل عملك. هنا بناء الجملة:

$.merge(tableau1, tableau2);
...
أين tableau1 و tableau2 هما الجدولان للتجميع معا. عند تنفيذ الوظيفة ، يحتوي الجدول الأول على بياناته الخاصة وبيانات الجدول الثاني . مثلا :

var tableau1 = ['Luca', 'Emma', 'Mathis', 'Jade', 'Léa', 'Enzo', 'Chloé'];
var tableau2 = ['Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Théo'];
$.merge(tableau1, tableau2); 
alert(tableau1.join(', '));
الذي يعطي الشكل التالي.
jQuery web
  • لتركيز عنصر من عناصر النموذج ، ستستخدم العبارة $('élément').focus(); .
  • لمعرفة أي عنصر يحتوي على التركيز في نموذج ما ، أولاً استعرض DOM مع العبارة
  • $('input, textarea').focus( function() { … }); . ثم استخدم العبارة var idFocus = $(this).attr('id'); لاسترداد معرف العنصر الذي يحتوي على التركيز.
  • لإفراغ محتويات النموذج ، يجب عليك تطبيق الأساليب val('')، removeAttr('checked') و removeAttr('selected') . إذا كانت الصفحة تحتوي على نموذج واحد فقط ، يمكنك تحديثه بالبيان location.reload(); .
  • تقوم الوظيفة $.grep() بتحديد عناصر معينة في صفيف ونسخها إلى صفيف آخر.
  • تقوم الوظيفة $.map() بنسخ عناصر الصفيف في صفيف آخر عن طريق تطبيقها على عملية.
  • $.inArray() تبحث الوظيفة في حالة وجود عنصر معين في الجدول.
  • تقوم $.merge() بتجميع المعلومات الموجودة في جدولين.