סיכום שיעור
למדנו שכדי לעבוד על jquery יש לטעון את הספריה לפני שטוענים את קבצי ה js שעושים שימוש בספריה
למדנו יצירת אובייקט של jquery באמצעות הדולר וסלקטור
הכרנו את Document ready
למדנו חיבור טיפול בארוע על אובייקט לפונקציה (באמצעות on)
הכרנו 3 ארועים
clik
mouseenter
mouseleave
הכרנו 9 אפקטים
show
hide
toggle
fadeIn
fadeOut
fadeToggle
slideUp
slideDown
slideToggle
פונקציה נוספת שהכרנו
addClass
removeClass
ראינו שב jquery אפשר לשרשר פונקציות ( chaning )
ראינו קצת עבודה עם currentTarget נדבר על זה רבות בהמשך
מצגת
http://gamani.info/prog/JS/lesson8/jquery1.zip
תרגילי הדגמה
http://gamani.info/prog/JS/lesson8/jquery1-ex.zip
שיעורי בית
בנו אתר שנראה כך
במעבר עכבר על תמונת פרח מוצג תפריט של שתי אפשרויות – קרא עוד והצג בגדול
לכל פרח יש class או id יחודי שהארועים יקרו בתגובה לכניסת עכבר לשטחם mouseenter
ניתן לגשת לאלמנטים שצריכים להופיע על ידי כתיבת סלקטור מקונן
במעבר עכבר על כל אחד משני הקישורים הללו הרקע שלו משתנה לאפור והטקסט לאדום ונטוי
עשו זאת תוך שימוש ב class בשם active
הערה:
אין צורך להשתמש ב event.currentTarget. ניתן להגיב לכניסת עכבר לאלמנט שיש לו את הclass בשם read-more (גםאם כל האלמנטים שיש להם את הclass הזה יקבלו class בשם active זה לא יפריע לגולש)
שמנה לב – ישנו דיב ובו שני הקישורים. הדיב ממוקם באופן יחסי לתמונת הפרח. כברירת מחדל (ב CSS) הוא מוסתר ורק בתגובה למעבר עכבר על הפרח הוא מוצג.
מבנה HTML ללא JQUERY
http://gamani.info/prog/JS/lesson8/lessIsMore/less_is_more.html
ולהורדה
http://gamani.info/prog/JS/lesson8/lessIsMore-htmlcss.zip
פתרון
