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


الدرس: تحرير محتوى عنصر


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

GETTERS و SETTERS


بدلاً من التمييز بين الأساليب المسؤولة عن القراءة (تسمى هذه الأساليب getters ، في الإنجليزية و "get" تعني "الحصول على" ) وتعديلها (تسمى هذه الطرق باسم setters ، في الإنجليزية و"set" تعني "التحديد") في قيم HTML أو CSS ، اختار مصممو jQuery منحهم نفس الاسم. ولكن بعد ذلك ، كيف نفرقهم ، ستقول لي؟ الأمر بسيط للغاية ، لأنه يكفي ملاحظة مدخلات الوظيفة. دعنا نتحدث عن مثال لنفهم بشكل أفضل ما يدور حوله. لاحظ الإرشادات التالية:

    $('h2').css('font-size');
    $('h2').css('font-size','2em');     
في العبارة الأولى ، لم يتم تحديد قيمة. لا يمكنك تغيير قيمة خاصية CSS font-size . الطريقة الأولى هي إذن. تقوم بإرجاع قيمة الخاصية font-size . لتسهيل معالجته ، يمكنك حفظه في متغير:

    var taille = $('h2').css('font-size');  
في العبارة الثانية ، يتم تحديد القيمة "2em "في مدخلات الوظيفة css() . سيتم استخدام هذه القيمة لتحديث خاصية CSS font-size(أو إنشائها في حالة عدم وجودها) لجميع العناصر التي يتم إرجاعها بواسطة المحدد. الطريقة الثانية هي .setter
ما قيل للتو يمكن تعميمه على جميع أساليب: jQuery
  • إذا لم يتم تحديد قيمة في مدخلات الدالة ، فستكون عبارة عن getter . تُرجع الدالة القيمة التي تتوافق مع المدخل الأول.
  • إذا تم تحديد قيمة في مدخلات الدالة ، فهي setter . تتم تهيئة المدخل الأول للدالة بهذه القيمة. إذا كان غير موجود ، يتم إنشاؤه. إذا كان موجودا ، يتم تعديله وفقا لذلك.
ما ترجعه GETTER
يستطيع محدد jQuery إرجاع صفر أو عنصر واحد أو أكثر. عندما يتم إرجاع أي عنصر ، تقوم getter بإرجاع القيمة (undefined) عندما يتم إرجاع عنصر واحد فقط ، تقوم getter بإرجاع قيمة هذا العنصر. أخيرًا ، عندما يتم إرجاع عناصر متعددة ، تقوم getter بإرجاع قيمة العنصر الأول.
فحص الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>محددات CSS</title>
  </head>
  <body>
    <div id="lists">
      <a href="http://api.jquery.com">API jQuery</a><br>
      <a href="http://docs.jquery.com">وثائق jQuery</a><br>
    </div>

    <script src="jquery.js"></script>
    <script>
      $(function() {
        var test = $('a').attr('href');
        document.write(test);
      }); 
    </script>
  </body>
</html>
يتم تعريف ارتباطين للنص في السطرين 9 و 10. النقطة الأولى في الصفحة http://api.jquery.com والثانية في الصفحة http://docs.jquery.com . في السطر 16 ، يتم استخدام عبارة jQuery $('a').attr('href')لقراءة محتوى href سمة العلامة الموجودة في المستند. الكائن الراجع يتم تخزينه في المتغير test . يعرض السطر 17 هذا المتغير. ما القيمة التي تعتقد أنها ستظهر في المتصفح؟
ما يمكن أن ينتقل إلى SETTER
يمكن أن تأتي طرق Setter في ثلاثة أشكال مختلفة:

    $('#logo').attr('src','logo.gif');
    $('#logo').attr({src: 'logo.gif', alt: ' شعار الشركة ', width: '200px'});
    $("a").attr({target:function(){…}});    
يعين السطر الأول ببساطة القيمة "logo.gif" لسمة src عنصر المعرف logo . ينشئ السطر الثاني (في حالة عدم وجوده) أو يعدل (إن وجد) عدة سمات في عنصر المعرف logo . هنا ، src تتم تهيئة السمة بالقيمة "logo.gif" ، والسمة alt ذات القيمة " شعار الشركة " والسمة width ذات القيمة ""200px .
أخيرًا ، يستخدم السطر الثالث وظيفة JavaScript لإنشاء أو تعديل target سمة علامة <a> المستند. على سبيل المثال ، ماذا يمكن أن تكون وظيفة الوسيطة الثانية للطريقة attr() :

$('a').attr('target', function() {
  if(this.host == location.host) return '_self'
  else return '_blank'
});   
إذا كان لديك بعض أساسيات جافا سكريبت ، فلا ينبغي أن يكون الكود المستخدم في هذه الدالة مشكلة. إذا لم يكن كذلك ، سوف أصف بالتفصيل الإجراءات المنجزة.
إذا كان الرابط ( this.host) موجودًا في نفس الموقع مثل الصفحة الحالية ( == location.host) ، السمة target تتم تهيئها بالقيمة "_self" ( return '_self') . وفي حالة العكس ، target تتم تهيئتها بالقيمة
( else return '_blank'). "_blank" بمجرد تنفيذ هذين السطرين ، سيتم فتح روابط النص:
  • في علامة تبويب المتصفح الحالية إذا كانوا عائدين إلى صفحة في نفس اسم النطاق (domain) مثل الصفحة الحالية ؛
  • في نافذة أخرى (أو علامة تبويب جديدة) من المتصفح إذا كانت موجودة على اسم نطاق آخر.

الوصول إلى سمات HTML وخصائص CSS


سمات الوصول إلى علامات HTML
ستستخدم الطريقة attr() لقراءة سمات علامات HTML وإنشائها وتعديلها. هذه بعض الأمثلة :
  • $('#plus').attr('src'); إرجاع سمة src عنصر المعرف plus .
  • $('div').attr('class'); إرجاع سمة class الأول
    .
  • $('div').attr('class', 'madiv'); يعدل أو ينشئ السمة class في علامات <div>الوثيقة ويعين لهم القيمة "madiv" .
  • $('#illustration').attr('src','monimage.jpg'); يعدل أو ينشئ السمة src في علامة المعرف illustration ويعين لها القيمة "myimage.jpg" .
أنت الآن تعرف كيفية قراءة وكيفية إنشاء / تعديل سمة من سمات علامة أو مجموعة من علامات HTML .
الآن دعونا نرى كيفية إزالة سمة من علامة أو مجموعة من العلامات. لهذا ، سوف تستخدم الطريقة removeAttr():

    $(sel).removeAttr('attribut');   
أين sel هو محدد jQuery attribut وهو السمة التي تريد حذفها. تعمل هذه الطريقة على جميع العناصر المحددة بواسطة محدد jQuery . على سبيل المثال ، لإزالة السمة href من جميع العلامات <a> في المستند ، ستستخدم العبارة التالية:

    $('a').removeAttr('href');
الوصول إلى خصائص CSS
في الفصول السابقة ، استخدمنا طريقة jQuery عدة مرات css() لإنشاء أو تعديل خصائص CSS لعلامات HTML . يمكن أيضًا استخدام هذه الطريقة ك getter لمعرفة قيمة خاصية CSS . على سبيل المثال ، تسترجع العبارة التالية القيمة المخزنة في سمة font-size عنصر الفئة الأولى para وتخزنها في المتغير taille:

    var taille = $('.para').css('font-size');
يعين هذا البيان الثاني القيمة "40 بكسل" لسمة font-size جميع عناصر الفصل para:

      $('.para').css('font-size', '40px');
    
  
للحصول على نظرة عامة على خصائص CSS3 المختلفة ، يمكنك زيارة W3Schools.com .
العمل مع سمة CLASS
مثل أي مبرمج ويب ، أنت بالتأكيد تستخدم السمة class لتبدو وكأنها عدة علامات HTML . للوصول إلى العلامات التي class لها سمات معينة لها قيمة معينة ، ما عليك سوى تحديد هذه القيمة في المحدد بواسطة سبقها بنقطة. على سبيل المثال ، لتحديد كل عناصر الفصل vert ، سوف تستخدم محدد $('.vert') jQuery
إضافة وإزالة الطبقات
ثلاث طرق مخصصة لل class للمضي قدمًا:
  • addClass() إضافة class في العناصر المحددة ؛
  • removeClass() حذف (إن وجد) فئة من العناصر المحددة ؛
  • toggleClass() ينفذ إجراءين: إذا كانت الفئة المحددة غير موجودة في العناصر المحددة ، تتم إضافتها. إذا كانت موجودة ، يتم حذفها
النظرية التي تم وضعها ، سنقوم بتجربتها باستخدام الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> معالجة سمة class </title>
    <style type="text/css">
      .red { color: red; }
      .green { color: green; }
      .small { font-size: 100%; }
      .great {font-size: 250%; }
    </style>
  </head>
  <body>
    <span id="jean" class="red great">Jean</span>
    <span id="pierre">Pierre</span>
    <span id="paul" class="green great">Paul</span>
    <span id="julia">Julia</span>
    <span id="eric" class="green">Eric</span>
    <span id="kevin" >Kévin</span>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
      }); 
    </script>
  </body>
</html>
تحدد الاسطر من 6 إلى 11 أربعة أنماط:
  • red يعرض الاحرف باللون الأحمر ؛
  • Green عرض الاحرف باللون الأخضر ؛
  • Small يعرض الاحرف ذات الحجم التلقائي (100٪) ؛
  • Great يعرض الأحرف ذات الحجم الكبير (250٪).
تعرض الأسطر 14 إلى 19 ستة أسماء أولية من خلال العلامات . كل علامة لها معرف فريد ، وبعض العلامات لها سمة class مهيأة بفئة أو فئتين.
في الوقت الحالي ، لم يتم إدراج رمز jQuery في المستند. توضح الصورة التالية كيف تبدو عند عرضها في المتصفح.
jQuery web
سنقوم بتجربة طرق addClass() ، removeClass() و toggleClass() عن طريق إدراج كود jQuery السطر 30.
علامة <span> معرف julia لا يوجد لديه فئة. لذلك يتم عرض اسم جوليا بأحرف سوداء ذات حجم عادي. لنفترض أننا نريد أن نعرضها باللون الأحمر ؛ رمز الاستخدام هو كما يلي:

  $('#julia').addClass('red');
لنفترض الآن أنه يجب عرض اسم جوليا بأحرف خضراء كبيرة. رمز الاستخدام هو كما يلي:

  $('#julia').addClass('green great');
سوف نعمل الآن مع الاسم الأول إريك. يتم عرض هذا الاسم الأول عبر علامة <span> فئة green . افترض أنك تريد عرض الاسم الأول Eric باللون الأحمر. العبارة التالية ليس لها أي تأثير:

  $('#eric').addClass('red');
هل لديك أي فكرة عن سبب هذا الفشل؟ يأتي هذا من تعارض بين ال class green (الموجود) وال class red (الذي نريد إضافته) . لتحقيق النتيجة المرجوة ، يجب حذف ال class الحالي واستبداله بال class red:

  $('#eric').removeClass('green').addClass('red');
الطريقة الأولى تحذف الفئة green وتضيف الفئة الثانية red .
لنفترض الآن أنك تريد عرض اسم بول بأحرف صغيرة حمراء. تستخدم العلامة المقابلة فئتين: green وgreat . لكي يظهر النص بأحرف حمراء ، يجب عليك:
  • القضاء على الفئة green .
  • إضافة الفئة red .
  • القضاء على الفئة great .
  • إضافة الفئة small .
فيما يلي تعليمات الاستخدام:

  $('#paul').removeClass('green').addClass('red').removeClass('great').addClass('small');
باستخدام معرف آخر في المحدد ، يمكن أيضًا تطبيق تسلسل الطرق الأربعة على أي علامة <span> في المستند. على سبيل المثال ، يعرض هذا البيان الاسم الأول بيتر بالأحرف الحمراء ذات الحجم العادي:

  $('#pierre').removeClass('green').addClass('red').removeClass('great').addClass('small');
الطرق removeClass() و addClass() يمكن أيضا استبدالهم بالدالة toggleClass() . وبالتالي ، يعرض الاسم الأول Paul بأحرف صغيرة حمراء:

$('#paul').toggleClass('green').toggleClass('red').toggleClass('great').toggleClass('small');
على العكس ، إذا قمت بتطبيقه على <span> المعرف eric، فسيتم عرض اسم Eric بأحرف حمراء كبيرة:
  • <span> التي بفئة green ، يتم حذف هذه الفئة: toggleClass('vert') .
  • الفئة red سيضاف لأنه غير موجود toggleClass('red') .
  • و <span> التي بفئة small ، يتم حذفه: toggleClass('small') .
  • وأخيرا، فإن الفئة great سيضاف لأنه غير موجود toggleClass('grand') .
كما ترون ، toggleClass() يجب استخدامها مع معرفة أسباب ذلك ، وإلا ستنتج تأثيرات عشوائية.
لتبسيط الكتابة ، من الممكن الإشارة إلى عدة فئةات مفصولة بمسافات في الدوال addclass()، removeclass() و toggleclass() . على سبيل المثال ، هذه التعليمات:

  $('#pierre').removeClass('green').addClass('red').removeClass('great').addClass('small');
يمكن تبسيطها على النحو التالي:

    $('#pierre').removeClass('green great').addClass('red small');
اختبار وجود CLASS
hasClass() تتيح الطريقة اختبار ما إذا كان الاختيار من فئة معين. على سبيل المثال ، افترض أن العلامة <span> التالية محددة:

  <span id="jean" class="red great">Jean</span><br />
العبارة $('#jean').hasClass('rouge'); تعيد القيمة true لأن <span> هي للفئة red العبارة $('#jean').hasClass('petit'); تعيد القيمة false لأن <span>ليست لفئة samll . وبالتالي ، يمكننا القيام بعمل واحد أو آخر حسب وجود الفئة:

  if ($('#jean').hasClass('red'))
  alert(' span #jean  هي فئة  red  );
else
  alert(' span #jean  هي ليست فئة  red ' );
إذا كنت بحاجة إلى اختبار ظهور عدة فئات ، فستستخدم هذه الطريقة is() . دعنا نتحدث عن العلامة <span> التالية:

  <span id="jean" class="red great">Jean</span><br />
ستعيد العبارة $('#jean').is('.grand.rouge'); القيمة true لأن <span> من الفئة من great و red . ومع ذلك ، ستعيد العبارة $('#jean').is('.petit.rouge'); القيمة false لأن <span> ليست فئة small . عن طريق التفاف عبارة jQuery بواحد if، يمكنك تنفيذ إجراء أو آخر بناءً على وجود فئتين أو أكثر:

  if ($('#jean').is('.great.red'))
    alert(' span #jean => class great et red');
  else
    alert('span #jean not class great and/or red');

العمل مع النماذج


ستستخدم الطريقة val() لاختبار / تغيير قيمة مربعات النص وأزرار الاختيار وخانات الاختيار والقوائم المنسدلة ومربعات القوائم الموجودة في مستند HTML . لتوضيح كيفية استخدام هذه الطريقة ، دعنا نفكر في مثال:

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>محددات CSS</title>
    </head>
    <body dir="rtl">
      <form>
        اسم المستخدم
        <input type="text" id="name"><br />
  
        كلمة العبور
        <input type="password" id="pass"><br />
  
        الجنس
        H <input type="radio" id="H" name="sex" value="H">
        F <input type="radio" id="F" name="sex" value="F"><br />
  
        الوظيفة
        <select id="function">
          <option VALUE="student">Student</option>
          <option VALUE="ingeneer">Ingeneer</option>
          <option VALUE="teacher">Teacher</option>
          <option VALUE="retirement"> Retirement </option>
          <option VALUE="other">Other</option>
        </select><br /><br />
  
        <input type="submit" id="send" value="ارسال">
        <input type="reset" id="cancel" value="الغاء">
      </form> 
  
      <script src="jquery.js"></script>
      <script>
        $(function() {
          // jQuery 
        }); 
      </script>
    </body>
  </html>  
يحدد هذا الرمز مربع نص ( name) ، وكلمة مرور ( pass) ، واثنين من أزرار الاختيار ( sex) ، وقائمة منسدلة ( function) ، وزر "إرسال" ( send) وزر "إلغاء" ( cancel) .
يوفر الجدول التالي نظرة عامة على الإرشادات التي يمكنك استخدامها لقراءة وتعديل البيانات المخزنة في النموذج.
بيان jQuery تأثير
$('#name').val() اقرأ اسم المستخدم.
$('#pass').val() اقرأ كلمة المرور
$(':radio#H:checked').val() اقرأ حالة زر الاختيار H. إرجاع trueإذا تم تحديد الزر ، وإلا false.
$('#function').val() يقرأ العنصر المحدد من القائمة المنسدلة.
$('#name').val('Michel') اكتب "ميشيل" في مربع النص اسم المستخدم .
$('#pass').val('abcde') اكتب "abcde" في مربع النص Mot de passe.
$(':radio').val(['H']); يختار زر الاختيار H.
$('#function').val(' Retirement ') يختار Retraitéمن القائمة المنسدلة.
بناء جملة التعليمات ليس معقدًا ، ولكن لا يشبه التدريب القليل بحيث لا يشكل أي مشكلة أخرى. أقترح عليك التدرب على استخدام هذه التعليمات عن طريق كتابتها واحدة تلو الأخرى على السطر 36 من الكود السابق!

العمل مع القيم المخزنة في العناصر


عند تحديد محدد jQuery ، تحصل على كائن jQuery يشير إلى صفر أو عنصر واحد أو أكثر. إذا كانت هذه العناصر تحتوي على قيم نصية ، فيمكنك قراءتها أو تعديلها باستخدام طريقتين من jQuery :
  • text() إرجاع / تعديل القيمة النصية المخزنة في العنصر ؛
  • html() إرجاع / تعديل شفرة HTML المخزنة في العنصر.
كما هو الحال دائمًا ، سنستخدم مثالًا لفهم كيفية عمل هاتين الطريقتين. هنا هو الرمز المستخدم:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> القيم المخزنة في العناصر </title>
  </head>
  <body>
    <h1>وثائق jQuery</h1>
    <p><a href='http://docs.jquery.com'>الوثائق الرسمية</a></p>
    <p><a href='http://api.jquery.com'>API jQuery</a></p>
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
      }); 
    </script>
  </body>
</html>
يحدد النص الأساسي للمستند عنوان المستوى 1 وفقرتين يشيران إلى وثائق jQuery الرسمية وواجهة برمجة التطبيقات jQuery . لاسترداد النص المخزن في فقرتين، وسوف نستخدم تعليمات $('p').text(); ولعرض النص على الشاشة نستخدم مربع الحوار alert($('p').text()); . اكتب هذا الكود في السطر 15 من الكود السابق ، واحفظ الملف واعرضه في المستعرض الذي تختاره. توضح لك الصورة التالية النتيجة.
jQuery web
كما ترى ، تُرجع العبارة قيمتي النص المخزّنتين في العلامات <p> . يتم وضع هاتان القيمتان واحدة تلو الأخرى. للوصول إلى القيمة الأولى والأخيرة بشكل فردي ، تتمثل أسهل طريقة في استخدام كود:

    var first = $('p:first').text();
    var last = $('p:last').text();    
إذا كنت ترغب في الوصول إلى كل القيمة على حدة ، يجب عليك تحديد دالة كمدخل للدالة text()، مثل هذا: function(index, actuel)حيث indexهو رقم القيمة التي تتم معالجتها (من 0) ، و actuel يمثل القيمة الحالية للمعالجة.
على سبيل المثال ، لعرض القيمة الموجودة في كل فقرة من المستند ، يمكنك استخدام التعليمات البرمجية التالية:

    $('p').text(function(index,actuel) {
      alert('Paragraph ' + (index+1) + ' : '+actuel);
    });     
والتي سوف تعطيك الشكل التالي.
jQuery web
أنت تعرف الآن كيفية استرداد القيم المخزنة في عناصر HTML كنص. للحصول على نموذج HTML ، استبدل الطريقة text() بالطريقة html() . فيما يلي بعض الإرشادات التي يمكنك استخدامها:
تعليمات نتيجة
alert($('p').html()); يعرض كود HTML للعنصر الأول (انظر الصورة التالية).
alert($('p:first').html()); يعرض كود HTML للعنصر الأول.
alert($('p:last').html()); يعرض كود HTML الخاص بالعنصر الأخير.
$('p').html(function(index,actuel) { alert('Paragraph ' + (index+1) + ' : '+actuel);}); يعرض كود HTML لكل عنصر على حدة..
بالنظر إلى أول مثالين للرمز في الجدول السابق ، ربما تتساءل عما إذا كان هناك في العمود "نتيجة". في الواقع، هو أن تعليمات alert($('p').html()); و alert($('p:first').html()); سيكون ما يعادلها وسيعود كل من رمز HTML للعنصر الأول؟ حسنًا ، هذه الإرشادات متكافئة لأنه ، على عكس الطريقة text()، html() لا يفحص جميع العناصر ، ولكنه راضٍ عن الأول.
الطرق text() و html() بالطبع يمكن استخدامهما ك setters. على سبيل المثال ، لكي تشير الفقرة الأولى من القائمة السابقة إلى محرك بحث Google بدلاً من وثائق jQuery الرسمية ، يمكنك استخدام العبارة التالية:

    $('p:first').html('محرك البحث جوجل');    

موقف وحجم العناصر


سأوضح لك كيفية معرفة وتغيير موضع وأبعاد العناصر المعروضة على صفحة ويب. لإدارة موضع العناصر في صفحة HTML ، ستستخدم الطرق التالية:
  • offset() : الموضع المطلق لعنصر في الصفحة getter) و (setter ؛
  • position() : الموضع النسبي لأحد العناصر في الأصل getter) فقط (
مواقف إرجاعها بواسطة هذه الطرق لها عنصرين هما: محور س left و ص top . سوف تستخدم بالتالي:
  • offset().left و offset().top لمعرفة الموقف المطلق للعنصر.
  • position().left و position().top لمعرفة موقف عنصر داخل الأم.
لإظهار كيفية استخدام هاتين الطريقتين ، سنستخدم الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> القيم المخزنة في العناصر </title>
    <style type="text/css">
      #parent {
        width: 300px;
        height:300px;
        position: absolute;
        top: 100px;
        left: 200px;
        background-color: yellow;
      }
      
      #child {
        width: 100px;
        height:100px;
        position: absolute;
        top: 150px;
        left: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      نص في parent
      <div id="child">
        نص في child
      </div>
    </div>
    <span id="result"></span>    
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
      }); 
    </script>
  </body>
</html>
يحتوي نص المستند على <div>علامتين متداخلتين ، معرفات كل منهما parent و child :

    <div id="parent">
        نص في parent
        <div id="child">
          نص في  child
        </div>
      </div>       
بالإضافة إلى علامة سيتم استخدامها لاحقًا لعرض إحداثيات العلامات <div> :

    <span id="result"></span>  
يتم تنسيق هذه العلامات وفقًا لقواعد CSS ، بين السطور 7 و 23. أبعاد العلامة المعرّفة ب parent محددة على 300 بكسل من 300. يتم وضع هذه العلامة تمامًا على بعد 100 بكسل من الحافة العلوية و 200 بكسل على الحافة اليسرى من الصفحة و أخيرًا ، لون الخلفية أصفر:

    #parent {
      width: 300px;
      height:300px;
      position: absolute;
      top: 100px;
      left: 200px;
      background-color: yellow;
    }     
أبعاد العلامة المعرّفة ب child محددة على 100 بكسل من أصل 100. يتم وضع هذه العلامة تمامًا على بعد 150 بكسل من الحافة العلوية و 100 بكسل من الحافة اليسرى من parent . نعم ، لقد قرأتها بشكل صحيح: العلامة child مضمنة في العلامة parent، المصطلح absolute له قيمة ... نسبية .في الواقع ، فإن الموضع مطلق ، إذا أشرنا إلى العلامة parent وليس إلى المستند ككل. أخيرًا ، لون الخلفية أحمر:

    #child {
      width: 100px;
      height:100px;
      position: absolute;
      top: 150px;
      left: 100px;
      background-color: red;
    }         
إذا كنت تعرض هذا المستند في متصفحك ، فيجب أن تحصل على الصورة التالية.
jQuery web
معرفة موقع العناصر على الصفحة
سنضيف بعض عبارات jQuery من السطر 38 لإظهار الإحداثيات المطلقة للعلامتين الاثنين <div> في العلامة <span> :

    var posparent=$('#parent').offset();
    var poschild=$('#child').offset();
    $('span').text('Parent : x=' + posparent.left + ', y=' + posparent.top + ' Child : x=' + poschild.left + ', y=' + poschild.top);             
يستخدم السطر 1 الطريقة offset()للعثور على الإحداثيات المطلقة للعلامة <div>parent . يتم تخزين هذه الإحداثيات في المتغير posparent .
السطر 2 قريب جدًا من السطر 1 ، إلا أنه يخزن الإحداثيات المطلقة للعلامة <div>child في المتغير poschild
يعرض السطر 3 الإحداثيات المطلقة للعلامات parent وفي child العلامة <span>. text() يتم استخدام الطريقة لإدراج نص في العلامة <span> . الإحداثيات left و top علامات parent و child يتم استخراج المتغيرات posparent و poschild . على سبيل المثال ، بالنسبة إلى حدود العلامة parent، نستخدمها posparent.left .
لماذا قمت بتعريف المتغيرات posparentو posenfant؟
هناك هدفان حفزوا كتابة المتغيرات الوسيطة:
  1. $('span').text() وبالتالي يتم تخفيف التعليمات . في الواقع ، كتابة posparent.left أقصر من كتابة $('#parent').offset().left . إذا لم تستخدم المتغيرات الوسيطة ، فستصبح التعليمات:
    
    $('span').text('Parent : x=' + $('#parent').offset().left + ', y=' + $('#parent').offset().top + ' Child : x=' + $('#child').offset().left + ', y=' + $('#child').offset().top);
    
  2. البيان posparent.left يعمل بشكل أسرع بكثير من البيان $('#parent').offset().left . سيتم تحسين الكود باستخدام متغيرات وسيطة.
بمجرد إدراج أسطر التعليمات البرمجية الثلاثة هذه بعد السطر 38 ، قم بحفظ المستند ثم عرضه في المستعرض. الصورة التالية تمثل ما يجب أن تحصل عليه.
jQuery web
دعنا نستبدل الطرق offset()بـ position()، دون لمس طريقة عرض الشاشة في العلامة <span> :

var posparent=$('#parent').position();
var poschild=$('#child').position();
$('span').text('Parent : x=' + posparent.left + ', y=' + posparent.top + ' Child : x=' + poschild.left + ', y=' + poschild.top);
الإحداثيات التي يتم إرجاعها هي نسبة إلى أصل كل علامة. أصل العلامة #parentهو المستند. لا ينبغي أن يتغير. أصل العلامة #childهو العلامة #parent . ستكون إحداثياتها مرتبطة بهذه العلامة. بمجرد تعديل الرمز وحفظه ، قم بتشغيل الملف. يجب أن تحصل على الصورة التالية.
jQuery web
تغيير موقع العناصر
لقد رأينا أن offset() يمكن استخدامها ك setter ، وبالتالي يمكن تعديل الإحداثيات المطلقة لعنصر ما. لذلك ، يكفي الإشارة إلى الإحداثيات الجديدة في مدخلات الدالة offset() . على سبيل المثال ، لعرض العلامة <div>#child مع الإحداثيات المطلقة (100،100) ، إليك رمز الإعداد:

var poschild = $('#child').offset();
poschild.top = 100;
poschild.left = 100;
$('#child').offset(poschild);
العبارة الأولى تنشئ كائن jQuery يحتوي على الإحداثيات المطلقة للعلامة #childويخزنها في المتغير poschild . العبارتين التاليتين يمثلان الإحداثيات الجديدة ويحيلها الى المكونات top و leftللكائن poschild . أخيرًا ، يستخدم البيان الرابع الكائن poschild لتغيير الإحداثيات المطلقة للعلامة #child .
معرفة أبعاد العناصر
افحص الصورة التالية . انها تمثل علامة <div> و فيها قمنا بتحديد:
  • الهامش الداخلي ( padding) ؛
  • الهامش الخارجي ( margin) ؛
  • الحد ( border) .
jQuery web
هنالك عدة طرق jQuery لمعرفة الأبعاد وتغيير حجم عناصر من نوع block:
  • width() : العنصر عرض النافذة أو الوثيقة، بدون احتساب الهوامش ( padding، border و margin) . يمكن استخدام هذه الطريقة ك getter (لمعرفة عرض عنصر) أو ك setter (لتعديل عرض عنصر).
  • innerWidth() : عرض العنصر ، بما في ذلك padding اليسار واليمين.
  • outerWidth() : عرض العنصر ، بما في ذلك padding اليسار واليمين و border .
  • outerWidth(true) : عرض العنصر، بما في ذلك padding اليسار واليمين، border و margin اليسار واليمين.
  • height() : ارتفاع العنصر، النافذة أو الوثيقة، بدون احتساب الهوامش الهوامش ( padding، border و margin) يمكن استخدام هذه الطريقة ك getter (لمعرفة ارتفاع عنصر) أو ك setter (لتعديل ارتفاع عنصر).
  • innerHeight() : ارتفاع العنصر ، بما في ذلك padding العلوي والسفلي.
  • outerHeight() : ارتفاع العنصر، بما في ذلك border و padding العلوي والسفلي.
  • outerHeight(true) : ارتفاع العنصر، بما في ذلك border، padding العلوي والسفلي و margin العلوي والسفلي.
دعونا نرى كيفية استخدام هذه الطرق من خلال استغلال خصائص CSS لعلامة ما <div> . هنا هو الرمز المستخدم:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> معالجة سمة class</title>
    <style type="text/css">
      div {
        width: 250px;
        height: 250px;
        background-color: #AEEE00;
        padding: 35px;
        margin: 35px;
        border-width : 6px;
        border-color: black;
        border-style: solid;
      }
    </style>
  </head>
  <body>
    <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <span id="result"></span>
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // jQuery 
      });
    </script>
  </body>
</html> 
نص المستند ينفذ إجراءين:
  1. وضع علامة <div> وإدراج نص صغير في هذه العلامة.
  2. إنشاء علامة <span> بمعرف #resul، حيث سيتم عرض أبعاد العلامة <div> داخلها .
يتم إعادة تعريف نمط العلامة <div> في رأس الصفحة ، بين العلامات <style></style>
  • أبعاد: width: 250px; height: 250px;
  • لون الخلفية :background-color: #AEEE00;
  • الهوامش الداخلية :padding: 35px;
  • الهوامش الخارجية :margin: 35px;
  • الحدود :border-width : 6px; border-color: black; border-style: solid;
للوصول إلى أبعاد العلامة <div>، سنقوم بإدخال رمز jQuery بعد السطر 30:

var dimensions = 'width=' + $('div').width() + ', innerWidth=' + $('div').innerWidth() + ', outerWidth=' + $('div').outerWidth() + ', outerWidth(true)=' + $('div').outerWidth(true);
dimensions = dimensions + ', height=' + $('div').height() + ', innerHeight=' + $('div').innerHeight() + ', outerHeight=' + $('div').outerHeight() + ', outerHeight(true)=' + $('div').outerHeight(true);
$('#result').text(dimensions);
أول سطرين للحصول على أبعاد العلامة <div>مع الأساليب width()، innerWidth()، outerWidth()، outerWidth(true)، height()، innerheight()، outerHeight()و outerHeight(true). يتم تخزين هذه المعلومات في المتغير dimensions . يعرض السطر الثالث محتويات المتغير dimensions في العلامة <span>باستخدام طريقة jQuery text() .
لتحسين قابلية قراءة التعليمات البرمجية ، تم تقسيم الإحالة إلى المتغير dimensions إلى قسمين. يحيل السطر الأول جميع الطرق المتعلقة بعرض العلامة <div> ويخزن القيم التي يتم إرجاعها في المتغير dimensions . ويحيل السطر الثاني جميع الطرق المتعلقة بارتفاع العلامة <div> ويسلسل القيم التي يتم إرجاعها إلى المتغير dimensions .
والنتيجة في الصورة التالية.
jQuery web
بالنسبة إلى الأخطاء ، تتوافق القيم التي يتم إرجاعها بواسطة أساليب jQuery مع الأبعاد المحددة في نمط CSS للعلامة <div> :
طريقة خاصية (خصائص) CSS قيمة
width() عرض 250
innerWidth() العرض + الحاشية اليسرى + الحاشية اليمنى 250 + 35 + 35 = 320
outerWidth() العرض + الحاشية اليسرى + الحاشية اليمنى + الحدود اليسرى + الحدود اليمنى 250 + 35 + 35 + 6 + 6 = 332
outerWidth(true) العرض + الحاشية اليسرى + الحاشية اليمنى + الحافة اليسرى + الحافة اليمنى + الهامش الأيسر + الهامش الأيمن 250 + 35 + 35 + 6 + 6 + 35 + 35 = 402
height() ارتفاع 250
innerHeight() ارتفاع + الحشو العلوي + الحشو السفلي 250 + 35 + 35 = 320
outerHeight() ارتفاع + الحشو العلوي + الحشو السفلي + الحد العلوي + الحد الأدنى 250 + 35 + 35 + 6 + 6 = 332
outerHeight(true) الارتفاع + الحاشية العلوية + الحاشية السفلية + الحد العلوي + الحافة السفلية + الهامش العلوي + الهامش السفلي 250 + 35 + 35 + 6 + 6 + 35 + 35 = 402
لنفترض الآن أنك تريد تغيير أبعاد العلامة <div>. سوف تستخدم الأساليب width()و height()المحددات لهذا الغرض. في هذا المثال ، <div>يتم تعيين أبعاد العلامة على 400 × 200 بكسل:

    $('div').width('400px');
    $('div').height('200px');    

ربط البيانات مع العلامات


تُستخدم طريقة jQuery المستخدمة في setter ، $.data() لربط واحد أو أكثر من البيانات النصية بأي عنصر من عناصر DOM . نعم انت تقرأ جيدا يمكن أن تكون أي بيانات إضافية ستجدها لاحقًا باستخدام
طريقة $.data()getter . كن مطمئنًا ، لا تؤدي هذه البيانات إلى تحميل ذاكرة الكمبيوتر بشكل زائد: يتم إتلافها عند إزالة العنصر الذي ترتبط به من DOM أو عندما تتغير صفحة الويب.
بناء جملة هذه الطريقة غريب بعض الشيء. لنفترض أنك تريد ربط بيانات فريدة بعنصر ، ستستخدم بناء الجملة التالي:

    $.data(el, 'nom', nom_don: don); 
... حيث:
  • el هو اسم العنصر المعني ، بدون الفواصل العليا ؛
  • nom هو اسم (في علامات اقتباس مفردة) لـ "المتغير" الذي سيتم تخزين البيانات فيه ؛
  • nom_don هو الاسم (بدون الفواصل العليا) المرتبط بالبيانات ؛
  • don هو أي بيانات. إذا كان الرقم ، فإن الفواصل العليا عديمة الفائدة. ومع ذلك ، إذا كانت سلسلة ، ضعها في علامات اقتباس مفردة.
إذا كنت تريد ربط العديد من البيانات بعنصر ، فستستخدم صيغة مختلفة قليلاً:

    $.data(el, 'nom', {nom_don1: don1, nom_don2: don2, nom_don3: don3, etc.});
... حيث:
  • el هو اسم العنصر المعني ، بدون الفواصل العليا ؛
  • nom هو الاسم (في علامات اقتباس مفردة) حيث سيتم تخزين البيانات ؛
  • nom_don1، nom_don2، nom_don3 الخ هي الأسماء (بدون الفواصل العليا) المرتبطة بالبيانات ؛
  • don1، don2، don3الخ هي أي بيانات. عندما تكون إحدى هذه البيانات رقمية ، لا تضع الفواصل العليا. على العكس من ذلك ، عندما تكون إحدى هذه البيانات عبارة عن سلسلة ، ضعها في علامات اقتباس مفردة.
لاسترداد البيانات المرتبطة بعنصر ، استخدم بناء الجملة التالي:

    var uneVariable = $.data(el,'nom').nom_don;
... حيث:
  • uneVariable هو أي متغير ؛
  • el هو اسم العنصر (بدون الفواصل العليا) الذي تم ربط البيانات به ؛
  • nom هو الاسم (بعلامات اقتباس) الذي تم تخزين البيانات فيه ؛
  • nom_donهو اسم البيانات للعثور عليها ، دون الفواصل العليا.
إذا كان كل هذا مربكا بالنسبة لك ، فإن مثالا بسيطا سوف يجلب لك الضوء! في التعليمة البرمجية التالية، فإننا سوف تجمع ثلاثة البيانات لعلامة <div>واسترجاع البيانات والعلامات عرض في ثلاثة <span>أطفال <div>. هنا هو الكود:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> معالجة سمة class </title>
  </head>
  <body>
  <div id="mondiv">
  Les valeurs stockées dans la balise < ;div> ; sont : <span id="sp1"></span>, <span id="sp2"></span> et <span id="sp3"></span>.
  </div>
    
    <script src="jquery.js"></script>
    <script>
      $(function() {
        var div = $('div')[0];
        $.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12, troisieme: 'http://www.siteduzero.com'});
        var val1 = $.data(div, 'mesValeurs').premier;
        var val2 = $.data(div, 'mesValeurs').deuxieme;
        var val3 = $.data(div, 'mesValeurs').troisieme;
        $('#sp1').text(val1);
        $('#sp2').text(val2);
        $('#sp3').text(val3);
        }); 
    </script>    
  </body>
</html>
ملاحظة:
  • رموز HTML <و >يبدو أن حول الكلمة div . استبدال هذه الرموز الأحرف <و>. بدونها ، سيتم تفسير النص "<div>" كعلامة ، ولن ينتج الرمز التأثير المطلوب.
  • الموقع الاستراتيجي للمنارات <span>. عن طريق إدخال البيانات ، سيكملون عبارة "القيم المخزنة [...]" بطريقة طبيعية ، كما لو أن الجملة قد كتبت "بجد".
الجزء المثير للاهتمام من الكود هو بين السطور 15 و 22.
لتخفيف الكتابة ، يبدأ السطر 15 بتخزين العنصر الأول divفي المتغير div. وبالتالي ، يكفي أن تكتب divبدلاً من $('div')[0]:

    var div = $('div')[0];
يرفق السطر 16 ثلاث بيانات باسم "premier" ، "deuxieme" و "troisieme" إلى المتغير mesValeurs ويربط هذا المتغير بالعلامة الفريدة <div>في المستند. لاحظ علامات الاقتباس المفردة المستخدمة حول بيانات النص "premier" و ""troisieme

    $.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12, troisieme: 'http://www.arabclassroom.com'});
تم بناء الخطوط 17 إلى 19 على نفس النموذج. على سبيل المثال ، يقرأ السطر 17 القيمة "premier" للمتغير mesValeurs المرتبط بالعلامة <div> ويخزنها في المتغير val1:

    var val1 = $.data(div, 'mesValeurs').premier;
الأسطر 20 إلى 22 تُدرج القيم الثلاث التي تم استرجاعها من السطور 17 إلى 19 في العلامات <span> #sp1، #sp2 و #sp3 :

    $('#sp1').text(val1);
    $('#sp2').text(val2);
    $('#sp3').text(val3);    
إذا قمت بتشغيل هذا الرمز في متصفحك ، فيجب أن تحصل على نفس النتيجة كما في الصورة التالية.
jQuery web
لقد أخبرتك أن البيانات المرتبطة بالعناصر لا تؤدي إلى زيادة تحميل ذاكرة الكمبيوتر ، لأنها دمرت عند إزالة العنصر الذي ترتبط به من DOM ، أو عند تغيير صفحة الويب أو عند إغلاق المتصفح. أود أن أتحدث عن تقنية ثالثة ، أقل تدميراً من الأولى والثانية ، لأنها تحذف فقط البيانات المرتبطة بعنصر دون حذف العنصر ودون تغيير الصفحة. هذه هي الطريقة removeData() التي هنا بناء الجملة:

    $.removeData(el,'nom');   
... حيث:
  • elهو اسم العنصر (بدون الفواصل العليا) الذي تم ربط البيانات به ؛
  • nomهو اسم (بعلامات اقتباس) لـ "المتغير" الذي تم تخزين البيانات به.
على سبيل المثال ، لإزالة المتغير mesValeursالمرتبط بالعلامة الأولى (والفريدة) <div>في المثال السابق ، ستستخدم العبارات التالية:

    var div = $('div')[0];
    $.removeData(div, 'mesValeurs');       
العبارة الأولى تحدد المتغير div وتخزن العنصر الأول هناك <div> . العبارة الثانية تزيل المتغير mesValeurs الذي ارتبط بالعلامة الأولى <div> .
  • تتوافق مصطلحات getter و setter مع أساليب القراءة (getter) والكتابة (setter) . في jQuery ، getter هي طريقة تحصل على قيمة HTML أو CSS عن طريق الاستعلام عن الكود. على العكس من ذلك ، فإن setter هي طريقة تقوم بتعديل قيمة HTML أو CSS في رمز المستند.
  • يستطيع محدد jQuery إرجاع صفر أو عنصر واحد أو أكثر. عندما يتم إرجاع أي عنصر ، تقوم getter بإرجاع القيمة ( undefined (أي عندما يتم إرجاع عنصر واحد فقط ، تقوم getter بإرجاع قيمة هذا العنصر. تتلقى الرسائل عادةً العديد من مدخلات النص التي تتيح لك تعديل خاصية CSS أو سمة HTML أو إدراج عنصر في الكود.
  • ستستخدم الطريقة attr() لقراءة سمات علامات HTML وإنشائها وتعديلها.
  • ستستخدم الطريقة css() لقراءة وإنشاء وتعديل خصائص CSS المرفقة بالمستند.
  • addClass() تضيف الطريقة إلى التحديد السمة class التي يشار إليها بين قوسين. removeClass()تحذف الطريقة سمة class في علامة. أخيرًا ، hasClass() تتيح الطريقة اختبار وجود فئة في العناصر التي يتم إرجاعها بواسطة المحدد.
  • val() تتيح لك هذه الطريقة معرفة وتغيير قيمة مربعات النص وأزرار الاختيار وخانات الاختيار والقوائم المنسدلة ومربعات القوائم في مستند HTML .
  • الطرق text() و html() تسمح للعمل مع القيم المخزنة في عناصر HTML : text() عوائد / تعديل القيمة المخزنة في العنصر النص، و html() عوائد / تعديل كود HTML المخزنة في هذا البند.
  • لمعرفة / تعديل الموضع المطلق لعلامة ما في المستند ، سوف تستخدم الأساليب offset() و position() . لأبعاد عنصر، يمكنك استخدام الأساليب width() ، innerWidth()، outerWidth() ، height()، innerHeight() ، و outerHeight() .
  • باستخدام لغة jQuery ، من الممكن ربط البيانات بعلامات HTML . لهذا ، نستخدم الطريقة $.data() . أولاً ، نقوم بتعيين واحد أو أكثر من البيانات للعلامة باستخدام الطريقة $.data() كمضبط. عند الضرورة ، يتم استرداد القيمة أو القيم المرتبطة بالعلامة باستخدام طريقة $.data()getter . عندما لم تعد هناك حاجة إلى البيانات المرتبطة بعلامة ، يمكننا حذفها بالطريقة $.removeData() .