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

jQuery – שינויי Attributes

רן בר-זיק מאי 29, 2009 5:41 pm אין תגובות

מאמר נוסף במדריך על jQuery המספר על שינויי תכונות/Attributes באמצעות jQuery.

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

במאמר הקודם למדנו על הדברים ש-jQuery יכול לעשות עם CSS. לא רק לאחזר או לשנות אלא הרבה יותר. במאמר הזה אנו דנים בשינויים של ה-Attributes. Attributes או בשמן העברי תכונות הן בעצם כל אותן תגיות שאותן אנו מכניסים לתוך האלמנטים השונים. id למשל הוא תכונה. href הוא תכונה שייחודית לאלמנט a. תכונה נוספת וקצת פחות מוכרת היא ה-rel השימושית להפליא. עם jQuery אנו יכולים לשלוט ולשנות את התכונות של האלמנטים השונים כרצוננו. אם אנו רוצים לשנות את class של תפריט למשתמש שלחץ על כפתור מסוים – אין בעיה! אם אנו רוצים לשנות title ל-a מסוים, גם אין בעיה! הכל אפשרי עם jQuery.

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

אחזור תכונה

אם למשל אני רוצה לדעת תכונה של אלמנט מסוים, כל מה שאני צריך לעשות זה להשתמש בפונקצית attr וזה הכל. כך למשל, אם ארצה לדעת מהי תכונת rel של פסקת הדוגמא שלי:

פסקת דוגמא


$('#myButton1').click(function () {
var attr = $('#example1').attr("rel");
alert(attr);
});

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

קביעת תכונה אחת

אנו יכולים לקבוע תכונה מסוימת באמצעות פונקצית attr. בדוגמא הבאה אני אשנה את תכונת ה-href לקישור הדוגמא. בפעם הראשונה הוא יכיל href="#" והפונקציה שלי תשנה אותו ל-google.com

קישור דוגמא

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


$('#myButton2').click(function () {
$('#example2 a').attr("href", "google.com");
});

קביעת כמה תכונות

אם אנו רוצים לשנות כמה תכונות, כמו למשל גם href וגם title, אז אנו חייבים להעביר אובייקט, או כאובייקט או כ-string. אני אתן את הדוגמא הבאה שבה אני גם משנה את ה-href וגם את ה-title.

קישור דוגמא

אם אתם רוצים לראות את השינוי שעשיתי ב-title, פשוט העבירו את העכבר מעל הקישור ותוכלו לראות. או פשוט להשתמש ב-firebug, התוסף השימושי לשועל האש. הקוד נראה כך:


$('#myButton3').click(function () {
$('#example3 a').attr({href: "google.com", title:"קישור לגוגל"});
});


קביעת תכונה על ידי פונקציה

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

פונקצית הדוגמא שלנו תשנה את ה-title של שני הקישורים לפי הסדר שלהם. הסדר מחושב על ידי הפונקציה.

קישור דוגמא ראשון
קישור דוגמא שני

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


$('#myButton4').click(function () {
$('#example4 a').attr("title", function (arr) {
          return "a-id" + arr;
        })});

שינוי תכונת class

עם כל הכבוד לתכונות כמו href ו-title, תכונת class החשובה ביותר והידועה ביותר היא class שמשפיעה גם על העיצוב. לפיכך יש מגוון שלם של פונקציות jQuery שאחראיות על אך ורק שינויים בתכונת class. לצורך הדוגמאות יצרתי class בשם example_class שצובעת את התוכן באדום.

הוספת class

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

פסקת דוגמא

הקוד נראה כך:


$('#myButton5').click(function () {
$('#example5').addClass("example_class");
});

בדיקת class

פונקצית hasClass מאפשרת לנו לבדוק אם לאלמנט מסוים יש class מסוים. היא מחזירה true או false. בדוגמא שלנו הכפתור יבדוק אם פסקת הדוגמא הקודמת היא אדומה, במידה וכן יהיה alert של true ובמידה ולא יהיה alert של false

הקוד נראה כך:


$('#myButton6').click(function () {
var class = $('#example5').hasClass("example_class");
alert("האם הפסקה הקודמת היא אדומה? "+class);
});


הסרת class

אנחנו גם יכולים להסיר class מסוים אם אנו רוצים באמצעות פונקצית removeClass. כל מה שאנו צריכים זה להעביר לה את שם ה-class ואם הוא קיים הפונקציה תדאג להעלים אותו. במקרה שלנו לפסקת הדוגמא יש class של example_class ולחיצה על הכפתור תשמיד את ה-class (ותחזיר את צבע הפסקה לשחור).

פסקת דוגמא

וכך זה נראה:


$('#myButton7').click(function () {
$('#example7').removeClass("example_class");
});

לכבות ולהדליק class

אחת מהפקודות הגאוניות של jQuery היא פונקצית toggleClass שמאפשרת לנו לכבות ולהדליק class. אנו מעבירים לתוכה class ומה שהיא עושה זה לבדוק אם ה-class נמצא. במידה והוא נמצא היא מסירה אותו ובמידה והוא לא נמצא היא מוסיפה אותו. במקרה הזה כל לחיצה על הכפתור תדליק ותכבה את ה-class של פונקצית הדוגמא שלנו:

פסקת דוגמא

והנה הקוד, שימו לב כמה הוא פשוט!


$('#myButton8').click(function () {
$('#example8').toggleClass("example_class");
});

שינוי תכונת value

value, האופיינית במיוחד ל-inputs מכל סוג שהוא, גם היא תכונה שמשתמשים בה רבות. jQuery מכילה את הפונקציה val השימושית להפליא בכל טופס שהוא. הפונקציה משמשת לאחזור וקביעת הערכים שיש בכל שדה input שהוא.

אחזור הערך

בדוגמא זו אשתמש בשדה input וכפתור שיקפיץ ל-alert את מה שהכנסנו. את האחזור פשוט עושים על ידי val()


הקוד הוא פשוט שבפשוטים, תראו כמה קל זה!


$('#myButton9').click(function () {
var value;
value = $('#example9').val();
alert(value);
});

הכנסת ערך

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


הסינטקסט הוא כל כך פשוט שזה מצחיק:


$('#myButton10').click(function () {
$('#example10').val('I Love jQuery!');
});


במאמר זה דנו על כל הדברים ש-jQuery יכולה לעשות עם תכונות – attributes. במאמר הבא אנו לומדים על מעבר בין אלמנטים ואיך לעשות את זה עם 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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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