تعرف على كيفية إنشاء عنصر في jQuery

تعرف على كيفية إنشاء عنصر في jQuery

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





لخدمة غرض ما ، يجب أن تكون قادرًا على إضافة عنصرك إلى صفحة ويب. تعرف على كيفية إضافة عنصر قائمة جديد أو استبدال فقرة بمحتوى جديد باستخدام jQuery.



ما هو jQuery؟

مكتبة jQuery عبارة عن مجموعة من جافا سكريبت كود مع هدفين أساسيين:





  • يبسط عمليات JavaScript الشائعة.
  • يتعامل مع مشكلات JavaScript المتوافقة بين المتصفحات المختلفة.

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

ما هو العنصر؟

يشار إلى العنصر أحيانًا على أنه علامة. على الرغم من أن الاثنين غالبًا ما يتم استخدامهما بالتبادل ، إلا أن هناك اختلافًا طفيفًا. تشير العلامة إلى الحرف

أو



تقوم بتضمينه في ملف HTML لترميز محتوى النص. العنصر هو كائن خلف الكواليس يمثل النص المرمز. فكر في عنصر ما باعتباره نظير DOM لعلامات HTML.

كيفية إنشاء عنصر جديد باستخدام jQuery

مثل معظم عمليات jQuery ، يبدأ إنشاء عنصر بالدالة الدولار ، $ () . هذا هو اختصار للجوهر jQuery () وظيفة. هذه الوظيفة لها ثلاثة أغراض مميزة ، هي:



  • يطابق العناصر ، وعادة ما تكون تلك الموجودة بالفعل في المستند
  • يخلق عناصر جديدة
  • يقوم بتشغيل وظيفة رد الاتصال عندما يكون DOM جاهزًا

عندما تمرر سلسلة تحتوي على HTML كمعامل أول ، فإن هذه الوظيفة ستنشئ عنصرًا جديدًا:

$(' ')

يؤدي هذا إلى إرجاع كائن jQuery خاص يحتوي على مجموعة من العناصر. في هذه الحالة ، يوجد كائن واحد يمثل عنصر 'a' أنشأناه للتو.



كيفية عرض المرآة على جهاز إكس بوكس ​​واحد

يجب أن تبدو السلسلة مثل HTML لتمييز هذا الإجراء عن العناصر المطابقة. في الممارسة العملية ، هذا يعني أن السلسلة يجب أن تبدأ بـ a < . لا يمكنك إضافة نص عادي إلى المستند باستخدام هذه الطريقة.

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

إضافة HTML أكثر تعقيدًا

يمكن أن تنشئ وظيفة الدولار بالفعل أكثر من عنصر واحد. في الواقع ، يمكنه إنشاء أي شجرة من عناصر HTML تريدها:

$('
  • one
  • two
  • three
')

يمكنك أيضًا استخدام هذا التنسيق لإنشاء عنصر بسمات:

$(' my hometown')

كيفية تعيين السمات على عنصر جديد

يمكنك إنشاء عنصر jQuery جديد وتعيين سماته دون الحاجة إلى إنشاء سلسلة HTML كاملة بنفسك. يكون هذا مفيدًا إذا كنت تُنشئ قيم السمات ديناميكيًا. على سبيل المثال:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

كيفية إضافة عنصر

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

إضافة كعنصر تابع لعنصر موجود

$('body').append($('

Hello, world

'));
$(document.body).append($el);

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

أضفه على أنه شقيق عنصر موجود

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    يعد هذا اختيارًا جيدًا إذا أردت ، على سبيل المثال ، إضافة فقرة جديدة في منتصف فقرتين أخريين.

    استبدل عنصر موجود

    يمكنك تبديل عنصر موجود بعنصر تم إنشاؤه حديثًا باستخدام ملف استبدل ب() طريقة:

    $('#old').replaceWith('

    New paragraph

    ');

    التفاف حول عنصر موجود

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

    $('code#n1').wrap('
    ')
    الوصول إلى العنصر الذي قمت بإنشائه
     
    ال $ () تقوم الدالة بإرجاع كائن jQuery. هذا مفيد لعمليات المتابعة:
    $el = $('p');  
    $('body').append($el);
    لاحظ أنه ، حسب الاصطلاح ، غالبًا ما يسمي مبرمجو jQuery متغيرات jQuery بعلامة الدولار الأولية. هذا ببساطة مخطط تسمية ولا يرتبط مباشرة بـ $ () وظيفة.
     
    تكوين العناصر باستخدام jQuery
     
    على الرغم من أنه يمكنك معالجة DOM باستخدام وظائف JavaScript أصلية ، فإن jQuery يجعل القيام بذلك أسهل بكثير. لا يزال من المفيد جدًا أن يكون لديك فهم جيد لـ DOM ، لكن jQuery يجعل العمل معها أكثر متعة.
      يشارك    يشارك      سقسقة      بريد الالكتروني      البطل الخفي للمواقع: فهم DOM  
    هل تريد تعلم تصميم الويب وتحتاج إلى معرفة المزيد عن نموذج كائن المستند؟ إليك ما تحتاج لمعرفته حول DOM.
    اقرأ التالي       مواضيع ذات صلة  
       
    • برمجة
      •  
    • تطوير الشبكة
      •  
    • مسج
      •  
      نبذة عن الكاتب   بوبي جاك(تم نشر 58 مقالة)      
    بوبي متحمس للتكنولوجيا وعمل كمطور برمجيات لأكثر من عقدين من الزمن. إنه شغوف بالألعاب ، ويعمل كمحرر المراجعات في مجلة Switch Player ، ومنغمس في جميع جوانب النشر عبر الإنترنت وتطوير الويب.
    المزيد من Bobby Jack
    اشترك في نشرتنا الإخبارية
     
    انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
    انقر هنا للاشتراك