מדריך jQuery חלק ב' - פונקציות לשינוי Html
בחלק א' של מדריך זה למדנו בעיקר כיצד לאתר אלמנטים על דף ה-html. בחלק זה נלמד כיצד לגלות את תכונותיהם ולשנות אותם.
ניתן לשנות כל מרכיב של האלמנט - טקסט, תכונות html, מחלקת css, ועוד. jQuery מכילה מספר פונקציות שיעזרו לנו בכך. כפי שנראה מיד, לכל אחת מהפונקציות הללו קיימות שתי גירסאות - גירסה אחת משמשת לשינוי הערך הנוכחי, בעוד שהגירסה השניה, בד"כ ללא פרמטרים, משמשת למציאת ערך קיים. נשתמש בה אם נרצה לשנות ערך מסוים של אלמנט על בסיס הערך הנוכחי שלו, או במקרה שהערך הנוכחי דרוש לנו מסיבה אחרת כלשהי. שתי הגירסאות נבדלות במספר הפרמטרים שמקבלת הפונקציה.
()attr - קריאה/שינוי מאפייני html
הפונקציה attr (קיצור של attribute) משמשת למציאה/שינוי של מאפיין html של אלמנט מסוים (או קבוצת אלמנטים דומים).
דוגמאות:
-
var txtHeight = $('#txtbox').attr('rows');
הסבר: מציאת מספר השורות באלמנט textarea (ע"פ התכונה 'rows' - מספר השורות). זוהי גירסת ה"מציאה" של הפונקציה ()attr, בגירסה זו היא מקבלת פרמטר אחד - שם המאפיין המבוקש.
-
$("a[href$='google.com']").each(function() {
$(this).attr('href', 'http://sf.net')
});
הסבר: בדוגמה זו אנו משנים את כל הקישורים שמקשרים לאתרים תחת הדומיין של גוגל, כך שיקשרו לאתר אחר. כפי שראינו בפרק הקודם, הביטוי ("['a[href$='google.com")$ מוצא את כל הקישורים (אלמנטים מסוג a) שתכונת ה-href שלהם מסתיימת ב-google.com. לאחר מכן אנו מפעילים באמצעות each על כל אחד מהקישורים את הפונקציה attr שמשנה את כתובת היעד לכתובת המבוקשת.
נניח שאנו לא מסתפקים בשיונוי מאפיין בודד, אלא רוצים לשנות בבת אחת כמה מאפיינים של אלמנט מסוים. קיימת גירסה נוספת של הפונקציה attr, בעזרתה ניתן לשנות בבת אחת מספר מאפיינים של אלמנט. בגירסה זו הפרמטר לפונקציה הוא אוביקט מיפוי שבו המפתחות הם שמות התכונות, והערכים הם ערכי התכונות הרצויים. לדוגמה:
'src': '/images/thumbnail/me.jpg',
'height': 80,
'width': 60
});
()text - קריאה/שינוי טקסט של אלמנט
הפונקציה ()text משמשת לשינוי הטקסט שמוכל בתוך אלמנט.
דוגמאות:
-
$('span#to_change').text('new text');
הסבר: הביטוי הנ"ל משנה את הטקסט בתוך אלמנט מסוג span עם "id="to_change ל - "new text"
- נניח שקיימת בדף הפיסקה הבאה:
This is a very long text contained in some paragraph.
</div>
הביטוי הבא יקצר את הפיסקה ל-3 מילים בלבד:
$('div.a1').text(current_text + '...');
הסבר: בשורה הראשונה אנו מוצאים את הטקסט של פיסקה שה-class שלה הוא a1 (ע"י הפונקציה text ללא פרמטרים), מכניסים את המילים בנפרד (הפונקציה split) למערך, "חותכים" את המערך באמצעות הפונקציה split כך שיכיל את 3 האברים הראשונים בלבד, ומחברים את המילים מחדש עם join. בשורה השניה אנו משנים את הפיסקה כך שתכיל את 3 המילים שחתכנו מהטקסט המקורי ואחריהן '...'.
()html - קריאה/שינוי קוד ה-html של אלמנט
פונקציה זו דומה מאד ל -()text , כאשר ההבדל הוא בכך שהיא משנה את קוד ה-html של האלמנט, כולל התגים, ולא רק את הטקסט הפנימי.
addClass, removeClass, toggleClass - פונקציות לשינוי מחלקת CSS
פונקציות אלה משמשות להוספה/מחיקה/שינוי של מחלקת ה-CSS של אלמנט(ים).
לדוגמה: נניח שמוגדרת מחלקת ה-css הבאה:
.hilight {
background-color: #2ee;
border: solid 2px #911;
}
הביטוי:
$('div').addClass('hilight');
יגרום לכך שכל אלמנטי ה-div בדף יקבלו את מחלקת ה-hilight CSS - צבע רקע צהוב ומסגרת אדומה.
הפונקציה removeClass מבצעת כמובן את הפעולה ההפוכה - מורידה את המחלקה ששמה מועבר כפרמטר מהגדרות האלמנט. הפונקציה toggleClass הופכת את מצב האלמנט ביחס למחלקה הנתונה, כלומר - אם מוגדרת עבורו המחלקה הזו היא תבוטל, ואם לא - אזי היא תחול.