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

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

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

מה זה jQuery?

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

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

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

מהו אלמנט?

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

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

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

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

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

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

$("")

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

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

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

הוספת HTML מורכב יותר

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

$("

אחד
שתיים
שְׁלוֹשָׁה
")

אתה יכול גם להשתמש בפורמט זה כדי ליצור אלמנט עם תכונות:

$('')

כיצד להגדיר תכונות באלמנט חדש

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

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

כיצד להוסיף אלמנט

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

הוסף כילד של אלמנט קיים

$("body").append($("
שלום עולם
"));
$(document.body).append($el);

אתה יכול להשתמש בשיטה זו, למשל, כדי להוסיף פריט רשימה חדש בסוף רשימה.

הוסף אותו בתור אח של אלמנט קיים

$("p.last").after("
פסקה חדשה
")
$("ul li: first").before("
פריט חדש
")

זוהי בחירה טובה אם, למשל, אתה רוצה להוסיף פסקה חדשה באמצע שתיים אחרות.

החלף אלמנט קיים

אתה יכול להחליף אלמנט קיים לאחד שנוצר לאחרונה באמצעות ה- להחליף ב() שיטה:

$('#old').replaceWith("
פסקה חדשה
");

עוטפים אלמנט קיים

זהו מקרה שימוש נדיר למדי, אבל אולי תרצה לצרף אלמנט קיים באחד חדש. לדוגמה, ייתכן שיש לך א קוד אלמנט שאתה רוצה לעטוף ב-a מִרֹאשׁ:

$('code#n1').wrap("
")

גישה לאלמנט שיצרת

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

$el = $("p");
$('body').append($el);

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

יצירת אלמנטים באמצעות jQuery

למרות שאתה יכול לתפעל את ה-DOM באמצעות פונקציות מקוריות של JavaScript, jQuery מקל הרבה יותר לעשות זאת. זה עדיין מאוד שימושי להבין טוב את ה-DOM, אבל jQuery הופך את העבודה איתו להרבה יותר נעימה.

הגיבור הנסתר של האתרים: הבנת ה-DOM

לומד עיצוב אתרים וצריך לדעת יותר על מודל אובייקט המסמך? הנה מה שאתה צריך לדעת על ה-DOM.

קרא הבא

על הסופר