jQuery – שינויי Attributes

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

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

אחזור תכונה

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

פסקת דוגמא

Do the Action

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

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

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

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

קישור דוגמא

Do the Action

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

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

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

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

קישור דוגמא

Do the Action

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

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

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

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

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

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

Do the Action

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

$('#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 שאנו רוצים לתת (אפשר לתת יותר מאחד).

פסקת דוגמא

Do the Action

הקוד נראה כך:

$('#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 (ותחזיר את צבע הפסקה לשחור).

פסקת דוגמא

Do the Action

וכך זה נראה:

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

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

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

פסקת דוגמא

Do the Action

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

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

שינוי תכונת value

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

אחזור הערך

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

Do the Action

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

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

הכנסת ערך

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

Do the Action

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

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

במאמר זה דנו על כל הדברים ש-jQuery יכולה לעשות עם תכונות – attributes. במאמר הבא אנו לומדים על מעבר בין אלמנטים ואיך לעשות את זה עם jQuery.