אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » jQuery » jQuery – שינויים ב-HTML חלק ב'

jQuery – שינויים ב-HTML חלק ב'

רן בר-זיק מאי 18, 2009 10:12 am אין תגובות

מאמר המשך המספר על שינויים נוספים שאפשר לעשות ב-HTML של מסמך באמצעות jQuery.

המאמר הקודם ללימו jQueryjQuery – שינויים ב-HTML חלק א'
המאמר הבא ללימוד jQueryjQuery – שינויים ב-CSS
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

wrap – עטיפה

עד כה כל הדוגמאות היו מניפולציות בתוך האלמנט (הוספת אלמנט, טקסט או HTML בתוך אלמנט שבחרנו עם הסלקטור) או מניפולציות לצד הטקסט (הוספת אלמנט, טקסט או HTML לפני או אחרי האלמנט) אך באמצעות wrap אנו יכולים להוסיף אלמנט שיעטוף את האלמנט שאנו רוצים. למשל בוא ונניח שיש לי פסקה חביבה שאני רוצה להקיף אותה ב-div בעל רקע אדום:

פסקת דוגמא

איך אני עושה זה? באמצעות פקודת wrap. צריך לבחור עם הסלקטור את האלמנט שאותו אנו עוטפים ובפרמטר של הפקודה לכתוב את האלמנט שאיתו אנו עוטפים ובמקרה שלנו:


$(document).ready(function() {
$("#myButton1").click(function () {
$("#example1").wrap("<div style='background-color:red'></div>");
})
;});

אפשר להשתמש ב-HTML או ממש באלמנט כמו למשל: document.createElement("div").

wrapAll – עטיפת הכל

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

פסקת דוגמא

פסקת דוגמא נוספת

פסקת דוגמא שלישית

פסקת דוגמא רביעית

וככה זה נראה, פשוט ביותר.


$("#myButton2").click(function () {
$(".example2").wrapAll("<div style='background-color:red'></div>");
})

wrapInner – עטוף בפנים

אם יש לי תוכן (אלמנטים או טקסט) בתוך האלמנט שלי, אני יכול לעטוף רק אותם. כך למשל, אם יש לי טקסט בתוך הפסקה שלי, אני יכול לעטוף אותו בתגית strong או b.

פסקת דוגמא


$("#myButton3").click(function () {
$(".example3").wrapInner("<strong></strong>");
})

למחוק את העוטף – unWrap

פונקצית unwrap היא בדיוק ההופכית לפונקצית wrap. היא מסירה באופן אלגנטי את אלמנט האב.

פסקת דוגמא בתוך div צהוב

עם הסלקטור אנו בוחרים את הפסקה ופונקצית unwrap דואגת להסיר את האבא – הדיב הצהוב.


$("#myButton13").click(function () {
$("#example13").unwrap();
})

החלפת אלמנטים – replaceWith

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

פסקת דוגמא

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


$("#myButton4").click(function () {
$(".example4").replaceWith("<p>החלפתי את התוכן!</p>");
})

replaceAll

replaceAll זהה כמעט לחלוטין ל-replaceWith רק שסדר הפרמטרים שלה הפוך והיא מחזירה את האלמנטים שהוחלפו (שזה שימושי באפליקציות מסוימות). ככה זה עובד:

פסקת דוגמא

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


$("#myButton5").click(function () {
$("<p>Test success!</p>").replaceAll(".example5");
})

מחיקת התוכן empty

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

פסקת דוגמא

וככה עושים את זה, קל ופשוט.


$("#myButton6").click(function () {
$(".example6").empty();
})

remove\ detach

remove זהה כמעט לחלוטין ל-empty. אבל היא באמת משמידה את האלמנט בלי להותיר לו זכר. במקרה שלנו היא פשוט תמחק את הפסקה ומי שמשתמש ב-firebug יוכל לראות שהיא ממש לא קיימת.

פסקת דוגמא


$("#myButton7").click(function () {
$(".example7").remove();
})

אם אתם רוצים למחוק את האלמנט אך להשתמש בו בעתיד לשימושים שונים (אפילו רק כדי לקחת ממנו מידע) אפשר במקום remove להשתמש בפונקצית detach(). רק לא לשכוח לשמור רפרנס לאלמנט.

clone

clone היא קצת יותר מורכבת להבנה. הפקודה הזו מבצעת העתקה של האלמנט שאותו נוכל להדביק בכל מקום אחר באמצעות האמצעים שאותם אנו כבר מכירים (כמו append או prepend שעליהם למדנו במאמר הקודם). בדוגמא שלנו אנו נעתיק את פסקת הדוגמא ונדביק אותה באמצעות append מיד אחרי פסקת הדוגמא הנוספת בלחיצה על הכפתור.

פסקת דוגמא

פסקת דוגמא נוספת שפסקת הדוגמא תודבק אליה.

וככה זה נראה, אפשר להכניס משתנה בוליאני (true) על מנת להעתיק גם את האירועים המוצמדים לאלמנט.


$("#myButton8").click(function () {
var clonedElement = $(".example8").clone();
$("#example9").after(clonedElement);
})

המאמר הבא מלמד על איך לעשות שינויים עיצוביים באמצעות מניפולציה של ה-CSS.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ספרית jQuery
ללמוד ג'אווהסקריפט בעברית

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

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד