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


الدرس: النصوص والصور


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

السلاسل


حذف المسافات في سلسلة
تعمل الوظيفة $.trim() على إزالة المسافات في بداية ونهاية السلسلة. لتسليط الضوء على تشغيلها ، تطلب التعليمة البرمجية التالية من المستخدم إدخال نص في مربع النص عن طريق إضافة مسافات قبل/بعد النص. ثم يتم عرض هذا النص في علامة <pre> عند إدخاله ، ثم بعد معالجته بواسطة الوظيفة trim() . هنا هو الرمز المستخدم:

اكتب نصًا في مربع النص من خلال البدء و / أو الإنهاء بمسافات ، ثم انقر فوق الزر.<br><br>
<input type="text" id="texte" />
<button id="action">أنقر هنا</button>
<pre id="resultat"></pre>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#action').click(function() {
      var leTexte = $('#texte').val();
      $('#resultat').html('النص الأصلي           : "' + leTexte + '"' + 
                      '<br>بعد تنفيذ  trim() : "' + $.trim(leTexte) + '"');
    });  
  });
</script>
والنتيجة هي في الشكل التالي.
jQuery web
تزيل الدالة $ .trim () جميع المسافات في بداية السلسلة وفي نهايتها
هذا الكود ليس غير عادي ويجب أن تكون قادرًا على فهمه بنفسك. ومع ذلك ، لاحظ استخدام علامة <pre> لعرض النتيجة. هذا الاختيار للعلامة مقصود ، لأنه يتم عرض النص بأحرف غير متناسبة ، بمعنى أن عرضه ثابت. على سبيل المثال، الفضاء واسع مثل حرف ع أو حرف ب .
موقع حرف في سلسلة
تحصل الوظيفة charAt() على الحرف في موضع معين في السلسلة. هنا بناء الجملة:

var unCaractere = chaine.charAt(position);
... أين chaine هو سلسلة أحرف ، position هو موضع الحرف المراد استخراجه (كن حذرًا ، الحرف الأول يوجد في الموضع 0 ، والحرف الثاني في الموضع 1 ، وما إلى ذلك) unCaractere وهو المتغير الذي يتم فيه تخزين الحرف المستخرج.
في المثال التالي ، يقوم المستخدم بإدخال سلسلة أحرف في مربع النص الأول ، وموضع في مربع النص الثاني ، ثم يضغط على الزر. ثم يتم عرض الحرف في الموضع المحدد في علامة <div> .

اكتب النص في مربع النص الأول ، و موضع في مربع النص الثاني ، ثم انقر فوق الزر ..<br><br>
النص : <input type="text" id="texte" /><br>
الموضع : <input type="text" id="position" /><br>
<button id="action">أنقر هنا</button><br>
<div id="resultat"></div>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#action').click(function() {
      var leTexte = $('#texte').val();
      var laPosition = $('#position').val();
      var leResultat = 'الحرف في الموضع  ' + laPosition + ' هو "' + leTexte.charAt(laPosition) + '"';
      $('#resultat').text(leResultat);
    });  
  });
</script>
يوضح الشكل التالي النتيجة في المتصفح.
jQuery web
البحث واستبدال النصوص
من الضروري في بعض الأحيان تحديد العنصر (العناصر) الذي يحتوي على كلمة أو نص معين. لهذا ، سوف تستخدم المحدد : contains . على سبيل المثال ، لتحديد جميع العلامات <div> التي تحتوي على كلمة "rouge" ، سوف تستخدم المحدد التالي:

$('div:contains("rouge")')
على سبيل المثال ، يمكنك تغيير لون خلفية <div> الكلمات التي تحتوي على كلمة "rouge" باستخدام هذه العبارة:

$('div:contains("rouge")').css('background-color', 'red');
من الممكن أيضًا استبدال نص واحد بآخر أو بعنصر آخر باستخدام الأسلوب replaceWith() ، الذي يكون بناء الجملة الخاص به كما يلي:

$('sel').replaceWith('contenu');
أين sel هو محدد jQuery contenu وسلسلة HTML أو عنصر DOM أو كائن jQuery الذي سيحل محل العنصر (العناصر) المحدد. انظر إلى الكود التالي ، سيصبح كل شيء واضحًا تمامًا.

<img id="un" src="girafe.jpg"><br>
<button id="changement">استبدل الصورة</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#changement').click(function() {
      $('#un').replaceWith('<img id="unbis" src="chat.jpg">');
    });
  });
</script>
بالنقر فوق الزر #changement ، <img id="un"> سيتم استبدال العلامة ببساطة بالعلامة <img id="unbis"> ، والتي تعرض صورة أخرى.
replaceWith() هي تستبدل دون حذف إذا قدمت مع رمز HTML . ومع ذلك ، فإنه يحذف ويستبدل إذا تم توفيره مع محدد jQuery .

الصور


ما سنراه هنا لن يكون بالضرورة جديدًا بالنسبة لك. كنت أرغب في تقديم تذكير وتعميق بعض التقنيات التي رأيناها بالفعل.
الرد عند مرور مؤشر الماوس على الصورة
لإضافة القليل من التفاعل إلى صفحة ويب ، يمكنك اتباع حركات الماوس والتفاعل عند تحريكها فوق عناصر معينة.
تكبير الصورة عند مرور مؤشر الماوس عليها
هذا المثال كلاسيكي: يتم عرض صورة مصغرة على الصفحة. عند تحليق فوقها بالماوس ، يتم استبدالها بصورة أكبر. عندما يتحرك الماوس خارج الصورة ، يتم عرض الصورة المصغرة مرة أخرى. هنا هو الرمز المستخدم:

<img id="montagne" src="montagnepetit.jpg">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $('#montagne').mouseover(function() {
      $(this).attr('src','montagne.jpg');
    });
    $('#montagne').mouseout(function() {
      $(this).attr('src','montagnepetit.jpg');
    });
  }); 
</script>
يتم عرض صورة مصغرة على الصفحة. عندما يحوم المستخدم فوقه باستخدام الماوس:

$('#montagne').mouseover(function() {
... يتم استبدال الصورة بأخرى. يتم تنفيذ هذا الإجراء من خلال العمل على خاصية src الصورة المصغرة:

$(this).attr('src','montagne.jpg');
عندما لم يعد الماوس على الصورة:

$('#montagne').mouseout(function() {
... يتم استبدال الأخيرة بواسطة الصورة المصغرة. هنا مرة أخرى ، يتم المرور من الصورة إلى الصورة المصغرة من خلال العمل على خاصية src الصورة:

$(this).attr('src','montagnepetit.jpg');
تكبير الصورة مع الرسوم المتحركة عند التحليق
في المثال السابق ، كان الانتقال من الصورة المصغرة إلى الصورة ومن الصورة إلى الصورة المصغرة فوريًا تقريبًا. ماذا عن إضافة القليل من النعومة للتحولات؟ لذلك ، سوف نقوم بما يلي:
  1. تراكب الملصق (thumbnail) والصورة.
  2. إخفاء الصورة ؛
  3. التبديل من الملصق إلى الصورة ومن الصورة إلى الصورة المصغرة باستخدام التحولات fadeIn()/ fadeOut() .
هنا هو الكود المستخدم:

<style type="text/css">
  img{
    position: absolute;
    left: 0px;
    top: 0px;
  }
  #montagneGrand{
    display: none;
  }
</style>

<img id="montagnePetit" src="montagnepetit.jpg">
<img id="montagneGrand" src="montagne.jpg">

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $('#montagnePetit').mouseover(function() {
      $(this).fadeOut(1000);
      $('#montagneGrand').fadeIn(1000);
    });
    $('#montagneGrand').mouseout(function() {
      $(this).fadeOut(1000);
      $('#montagnePetit').fadeIn(1000);
    });
  }); 
</script>
يجب أن تكون كلتا الصورتين في نفس الموقع حتى يكون الانتقال من صورة إلى أخرى سلسًا. من ناحية أخرى ، يجب عرض الصورة المصغرة فقط. تتم كل هذه التنسيقات في CSS . يتم وضع الصورتين تمامًا في أعلى يسار الشاشة ، ثم يتم إخفاء الصورة بحيث يتم عرض الصورة المصغرة فقط.
الآن دعنا ننتقل إلى jQuery ! عندما يكون المؤشر فوق الصورة المصغرة:

$('#montagnePetit').mouseover(function() {
... هذه كانت مخفية بالوظيفة fadeOut() والصورة تستبدلها تدريجياً بالوظيفة fadeIn() :

$(this).fadeOut(1000);
$('#montagneGrand').fadeIn(1000);
على العكس ، عندما يتحرك الماوس خارج الصورة ، فإنه يختفي وتصبح الصورة المصغرة تحل محلها تدريجياً:

$('#montagneGrand').mouseout(function() {
  $(this).fadeOut(1000);
  $('#montagnePetit').fadeIn(1000);
});
معرض الصور
هل تريد كشف الصور على موقع الويب؟ لا شيء مثل معرض الصور. هنا هو الرمز المستخدم:

<style type="text/css">
  img 
  {
    padding: 5px;
  }
</style>

<img src="miniPaysage1.jpg" id="paysage1.jpg" class='miniature'>
<img src="miniPaysage2.jpg" id="paysage2.jpg" class='miniature'>
<img src="miniPaysage3.jpg" id="paysage3.jpg" class='miniature'>
<img src="miniPaysage4.jpg" id="paysage4.jpg" class='miniature'>
<img src="miniPaysage5.jpg" id="paysage5.jpg" class='miniature'><br />
<img id="grand" src="paysage1.jpg" />

<script src="jquery.js"></script>
<script>
  $(function() {
    $('.miniature').css('border','5px white solid');
    $('img:first').css('border','5px black solid');
    $('.miniature').click(function() {
      $('img').css('border','5px white solid');
      $(this).css('border','5px black solid');
      var nom = $(this).attr('id');
      $('#grand').attr('src',nom);
    });  
  });
</script>
لجعل هذا البرنامج يعمل ، تحتاج إلى خمس صور وصور مصغرة مرتبطة بها. يتم عرض الصور المصغرة في نفس السطر باستخدام العلامات <img> . تلقائيا ، يتم تحديد الصورة المصغرة الأولى ويتم عرض الصورة الكبيرة في أسفل الصفحة ، كما هو موضح في الشكل التالي.
jQuery web
هل لاحظت أسماء معرفات الصور المصغرة الخمسة؟ paysage1.jpg ، paysage2.jpg إلخ أنت بالتأكيد تتساءل لماذا اخترت هذه الأسماء. هذه ، كما سنرى ، خدعة للتخفيف (نعم ، من الممكن!) كتابة كود jQuery .
بمجرد توفر DOM ، يتم عرض حد أبيض سميك 5 بكسل حول الصور المصغرة الخمسة ويتم عرض حد أسود سميك 5 بكسل حول الصورة المصغرة الأولى:

$('.miniature').css('border','5px white solid');
$('img:first').css('border','5px black solid');
يا لها من ممارسة غريبة! لماذا يتم عرض حد أبيض ثم استبداله بحد أسود؟
يعرض البيان الأول حدًا أبيض حول جميع عناصر الفصل miniature . هذا هو القول حول الصور المصغرة الخمسة. هذا العرض له غرض واحد: إزاحة الصور المصغرة أفقياً بحيث تظل في نفس المكان عندما يقوم المستخدم بالنقر فوق أحدها لاحقًا. أنت الآن تفهم أفضل لما هذه التعليمات الأولى. أما بالنسبة للتعليمات الثانية ، فهي تؤطر الصورة القصيرة الأولى. هذا لأنه يتم عرضه بشكل تلقائي عند فتح الصفحة.
عند النقر فوق أحد الصور المصغرة:

$('.miniature').click(function() {
... يجب عليك حذف الإطار المعروض حول الصورة المصغرة المحددة مسبقًا. تعليمات سوف تمحو جميع الإطارات:

$('img').css('border','5px white solid');
يعرض البيان التالي إطارًا حول الصورة المصغرة التي تم النقر فوقها. لاحظ استخدام الكلمة الأساسية this :

$(this).css('border','5px black solid');
علاوة على ذلك ، هل لاحظت كم هو غريب معرف المصغر. لقد حان الوقت للاستفادة من هذه الغرابة. تقوم العبارة التالية بتعيين المتغير nom وتخزين سمة الصورة التي تم النقر فوقها:

var nom = $(this).attr('id');
لعرض هذه الصورة ، قم بتعديل سمة src الصورة الكبيرة وفقًا لذلك:

$('#grand').attr('src',nom);
إذا كنت تشعر بروح البرمجة ، لا تتردد في تحسين هذا المعرض باستخدام أساليب fadeIn() و fadeOut() حتى الصور تظهر crossfade و. يجب أن يكفي سطر أو سطرين من jQuery

عرض الشرائح التلقائي


في فصل سابق ، عملنا على عرض شرائح أساسي ، وأخبرتك أننا سنعود إليه. لقد حان الوقت الآن ! بعد أن وصلت إلى هذه النقطة في قراءة هذه الدورة التدريبية ، فأنت تعرف ما يكفي لفهم كود عرض الشرائح "الحقيقي".

<style type="text/css">
  img 
  { 
    position: absolute; // الصور ستكون فوق بعضها
    left: 0px; // على اليسار
    top: 0px; // في أعلى الصفحة
    display: none; // تلقائيا سوف لن يعرض الصور
  }
</style>

<img src="paysage5.jpg" id="img5">
<img src="paysage4.jpg" id="img4">
<img src="paysage3.jpg" id="img3">
<img src="paysage2.jpg" id="img2">
<img src="paysage1.jpg" id="img1">

<script src="jquery.js"></script>
<script>
  $(function() {
    var i=0;
    affiche();

    function affiche() {
      i++;
      if (i==1) precedent = '#img5'
           else precedent = '#img' + (i-1);
      var actuel = '#img' + i;
      $(precedent).fadeOut(2000);
      $(actuel).fadeIn(2000);
      if (i==5) i=0;          
    }

    setInterval(affiche, 2000);
  });
</script>
جرب الكود
الجزء الأكثر أهمية في الكود هو تعريف الوظيفة affiche() . عند توفر DOM ، يتم تعريف المتغير i وتهيئته إلى 0. في التعليمة البرمجية التالية ، سيتم استخدام هذا المتغير للإشارة بالتتابع إلى الصور الخمس لعرض الشرائح . ثم يتم استدعاء الوظيفة affiche()، المسؤولة عن عرض صورة. ولكن دعونا نرى ما هو مخفي في هذه الوظيفة.
أولاً ، يتم زيادة المتغير i . أثناء التنفيذ الأول للوظيفة affiche()، سيكون لها القيمة 1:

function affiche() {
i++;
إذا كان المتغير i 1 ، تتم تهيئة المتغير precedent إلى #img5 . إذا لم يكن الأمر كذلك ، تتم تهيئة هذا المتغير #img لمتابعة قيمة i-1:

if (i==1) precedent = '#img5';
else precedent = '#img' + (i-1);
لماذا تفرق الحالة i=1 عن الحالات الأخرى؟ ببساطة ، بحيث "يمكن أن تتكرر الحلقة" ، أو بمعنى آخر ، بحيث تتبع الصور بعضها البعض من الأول إلى الخامس ، ثم يتم تنفيذ الحلقة مرة أخرى. تتم تهيئة المتغير Actuel مع #img تتبع الفهرس i . وسوف يكون من المفيد على التوالي #img1 ، #img2، #img3 و #img4 :

var actuel = '#img' + i;
الآن نعرف الصورة التي يجب أن تختفي ( precedent) وأي صورة يجب أن تظهر ( actuel) . كل ما تبقى هو استخدام واحد fadeOut() و واحد fadeIn() :

$(precedent).fadeOut(2000);
$(actuel).fadeIn(2000);
عند الوصول إلى الصورة الخامسة ، من الضروري إعادة ضبط الحلقة عن طريق تعيين القيمة 0 للمتغير i :

if (i==5) i=0;
شيء آخر: لكي تتبع الصور بعضها البعض تلقائيًا ، ما عليك سوى تشغيل الوظيفة affiche() على فترات منتظمة:

setInterval(affiche, 2000);
  • $.trim() يزيل المسافات في بداية ونهاية السلسلة التي تم تمريرها كوسيطة.
  • charAt() إرجاع الحرف في موضع معين في سلسلة. حدد اسم السلسلة متبوعة بنقطة ووظيفة charAt() ، وحدد موضع الحرف بين الأقواس.
  • لتحديد العنصر (العناصر) التي تحتوي على كلمة أو نص معين ، استخدم المحدد:contains .
  • أخيرًا ، لاستبدال نص بآخر أو بعنصر آخر ، استخدم الطريقة replaceWith() .