jQuery
בשיעור זה אנו נכנסים לנושא jQuery, ספרייה חינמית שעוטפת פונקציות של ג'אווה סקריפט. אנו לומדים להוריד ולשלב את הספרייה, לבחור אלמנטים בסלקטורים של CSS, להכיר את הפונקציות המרכזיות, לעבוד עם ה-DOM, לבצע אפקטים ואנימציות, להירשם ולהתנתק מאירועים, לשלב אג'אקס, להשתמש בתוספים ובספריית jQuery UI, ובונים בדרך תפריט אקורדיון, קרוסלת תמונות ולוח שנה.
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתחילים -לחץ כאן לתלמידי המכללה בלבד
להורדת קוד מקור של כל הדוגמאות בקורס JAVA SCRIPT למתקדמים- לחץ כאן לתלמידי המכללה בלבד
פרקי ההרצאה: jQuery
תמלול ההרצאה: jQuery
הטקסט המלא של הדקות הראשונות בהרצאה «jQuery» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו נכנסים לנושא ה-JQuery. JQuery זאת ספרייה חינמית שעוטפת פונקציות של JavaScript ומאפשרת לנו להשתמש בפונקציות שבספרייה הזאת במקום לכתוב JavaScript בעצמנו.
וכך אנחנו יכולים לבצע המון דברים שב-JavaScript טהור היו מאוד מורכבים לביצוע על ידי פונקציות פשוטות שנמצאות בספרייה.
ראשית, בואו נוריד את הספרייה. אז בשביל להוריד את הספרייה אנחנו נכנסים לאתר שנקרא HTTP, בוא נרשום את זה פה jquery.com וכאן יש לנו אפשרות להוריד את הספרייה פה על ידי לחצן download ויש לנו בעצם שני קבצים שאנחנו יכולים להוריד.
קובץ אחד נקרא production והוא שוקל רק 32 קילו וזה קובץ שמאפשר לנו להעלות את הספרייה לפרודקשן כלומר לאתר שהוא באוויר כי הקובץ הזה הוא לייט. אותו קובץ בדיוק אנחנו יכולים להוריד כ-development והוא שוקל 252 קילו.
למה הקובץ הזה גדול פי כמה מהקובץ של הפרודקשן? מפני שהוא מכיל המון תיעוד והמון רווחים בין השורות שאותם הורידו עבור קובץ הפרודקשן. כרגע לצורך הפשטות נוריד את הפרודקשן, שים על דאונלוד ונשמור את הקובץ בתיקייה שלנו.
אז בואו נלך לתיקייה, יש לנו את זה בוידאו, יש לנו את זה בקמפטסיה ובג'אווה סקריפט ובנושא jQuery. כרגע הגרסה של jQuery היא 1.8.0 ואנחנו רואים שהקובץ הזה הוא קובץ מינימלי על ידי המילה min.js.
זה קובץ JavaScript רגיל, אנחנו שמים אותו בתיקייה, save, close, אפשר לסגור את האתר ואנחנו רוצים לשלב אותו בדף שלנו.
לצורך שילוב הקובץ הזה, זה קובץ JavaScript רגיל, אנחנו פותחים Script, Language, JavaScript, Type, טקסט JavaScript ו-src מתחברים לקובץ ואנחנו יכולים לראות אותו פה.
כעת אנחנו פותחים סקריפט נוסף עבור כתיבה משלנו של פקודות JavaScript שהשתמשו בספרייה שהורדנו. אז זה קובץ סקריפט רגיל ופה אנחנו כותבים את הפקודות של jQuery.
jQuery מסוגלת לבצע כל מיני דברים על תגיות של ה-HTML. לצורך כך בואו נבנה מספר תגיות, בואו ניקח div כדי שיהיה פשוט, ניקח איזה שישה תגיות טיב שש תגיות טיב וכאן אנחנו יכולים כעת לכתוב קוד ב jQuery אז נבנה פונקציה והדבר הראשון שאנחנו הולכים לראות ב jQuery זה איך אנחנו בוחרים את התגיות שעליהן
אנחנו הולכים לעבוד לצורך בחירת התגיות אנחנו משתמשים בסלקטורס של css אז נקרא לפונקציה טסט סלקטורס בשביל להבין ולהשתמש ב jQuery אנחנו צריכים להכיר html אנחנו צריכים להכיר css ואנחנו צריכים להכיר javascript ואת כל אלו כבר הכרנו במודולים קודמים.
אז בוא נניח שאנחנו רוצים עכשיו לבצע פעולה מסוימת על כל התגיות האלה של הדיו ובוא נניח לכתוב בתוכם את המילה הלו בשביל להשתמש בפונקציות שנמצאות בספרייה של ה jQuery אנחנו יכולים לכתוב את הפקודה jQuery ובסוגריים לרשום במחרוזת את הסלקטור הcssי שאנחנו רוצים לבחור לפיו את התגיות שעליהם אנחנו עובדים.
זאת אומרת אם הייתי עכשיו בcss והייתי רוצה לבצע איזשהו עיצוב מסוים על כל הדיבים הללו מה היה הסלקטור שהייתי בוחר בשביל לעבוד על הדיבים והסלקטור שהייתי בוחר זה פשוט element name selector ופשוט הייתי רושם את השם דיב זה בדיוק מה שאני רושם בתוך הפונקציית jquery ברגע שעשיתי את הדבר הזה jquery יודעת עכשיו שאני רוצה לבצע עבודה מסוימת על כל הדיבים לדוגמה בואו ניקח בjquery את
הפונקציה html HTML פשוט מאוד כותבת בתוך הדיו איזה פעולה או איזה מידע יותר נכון שאני רוצה לכתוב. אז בואו נכתוב Hello, נבנה לחצן, נקרא לו, נכתוב עליו Test Selectors ובאון קליק נקרא לפונקציה Test Selectors הזאתי.
נעתיק את זה, נדביק את זה פה ובואו נבצע איזשהו עיצוב CSSי בשביל קצת לראות את המידע שאנחנו עובדים עליו.
אז ניקח סטייל ונכתוב בתוך הסטייל דיו בשביל לעצב את הדיבים קצת בצורה יותר אסתטית. ניקח background color orange, ניקח width 200 פיקסלים, ניקח height 70, ניקח בורדר 1 פיקסל, solid black, וניקח איזשהו שוליים בין כל דיב 3 פיקסלים.
עכשיו שימו לב שבכלל לא הייתי חייב לעשות את העיצוב הזה, אין קשר בין העיצוב לבין מה שאנחנו הולכים לכתוב, רק פשוט שזה יהיה קצת יותר אסתטי לעין. אוקיי, כל מה שנשאר לנו לעשות, זה להריץ את הדף ולראות מה בעצם קורה כשאני לוחץ על הכפתור.
אוקיי, אז יש לנו פה פשוט מאוד לחיצה על הכפתור ו-hello בכל הסלקטורים האלה. שוב פעם בואו נריץ את זה, לחיצה ואני רואה ש jQuery רשמה הלו בתוך כולם.
אני רואה רק שהוויד וההייט לא נקלטו, בואו נסתכל רגע מה הייתה הבעיה. כן, אני רואה פה שיש לנו 200px אמור להיות, יש פה o מיותרת ו-70px גם כן אמור להיות. אז בואו נחזור כרגע, נרפרש, או ככה אמורות להיות הדיבים ונלחץ ונראה שבכל אחד יש את המילה הלו.
כאן גם חסר נקודותיים. שוב בואו נסתכל, הנה הדיבים מעוצבים כמו שצריך, לחיצה ו-jquery מכניסה בכל אחד את המילה הלו.
אוקיי, במקום לרשום את כל המילה jquery אנחנו אנחנו יכולים פשוט לרשום דולר וזה מפנה אותי אוטומטית למרחב השמות של jquery. זה ייתן לי בדיוק את אותה התוצאה ואז אין צורך כל פעם לרשום את כל המילה jquery אלא פשוט רק את הסימן דולר.
בואו נסתכל על זה, יש לנו את העיצוב ההתחלתי, לחיצה על הלחצן ואני רואה שjquery פעלה על כל הdivים. אז בואו נראה כל מיני סלקטורים נוספים שאנחנו יכולים להשתמש איתם.
קודם כל אנחנו יכולים להגדיר div first, div. first כסלקטור. בואו נסתכל מה זה נותן לנו, נרפרש, נלחץ על הלחצן ואנחנו מקבלים ש jQuery ביצעה את הפעולה רק על הדיב הראשונה שקיימת בתוך הרשימה הזאת.
אותו הדבר אנחנו יכולים לבצע על last. בואו נרשום כאן db.2 last, נרפרש, נלחץ על הלחצן ואנחנו רואים את ה-hello מופיע בדיב האחרונה מבין הרשימה שנבחרה.
יש לנו אפשרות לבצע div נקודותיים even כלומר זוגי. נרפרש ונראה עכשיו ש jQuery פועלת רק על הזוגיים כאשר הראשון מתחיל מ-0.
0 יש לנו 1 היא לא פעלה עליו, 2, 3 לא פעלה, 4 ו-5 לא פעלה. אוקיי אותו הדבר יש לנו אפשרות להשתמש ב-div עוד כלומר אי-זוגיים.
כעת אנחנו רואים שכשאני נוחץ על הכפתור רק הדיבים האי-זוגיים קיבלו את הפעולה שאנחנו רוצים לבצע. כל סלקטור שקיים ב-CSS אנחנו יכולים להגדיר כאן.
אז בואו נניח שאחת מהדיבים, בואו ניקח את דיב מספר 3, יש לה איזשהו עיצוב מסוים על ידי קלאס. בואו נקרא לדיב הזאת, אלא הקלאס הזאת יותר נכון, קול דיב.
נרשום פה קול דיב ונעצב איזשהי סטייל, קלאס יותר נכון, שנקרא קול דיב. נגדיר background color, ניקח olive.
איך אנחנו עכשיו אומרים ל jQuery לעבוד אך ורק על הדיב הזאתי שיש לה קלאף שנקרא קול דיב? אז אנחנו צריכים לחשוב איך ב-CSS היינו מעצבים את הדיב הזאת.
אז כמובן ב-CSS בשביל לעצב את הדיב זה בדיוק מה שרשמנו נקודה קול דיב. זה בדיוק מה שאנחנו רושמים כאן. זאת אומרת בתוך הסוגריים שאחרי הדולר אנחנו פשוט מאוד רושמים את הסלקטור הCSSי שב-CSS היינו מתייחסים לאלמנטים האלה.
לדוגמה, pool div. כעת רק div שיש לה קלאס שנקראת נקודה call div, או יותר נכון call div, תקבל את הפעילות הזאת שאנחנו מגדירים כאן.
בואו נבדוק, נרפרש, יש לנו פה את ה-div הזאת שהיא בצבע אחר, אוליב כזה, אנחנו לוחצים על הכפתור ורק היא מקבלת את העיצוב שנתנו.
אז בעצם זה די פשוט לעבוד עם jQuery, מפני ש-CSS הוא מאוד נוח לייצוב על ידי כל הסלקטורים. יש לנו כל מיני סלקטורים, יש לנו Element Name Selector שזה שם התגית, יש לנו Class Selector, יש לנו ID Selector, יש לנו Attribute Selector, יש לנו Pseudo Selector, כל הסלקטורים שהיינו
עובדים ב-CSS, זה מה שאנחנו רושמים כאן ואנחנו יכולים להשתמש איתם. בואו נראה עוד כל מיני סלקטורים. אז ב-JQuery יש סלקטורים נוספים שלא קיימים ב-CSS, לדוגמה, div נקודותיים not ואז הסלקטור הרצוי, קול דיו לדוגמה.
כעת מי שהולך לקבל את פקודת ה-jquery הזאת זה כל הסלקטורים או יותר נכון כל הדיווים שאין להם את הסלקטור קול דיו. כלומר אין להם קלאס קול דיו.
בואו נסתכל, נרפרש, נלחץ על הלחצן, כולם קיבלו הלו פרט לדיו שיש לה קלאס שנקראת קול דיו.
בואו נראה עוד סלקטור נוסף. אנחנו יכולים להגדיר דיו נקודותיים פרסט צ'יילד. אוקיי, מה זה אומר? זה אומר שאנחנו רוצים להתייחס לדיו שהיא עצמה צ'יילד ראשון של איזשהו אלמנט.
עכשיו אם נסתכל כאן נראה שהדיו, כל הדיוים האלה יושבים בתוך ה-body אבל אף אחד מהדיוים הוא לא אלמנט ראשון בתוך ה-body מפני שהאלמנט הראשון בתוך ה-body זה הלחצן, אז בואו נסתכל ונראה שכרגע זה לא אמור להשפיע על שום דבר. אני לוחץ על הכפתור ואף דיו לא מקבלת את הפעילות שכרגע כתבתי.
אז אם אני עכשיו אקח שני דיוים לדוגמה ואשים אותם ראשונים אז הדיו הזה הראשון הזה הוא צ'יילד ראשון של הבאדי ולכן הוא יקבל את העיצוב. בואו נרפרש, נלחץ על הלחצן ונראה שהדיו הראשון קיבל את העיצוב הזה.
אוקיי, כנ"ל יש לנו last child. כעת רק דיו שהוא last child של איזה שהוא דיו, כאן אנחנו רואים את הדיו הזה, יקבל את העיצוב המבוקש.
בואו נריץ, נלחץ על הלחצן ונראה שה-hello ניתן פה למטה לדיו האחרון כי הוא last child של ה-body. אוקיי, בואו נראה עוד סלקטור.
יש לנו אפשרות להשתמש ב-nth, כלומר הדיו המספר n מסוים, nth child. ואנחנו יכולים להגדיר איזה אנחנו רוצים להתייחס אליו.
אז אנחנו כרגע הגדרנו שאנחנו רוצים שהפעולה ה-j-queried שאנחנו רוצים לבצע תתבצע על דיב מספר 2 שקיימים בכל הדיבים וההתחלה היא תמיד ב-1. כלומר רק הדיב הזה, הדיב השני הולך לקבל את העיצוב.
בואו נסתכל, נלחץ על הלחצן ונראה שהדיב השני מקבל את הפעילות שאנחנו רצינו. אז בעצם ראינו כרגע את כל הסוגים השונים או לא את כולם כמובן יש עוד הרבה אבל את העיקרון של שימוש בסלקטורים בשביל לבחור את רכיבי ה-HTML שעליהם אנחנו רוצים לעבוד ב-JavaScript.
עכשיו אנחנו יכולים לעבור ולראות איזה פונקציות שונות קיימות ב-JQuery ליתר דיוק שנוכל לעבוד עליהם אחרי שאנחנו כבר יודעים איך לבחור את הסלקטורים.
לצורך כך בואו נעתיק את כל קוד הזה ונפתח קובץ חדש בכדי להפריד, לבצע הפרדה, נשמור אותו גם כן באותה עתיקייה, נבחר html, נבצע open, נדביק את כל הקוד ונשמור אותו באותו המקום, יש לנו כאן את my videos, קמפטסיה, ג'אווה סקריפט,
אנחנו נכנסים ל-jquery והפעם אנחנו הולכים לראות jquery functions. לצורך כך הפונקציה שאנחנו נבנה נקרא לה test functions, יש לנו פה כותרת jQuery Functions נמחק את כל התוכן מהפונקציה מפני שזה קובץ אחר לגמרי לחצן יקרא לטסט פונקצ'אנס ואנחנו קוראים לפונקציה טסט פונקצ'אנס בואו ניפטר משני הדיבים הראשונים
והפונקציה הראשונה שאנחנו הולכים לראות זה פונקציה שמאפשרת לנו לראות כמה פריטים אנחנו בחרנו אז ראשית נבחר את הפריטים ברגע שעשיתי דבר כזה אני מתייחס לכל הדיבים אז עכשיו אני יכול לבחור את פונקציה שנקראת סייז והיא מחזירה לי כמה פריטים קיימים בואו נציג אלרט ונכתוב there are נשרשר את הסייז עם המילה divs in this page נסגור את הדפדפן
ניפטר מהטופס הקודם ונריץ את זה נלחץ על הלחצן והוא כותב לנו there are 6 divs in this page 1,2,3,4,5,6 שזה נכון פונקציה הבאה שJQuery מאפשרת לנו זה פונקציה שנקראת itch אנחנו קוראים לה בצורה הזאת ניקח את הסלקטור הרצוי נקרא ל itch ואנחנו בעצם מסוגלים
על ידי itch לרוץ על כל הדיבים שנבחרו או על כל התגיות האחרות שבחרנו בסלקטור הזה כעת אנחנו בחרנו את כל הדיבים ולכן פונקציית itch אומרת לנו אני רצה על כל הדיבים האלה מה אתה רוצה בדיוק לעשות עבור כל דיב אז מה זאת אומרת מה אני רוצה לעשות זה אומר שאני רוצה לעשות איזושהי פעולה מסוימת.
פעולה בעולם התכנות מתבצעת על ידי פונקציה. זאת אומרת שאני עכשיו צריך לתת ל-each פונקציה. ומה שנהוג לעשות זה לתת לה פונקציית inline שאנחנו ראינו בעבר.
פונקציית inline נכתבת פשוט על ידי המילה function ואין לה שם אלא היא מקבלת רק פרמטרים. אז כאשר פונקציית each של jQuery רצה על כל אחת מהפונקציות שלנו, מהdivים שלנו יותר נכון, היא שולחת לה את האינדקס ואנחנו יכולים לקבל אותו בפונקציה שאנחנו כותבים נפתח סוגריים מסוסלות נסגור סוגריים מסוסלות סוגריים עגולות
ובשביל פונקציית itch נקודה פסיק כי אני נמצא בכל השורה הזאת של פקודה אחת וכל מה שאנחנו צריכים לעשות זה לכתוב את הקוד שלנו בתוך inline function שאנחנו כרגע עובדים עליה בשביל להגיע לדיו הספציפי שכרגע פונקציית itch רצה עליו אנחנו
משתמשים במילה diff לדוגמה ה-InnerHTML זה בעצם התוכן הפנימי של הרכיב שאנחנו כרגע סורקים. בואו נרשום לתוכו IMDb number ונשרשר את אינדקס.
עכשיו לא לשכוח לרשום נקודה פסיק מפני שאנחנו נמצאים בתוך פונקציית אינליין אחת שנמצאת בתוך הפונקציה each. עכשיו יכול להיות שהקוד הזה הוא טיפה מורכב ולכן מה שנהוג לעשות זה פשוט לרדת שורה איפה שאנחנו פותחים את הפונקציות ואיפה שאנחנו סוגרים.
ואז יש לנו פתיחת סוגריים מסוסלות אני יורד שורה ואני יודע שאני נמצא בתוך הפונקציית אינליין הזאתי שזה התוכן שלה לאחר מכן אני סוגר סוגריים של פונקציית האינליין סוגריים של פונקציית itch נקודה פסיק מסיימת את הפקודה של jQuery.
אוקיי בואו נרפרש נריץ נלחץ על הלחצן ונראה שיש לנו I'm div number 0 1 2 3 4 5 כמובן זה התחיל מ-0 ולכן יש לנו פה ריצה על כל הדיווים וביצוע איזושהי פעולה מסוימת עבור כל אחת מהדיווים.
כאן אנחנו צריכים רווח. הפונקציה הבאה שאנחנו הולכים לראות זה פונקציה שנקראת ATTR. בואו נסתכל. אנחנו יכולים עכשיו לגשת לאיזושהי דיו או יותר נכון לכל הדיווים ולהגיע לפונקציה שנקראת ATTR. פונקציית ATTR זה קיצור של אטריביוט והפונקציה הזאת יכולה להחזיר לי אטריביוט מסוים.
יותר הגיוני לכן להריץ את זה על דיו אחת ויחידה. בואו ניקח את הדיו הראשונה, ניתן לה ID, נקרא לה ID mydiv, ניתן לה איזשהו אטריביוט, בוא נגיד dir שווה left to right, ואנחנו רוצים להגיע בעזרת jQuery אך ורק לdiv שנקראת mydiv.
אם אני כותב את זה, אז בעצם כתבתי מה שנקרא Element Name Selector. כלומר, אם הייתי כותב את הדבר הזה ב-CSS, CSS הייתה מחפשת אלמנט שנקרא mydiv, וכמובן אין לי אלמנט כזה, אלא יש לי ID כזה.
לכן ב-CSS הייתי אמור לרשום סולמית מיידיב בכדי לתת עיצוב לדיב שזה ה-ID שלה. וזה בדיוק הסלקטור שאני רושם כאן. ולכן jQuery בוחרת לי רק את הדיב הזאתי שיש לה ID שנקרא מיידיב.
ואז דרך ATTR אני מגיע לאטריביוט הרצוי, האטריביוט שאני רוצה לבדוק מהו, נקרא דיר. אוקיי, בואו נדפיס את זה. ניקח איזשהו אלרט, ונראה האם הוא נותן לי את ערך האטריביוט הזה.
בואו נלחץ על הלחצן והוא כותב לי שערך האטריביוט שנקרא dir הוא ltr שזה בדיוק הערך שלו. בעזרת האטריביוט attr אנחנו מסוגלים גם לשנות את ערך האטריביוט הזה וזה מתבצע פשוט מאוד על ידי העמסה נוספת שיש לפונקציה attr שאומרת לנו ערך ראשון שאתם שולחים זה איזה אטריביוט אתם מחפשים והערך השני
זה מה בדיוק האטריביוט הזה מקבל. לדוגמה rtl כלומר left to right בואו נסתכל איך זה משפיע כרגע על הקוד מה שנעשה זה נרשום בתוך הדיו הזאת שלום לכולם אוקיי ומה שנעשה זה נציג שוב פעם את הערך של האטריביוט כאשר אני משנה את האטריביוט אני לא רוצה להציג אותו באלרט בואו נוריד מפה את האלרט ואז הקוד
שלנו אומר דבר כזה דבר ראשון תגיד לי מה ערך האטריביוט שנקרא דיר עבור דיו או יותר נכון עבור רכיב כלשהו שהאיידי שלו נקרא מיידיו. לאחר מכן תשנה את ערך האטריביוט הזה שנקרא דיר לערך rtl ולאחר מכן תציג שוב את ערך האטריביוט דיר.
בואו נסתכל על הקוד. נסתכל על ההרצה. אז יש לי כאן שלום לכולם וכמובן בגלל שערך האטריביוט הוא left to right אני רואה את זה בצד שמאל הפוך.
נלחץ על הכפתור, נראה שהערך כרגע הוא ltr, נלחץ אוקיי, נראה שעכשיו הערך שונה ל-RTL, אנחנו יכולים לראות את זה גם כאן ואנחנו יכולים לראות את זה גם שפיזית הדיב שונתה לימין לשמאל.
אז הפונקציה ATTR היא פונקציה מאוד נפוצה ב-JQuery ומאפשרת לי לקרוא ערכי אטריביוט ולשנות ערכי אטריביוט. הפונקציה הבאה מאפשרת לי להוסיף עיצובים של CSS. בואו נבנה עיצוב css-y נבנה קלאס שנקראת red background, background color red, עיצוב פשוט.
כעת אנחנו רוצים לקחת בדיוק את הדיו הזאתי ולהוסיף לה דינמית את הקלאס. אז יש לנו פונקציה שנקראת add class. add class אומרת תביא לי בדיוק את הקלאס שאתה רוצה שאני אוסיף בלי נקודה red background ואני אוסיף אותו.
בואו נריץ, נלחץ על הלחצן ונראה שהדיו הזאת, ה-Background שלה השתנה לאדום, זאת אומרת שהיא קיבלה את העיצוב CSSי, שזה הקלאס שלו. אנחנו יכולים עכשיו להשתמש בפונקציה שנקראת RemoveClass.
נקרא ל-RemoveClass, נשלח לה בדיוק את אותו Background ולפני זה נגדיר רק PressOK to RemoveClass בכדי לראות את השינוי. בואו נריץ, יש לנו פה ראשית את הקלאס הזאת שניתנה לדיו הראשונה, פרס OK ואנחנו רואים שהסרנו דינמית דרך JQuery, את הקלאס הזאת.
אז הפונקציות האלה היו add class ו-remove class שמאפשרות לנו בצורה דינמית להוסיף ולהוריד קלאסים. פונקציה הבאה נקראת text.
בואו ניקח כרגע את כל הדיבים. נקרא לפונקציה text ונכניס לה היי. נריץ ואנחנו רואים שכולם קיבלו היי. עכשיו אנחנו מקודם ראינו שישנה עוד פונקציה כזאת שנקראת html.
בואו רק נוריד את זה שלא יפריע לנו, נסתכל רגע על פונקציה נוספת שמקודם ראינו שנקראת html. במקום טקסט נקרא פשוט ל html, נרפרש, נריץ ונראה שהיא כביכול עושה את אותו הדבר.
אז מה ההבדל ביניהם? פונקציה טקסט מוסיפה את המידע שנכתב בתוכה כמו שהוא, כולל אם כתבתי בתוכה תגיות. בואו נסתכל מה זה אומר.
נוסיף בתוך הטקסט תגית בר ונרשום ביי, נריץ ונראה שפונקציית טקסט רשמה בדיוק את הטקסט כמו שהוא שימו לב היי פתיחת סוגריים בר סלאש סגירת סוגריים וביי פונקציית html אתם כבר יכולים להבין מה היא עושה היא תתייחס לטקסט הזה כאילו שהוא תגיות אמיתיות ולא סתם תציג את התגיות אלא תתייחס לתגיות כאילו שזה html אמיתי ואז אנחנו לא רואים את
הבר אלא פשוט מאוד jquery השתמשה בו כאילו שהוא תגית וממש הורידה שורה. הדבר הזה מקביל לפונקציה למאפיין innerHTML שראינו מקודם.
HTML מקביל ל-InnerHTML והפונקציה טקסט מקבילה לפונקציה ישנה שהייתה שנקראת InnerText שלפעמים גם היא לא נתמכת אבל יש לנו את jQuery שמאפשר לנו לעשות את זה.
הפונקציה הבאה שאנחנו הולכים לראות בואו נעבוד כרגע על מיידיו כלומר רק על הדיו בעלת ID שנקרא מיידיו זאת פונקציה שנקראת append. פנד פירושו להוסיף ובואו נוסיף כרגע איזשהו סמיילי לטקסט בואו נריץ נלחץ על הלחצן ונראה שהסמיילי יתווסף אחרי הטקסט הפנד זה להוסיף אחרי משהו.
פונקציה נוספת נקראת prepend כלומר אותו הדבר גם להוסיף אבל לפני הטקסט שיש בתוך בואו נריץ נלחץ על הלחצן ונראה שהסמיילי יתווסף לפני