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

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

רן בר-זיק מרץ 6, 2009 12:39 am אין תגובות

במאמר זה אני מתאר כיצד לבצע מניפולציות בתכנים באמצועת jQuery – להוסיף אלמנטים וקטעי קוד בקלות ובמהירות באמצעות jQuery בכל דף אינטרנט שהוא.

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

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

 
 
<div id="mydiv1" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton1">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton1").click(function () {
//פונקציה כלשהי
});
 });
</script>

פונקציה ה-html

הפונקציה html() די זהה ל-innerHTML למי שמכיר. באופן פשוט למדי היא יכולה לתת לי את כל ה-HTML של אלמנט מסוים כמחרוזת טקסט שעליה אני יכול לעשות מה שבא לי. קל מאד להשתמש בה: רושמים את הסלקטור המתאים עבור האלמנט שאני רוצה את ה-HTML שלו ואז .html().
שימושי בכמה מקרים – שימו לב איך ה-alert יקפיץ לי את כל ה-HTML שיש בתוך ה-div החביב:

אלמנט חביב

וככה זה נראה:


<div id="mydiv1" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton1">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton1").click(function () {
alert(
$("#mydiv1").html()
);
});
 });
</script></p>

אם בא לי לשנות את מה שיש בתוך ה-div או בתוך כל אלמנט אחר, אני משתמש בפונקציה הזו גם וכותב את כל מה שאני רוצה להכניס כפרמטר – למשל בואו וננסה להכניס את המחרוזת <b>אינטרנט ישראל</b> לתוך ה-div הצהוב:

אלמנט חביב

שימו לב שהטקסט מודגש כמובן, כי הכנסתי תגיות הדגשה. ככה זה נראה:


<div id="mydiv2" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton2">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton2").click(function () {
$("#mydiv2").html("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

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

פונקצית text

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

אלמנט חביב

וככה זה נראה כמובן. השינוי היחידי הוא בטקסט:


<div id="mydiv3" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton3">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton3").click(function () {
$("#mydiv3").text("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

פונקצית text שימושית ביותר כאשר אני רוצה לחלץ טקסט מתוך אלמנט מסוים ולא בא לי להתחיל ולסנן את תגיות ה-html שיש בו.

פונקצית append

פונקצית append היא שימושית להפליא כאשר אני לא רוצה להחליף את הטקסט או את ה-HTML שיש בתוך אלמנט מסוים אלא רק להוסיף לו.

אלמנט חביב

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


<div id="mydiv4" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton4">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton4").click(function () {
$("#mydiv4").append("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

פונקצית appendTo

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

  • פריט מתוך רשימה
  • רשימה אחרת
  • רשימה אחרת
  • רשימה אחרת

וכך זה נראה כמובן בקוד:


<ul style="float: left">
<li id="original_list_item">פריט מתוך רשימה</li>
</ul>
<ul style="float: right" id="to_be_added">
<li>רשימה אחרת</li>
<li>רשימה אחרת</li>
<li>רשימה אחרת</li>
</ul>
<p><button id="myButton5">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton5").click(function () {
$("#original_list_item").append("#to_be_added");
});
 });
</script></p>

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

  • מה תרצה להזמין היום?
  • ביצים
  • גבינה
  • חלב
  • לחם
  • טונה
  • סל קניות

prepend & prependTo

בדיוק כמו append, רק שהטקסט/אלמנט מתווסף לפני ולא אחרי. וכמובן דוגמא היא הכרחית:

אלמנט חביב

וכך נראה הקוד:


<div id="mydiv6" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton6">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton6").click(function () {
$("#mydiv6").prepend("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

בסך הכל אין יותר מדי מה להסביר בנוגע ל-prepend או ל-prependTo, בדיוק כמו append.

After ו – insertAfter

מדובר בפונקציות שדומות ל-append רק שהן פועלות מחוץ לאלמנט. כלומר אם פונקצית append מוסיפה טקסט/HTML בתוך האלמנט ופונקצית appendTo מוסיפה אלמנט לתוך האלמנט, After מכניסה טקסט אחרי האלמנט (לא בתוכו) ו-insertAfter מכניסה אלמנט אחרי האלמנט.

נשמע מסובך? בוא וניקח את הפונקציה המוכרת שהשתמשנו בה ב-append וננסה להשתמש בפונקצית after:

אלמנט חביב

אפשר לראות שהפעם אינטרנט ישראל משתכפל מחוץ ל-div ולא בתוכו. הקוד יראה שכל מה שעשיתי זה להשתמש ב-

after:


<div id="mydiv7" style="width: 200px; height: 100px; background-color: Yellow;">אלמנט חביב</div> 
<p><button id="myButton7">Do the Action</button></p> 
<p><script type="text/javascript"> 
$(document).ready(function() {
$("#myButton7").click(function () {
$("#mydiv7").after("<b>אינטרנט ישראל</b>")
});
 });
</script></p>

insertAfter עובד על אותו עקרון, רק שהוא משתמש באלמנטים ולא בקטעי קוד. יש גם פונקצית insertBefore ו-before שבהתאמה מכניסות אלמנטים או קטעי קוד לפני האלמנטים.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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