למד כיצד ליצור אלמנט ב- jQuery

למד כיצד ליצור אלמנט ב- jQuery

יצירת אלמנט חדש היא אחת המשימות הבסיסיות ביותר שתוכל לבצע בעזרת ספריית ה- jQuery JavaScript. באמצעות jQuery, המשימה פשוטה בהרבה מהגישה המקבילה עם מודל אובייקט המסמך (DOM). אתה גם תמצא את זה גמיש ואקספרסיבי יותר, ככל שאתה משתמש יותר ב- jQuery.





כדי לשרת מטרה, יהיה עליך להוסיף את האלמנט שלך לדף אינטרנט. למד כיצד להוסיף פריט רשימה חדש או להחליף פסקה בתוכן חדש באמצעות jQuery.



מהו jQuery?

ספריית jQuery היא אוסף של JavaScript קוד בעל שתי מטרות עיקריות:





  • הוא מפשט פעולות JavaScript נפוצות.
  • הוא מטפל בבעיות תאימות של JavaScript בין דפדפנים שונים.

המטרה השנייה פונה לבאגים, אך היא מטפלת גם בהבדלי יישום בין הדפדפנים. שתי המטרות נחוצות פחות מבעבר, מכיוון שדפדפנים משתפרים עם הזמן. אבל jQuery עדיין יכול להיות כלי בעל ערך.

מהו אלמנט?

לפעמים אלמנט מכונה תג. למרות שהשניים משמשים לעתים קרובות לסירוגין, יש הבדל עדין. תג מתייחס למילולי

אוֹ



אתה כולל בקובץ HTML לסימון תוכן הטקסט. אלמנט הוא האובייקט שמאחורי הקלעים המייצג את הטקסט המסומן. חשוב על אלמנט כמקבילה ל- DOM לתגי ה- HTML.

כיצד ליצור אלמנט חדש באמצעות jQuery

כמו רוב פעולות jQuery, יצירת אלמנט מתחילה בפונקציית הדולר, $ () . זהו קיצור דרך אל הליבה jQuery () פוּנקצִיָה. לפונקציה זו יש שלוש מטרות מובחנות, היא:



  • תואם אלמנטים, בדרך כלל רכיבים שכבר קיימים במסמך
  • יוצר אלמנטים חדשים
  • מפעיל פונקציית שיחה חוזרת כאשר ה- DOM מוכן

כאשר תעביר מחרוזת המכילה HTML כפרמטר הראשון, פונקציה זו תיצור אלמנט חדש:

$(' ')

זה מחזיר אובייקט jQuery מיוחד המכיל אוסף של אלמנטים. במקרה זה, יש אובייקט יחיד המייצג אלמנט 'א' שיצרנו זה עתה.



איך אתה יכול לדעת אם מישהו חסם אותך ב- snapchat

המחרוזת חייבת להיראות כמו HTML כדי להבחין בין פעולה זו לבין רכיבים תואמים. בפועל, המשמעות היא שהמחרוזת חייבת להתחיל בא < . לא ניתן להוסיף טקסט רגיל למסמך בשיטה זו.

חשוב להבין שזה לא מוסיף את האלמנט למסמך שלך, זה רק יוצר אלמנט חדש שמוכן להוספה שלך. האלמנט 'לא מחובר', תופס זיכרון אך למעשה אינו חלק מהעמוד האחרון - עדיין.

הוספת 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.
    קרא הבא       נושאים קשורים  
       
    • תִכנוּת
      •  
    • בניית אתרים
      •  
    • jQuery
      •  
      על הסופר   בובי ג'ק(58 מאמרים פורסמו)      
    בובי הוא חובב טכנולוגיה שעבד כמפתח תוכנה במשך רוב שני העשורים. הוא נלהב משחקים, עובד כעורך ביקורות במגזין Switch Player, והוא שקוע בכל ההיבטים של פרסום מקוון ופיתוח אתרים.
    עוד מאת בובי ג'ק
    הירשם לניוזלטר שלנו
     
    הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
    לחצו כאן להרשמה