בפוסט הזה נדבר על הפונקציות החשובות ביותר בספריה jQuery – ניווט בעץ הHTML של האתר שלנו – הDOM. נלמד איך "לתפוס" אלמנט אחד או יותר על מנת להחיל עליהם פקודות שונות. הפונקציות בפרק הזה עדיין לא תבצענה שינויים על הDOM אלא תתנה לכם את כל הכלים להגיע לכל אלמנט מבוקש בHTML.
נניח שיש לנו את HTML הבא:
בתחילה נחליט על מי אנחנו רוצים להפעיל עכשיו קוד. ונכתוב את הסלקטור הזה בסוגריים הראשונים שאחרי jQuery.
jQuery('#mainMenu')כעת מה שנפעיל יחול על הdiv הכללי, הראשון. נקרא לו "האלמנט הפעיל". אך לו יצוייר שאני רוצה לגשת לאלמנטים בתוכו, ואין לי כאמור ID שלהם, או כל מזהה אחר. ברור שניתן לגשת בכל סלקטור שזמין באמצעות css3, אך ניתן לגשת גם באמצעות פונקציות jQuery שמזיזות את האלמנט הפעיל
לדוגמא אני רוצה לגשת לUL הראשי, זה שתחת הdiv הפעיל כרגע. את זה תעשה לי הפונקציה children() של jQuery:
jQuery('#mainMenu').children('ul');בפונקציות מהסוג הזה, של ניווט בDOM, חלק מהפונקציות יכולות לקבל פרמטר, ואצל חלקן הוא חובה. הפרמטר יהיה ברוב המקרים סלקטור שאותו אנחנו רוצים לתפוס כחלק מהשירשור. כמו בדוגמא האחרונה – הפונקציה children תתפוס לי את כל הבנים הישירים של הdiv, ובמידה ויש לו עוד בנים, ואני רוצה לתפוס רק את הul – אכתוב בסוגריים את הul, כדי להיות יותר ספציפית.
הסלקטור בכל מקום הוא כל סלקטור שתקף בcss3. זה יכול להיות השם של התגית, יכול להיות קלאס, ID, מאפיין כלשהו, :first-child וכדו'.
דוגמאות לפונקציות מהסוג הזה (במידה והפרמטר אינו חובה – הוא יצוין בסוגריים מרובעים):
- children([selector]) – ניגש לבנים הישירים של האלמנט הפעיל
- parent([selector]) – ניגש להורה הישיר של האלמנט הפעיל
- find(selector) – מאתר את כל הצאצאים העונים לסלקטור, של האלמנט הפעיל
- closest(selector) – מאתר את ההורה הקרוב בהיררכיה שתואם לסלקטור (אב, סב, אב של סב וכו')
- siblings([selector]) – מביא את ה"אחים" של האלמנט הפעיל תחת אותו אב משותף, העונים לסלקטור
- prev([selector]) / next([selector]) – מביא את האח הקודם/הבא, במידה והוא עונה להגדרת הסלקטור
יש מצב שהאלמנט הפעיל אינו אלמנט אחד אלא אוסף של מספר אלמנטים. אם נמשיך עם הHTML שלנו:
jQuery('a')הקוד הזה יחזיר לנו סט של כמה קישורים, כי כמה קישורים עונים לנו לסלקטור a.
במקרים כאלה, של סט של אלמנטים, יכולות לבוא לידי שימוש הפונקציות הבאות
- first() – מביא את האלמנט הראשון מתוך הסט (בדוגמא שלנו – הקישור שנקרא "קישור ראשון")
- last() – מביא את האלמנט האחרון מתוך הסט. בדוגמא שלנו הוא הקישור שנקרא "תת קישור שלישי"
- eq(index) – מביא את האלמנט הindex מתוך הסט, כשindex מתחיל מ0. לדוגמא
jQuery('a').eq(1)יביא לי את הקישור השני מהסט, הלא הוא הקישור "תת קישור ראשון"
יש להבדיל מאד בין שלושת הפונקציות האחרונות שראינו, לבן :first-child, last-child, nth-child() של css.
הפונקציות הללו של CSS מדברות על המיקום של האלמנט ביחס לאחים שלו תחת אותו אב משותף, לעומת זאת הפונקציות של jQuery מדברות על האלמנט ביחס לסט האלמנטים שהתקבל באלמנט הפעיל האחרון.
ניתן דוגמא אחרונה מורכבת לפני שנעבור לחלק הבא, שוב בהתבסס על הHTML מהדוגמא שלנו
jQuery('#mainMenu').find('ul').children('li').last().closest('ul')
יביא לנו את הdiv הראשי
יביא לנו את שתי הul בHTML, זאת מאחר וfind לא נעצר אחרי שהוא מצא אחד, אלא מביא את כל הצאצאים העונים לתיאור
יביא לנו את כל הli שמופיעים לנו בHTML, מאחר וכל הli'ים הינם בנים של אחד משתי הul שהתקבלו באלמנט הפעיל הקודם
יביא לנו את הli האחרון, זה שמכיל את הקישור "תת קישור שלישי", מאחר והוא האחרון בסט שהתקבל
יביא לנו את הul הפנימי בלבד, וזאת מאחר והפונקציה closest כן נעצרת אחרי האלמנט הראשון התואם שמצאה.
עד כאן לגבי ניווט בDOM שלנו באמצעות jQuery.
אהבתם? מוזמנים לעבור לפוסט הבא במדריך.