הוספת HTML, מאפיינים ואנימציות

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

הפונקציות בקטגוריה הזו מתחלקות לכמה תתי קטגוריות

1. הוספת קוד לפני/אחרי/בתוך/מחוץ האלמנט
2. קבלת/שינוי מאפיינים ברמות שונות של האלמנט
3. אנימציות

כדרכנו, נעבור אחד אחרי השני:

1. הוספת קוד לפני/אחרי/בתוך/מחוץ האלמנט

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

פונקציות לדוגמא:

append / prepend

jQuery(destination).append(source)

הפונקציה append תוסיף את source לסוף התוכן של destination. לעומת זאת אם באותו קוד נשתמש בפונקציה prepend במקום append – התוכן של source יתווסף לנו לתחילת התוכן של destination. לפני כל האלמנטים האחרים שהיא מכילה.

הפונקציה prepend שימושית למשל לביצוע היפוך סדר (reverse) ברשימות. עוברים על כל האלמנטים ברשימה, וכל אחד מהם מוסיפים באמצעות prepend לרשימה. כך האלמנט הראשון יתווסף הראשון, אחריו יתווסף השני – לפניו בHTML, האלמנט השלישי יתווסף לפני השני וכו', עד הסוף. כך שהאלמנט הראשון כעת אחרון והאלמנט האחרון כעת ראשון.

appendTo / prependTo

jQuery(source).appendTo(destination)

בדיוק כמו append / prepend רק התחביר קצת שונה. כעת התוכן שבסוגריים הראשונים יעבור ליעד שמוגדר בסוגריים השניים.

before / after – מבצעים את אותה פעולה, רק במיקום שונה. להוסיף את התוכן לפני או אחרי אלמנט היעד, ולא בתוכו.

wrap – עוטף את הסלקטור באלמנט נוסף

unwrap – מסיר מעל הסלקטור אלמנט (לדוגמא span שהיה עטוף בdiv וכעת לא)

2. קבלת/שינוי מאפיינים ברמות שונות של האלמנט

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

שתי ענינים לפני שנשקע לדוגמאות נפוצות:

• ברבות מהפונקציות שלהלן נציין שהן משמשות הן לget – קבלת ערך כלשהו, והן לset – הגדרת ערך כלשהו לאלמנט.
  כאשר נעשה שימוש בset – ההגדרה תחול על כל האלמנטים שנכללים בסט האלמנטים הפעילים.
  כאשר נעשה שימוש בget – ברוב המקרים יחזור לנו הערך של האלמנט הראשון מהסט בלבד. במקרים אחרים השינוי מצויין בהסבר על הפונקציה.
• בקרוב נעשה היכרות עם תת פונקציה בשם Toggle. הוא יופיע במס' פונקציות בהמשך, לכן חשוב שנסביר פעם אחת מה הוא בעצם. אז toggle  משמעותו היא: אם המצב הוא X תהפוך אותו לY ואם הוא Y תחזיר אותו לX. זה חוסך לנו את שאלת הif. מיד נראה דוגמה ראשונה:

הוספת/הסרת קלאסים

addClass( string ) / removeClass( string ) / toggleClass( string )

הstring בסוגריים של שלושת הפונקציות הללו מייצג את שם הקלאס שעליו אנו פועלים כרגע.

הפונקציה הראשונה addClass – תוסיף את אותו קלאס לאלמנט הפעיל.

הפונקציה השניה – removeClass – תעשה בדיוק את ההיפך ותסיר את הקלאס מהאלמנט הפעיל

הפונקציה השלישית – toggleClass – תבדוק אם הקלאס קיים לאלמנט הפעיל או לא, ותעשה את ההיפך מהמצב הנתון. במידה ויש לו את הקלאס – תוריד אותו, ובמידה ואין לו את הקלאס – תוסיף.

הנה דוגמא קטנה להמחשת הפונקציות הללו:

prop

השם הוא קיצור של properties. הפונקציה פועלת על תכונות בוליאניות של האלמנט. תכונות אלו לא מקבלות ערך. לדוגמא: checked, selected, disabled.

פונקציה זו היא דו צדדית, כלומר יש לה מצב של get – קבלת הערך של התכונה, ומצב של set – הגדרת הערך של התכונה. לדוגמא:

var is_disabled = jQuery('button').prop('disabled');

השורה הזו תחזיר לנו true / false בהתאם למצב של הכפתור, אם הוא במצב disabled או לא. זה שימוש של get בפונקציה. לעומת זאת נראה שימוש של set – הגדרת ערך לתכונה:

jQuery('button').prop('disabled', true);

הפונקציה הזו תגדיר את הכפתור כלא פעיל.

דוגמא:

attr

פונקציה זו היא מהפונקציות היותר מורכבות, המסוגלות לבוא בכמה וואריציות.

זו פונקציה דו צדדית, כלומר, שיש לה מצב של get – קבלת ערך, ומצב של set – הגדרת ערך

הפונקציה פועלת על התכונות של האלמנט, שמסוגלות לקבל ערך. לדוגמא: id, type, href, data-xyz, class, value וכו'.

ניתן לשלוט באמצעותה גם על תכונות בוליאניות כמו הפונקציה prop, אך עדיף להשתמש בכל פונקציה למטרתה המוגדרת.

דוגמא לget:

var href = jQuery('a').attr('href');

דוגמא לset:

jQuery('a').attr('href', 'http://google.com');

השורה הזו תכניס לכל הa את הקישור לעמוד הראשי של גוגל.

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

css

הפונקציה הזו דומה למדי לattr מהרבה בחינות ובכל צורת ההתנהגות שלה, וגם עליה אני מקווה להרחיב את הדיבור בעז"ה בעתיד.

נציין רק את ההבדל המאד מהותי בין css לבין attr. בעוד attr עובדת כאמור על התכונות של האלמנט, כמו href, type ועוד, הפונקציה css עובדת על הגדרות הסטייל של האלמנט, כשבמצב set היא מכניסה לו את ההגדרות בצורה של style-inline, כלומר, מכניסה תכונת style לאלמנט, ובו כותבת את ההגדרות החדשות, ולא בקובץ css כלשהו.

html

מקבלת או מחזירה HTML של אלמנט.

לדוגמא:

jQuery('div').html('<b>hello</b>');

יכניס לdiv את תגית הבולד עם המילה hello.

var myHtml = jQuery('div').html();

יחזיר לנו לתוך myHtml את התוכן של div, שהוא "<b>hello</b>".

text

די דומה לHTML. מקבלת או מחזירה את הטקסט של אלמנט. ההבדל הוא שhtml מקבלת או מחזירה כולל תגיות (כמו בדוגמא שלנו, שעשינו שימוש בתגית </b>), לעומת זאת הפונקציה text מדלגת על התגיות הן בget והן בset.

הערה חשובה, זו דוגמא לפונקציה שחורגת מהכלל שקבענו למעלה, שפונקצית get מקבלת רק את הערך של האלמנט הראשון בסט אלמנטים פעילים. הפונקציה text מחזירה שירשור של הטקסטים בכל האלמנטים שבסט האלמנטים הפעילים. (נדגיש שוב, הכוונה רק לפונקציה text ולא לפונקציה html שפועלת כרגיל).

val

הפונקציה val מקבלת או מחזירה לנו ערך נמצא בתכונה value, או תוכן של textarea.

אנימציות

נתחיל בהבדלה ברורה בין הפונקציה animate לבין פונקציות אחרות שנראה בהמשך.

הפונקציות האחרות מבצעות פעולה אחת – מוגדרת – מעצמן, בלי שנגדיר להן איך לעשות את זה (מלבד הגדרות מינוריות, כמו משך האנימציה וכדו').

לעומת זאת הפונקציה animate מבקשת מאיתנו להגדיר לה בדיוק מה לעשות.

.animate( properties [, duration ] [, easing ] [, complete ] )

הפונקציה משמשת לביצוע אפקטים שונים עם אלמנטים, בעיקר שינויי css (בזה היא פועלת בצורה דומה לCSS transition), וכן יכולה לבצע פעולות אחרות כמו גלילה.

• properties – פרמטר חובה, מה השינויים שיכולו. מגיע כאובייקט המכיל מאפיין: ערך חדש, מאפיין: ערך חדש וכו'.
  {left: 24px, width: 450px;}
• duration – פרמטר אופציונלי. משך האנימציה, כמה זמן היא תקרה.
• easing – הדרך שבה יתפרס מידת השינוי בהתאם למשך. משהו די מקביל קיים לנו גם בcss transitions.
• complete – פרמטר אופציונלי. מה יקרה כשהאנימציה תסתיים. מאחר וקובץ הסקריפט נקרא שורה אחרי שורה ברצף, אין המתנה עד שתסתיים האנימציה, ובנתיים הפונקציות הבאות קורות. במידה ונראה שהן תקרנה רק אחרי שהאנימציה תסתיים – נכניס אותן לתוך complete. פרמטר זה מקבל פונקציה. (או פונקציה מוכנה שרק קוראים לה בשם, או function(){…}, אך בשום אופן לא שורות קוד שמונחות סתם ללא פונקציה שמקיפה אותן)

hide / show / toggle

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

hide – מוסיפה הגדרת CSS של display: none;

show – מוסיפה display: block;

toggle – מוסיפה ומורידה לסירוגין display: none;

fadeIn / fadeOut / fadeToggle

הפונקציות הללו עובדות בדיוק כמו hide/show/toggle, אלא שכמו שמשתמע משמן – הן עושות את זה באמצעות fade, באיטיות. אי לכך הן מסוגלות לקבל פרמטרים בדומה לanimate – duration, easing, complete.

fadeIn – מכניסה את האלמנט, fadeOut מוציאה אותו

slideDown / slideUp / slideToggle

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

slideDown- מכניסה את האלמנט, slideUp מוציאה אותו

 

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