כיצד להתחיל בעבודה עם jQuery: הפוך את קל יותר לתכנות JavaScript

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


בספירה האחרונה יותר מ- 90% מכל אתרי האינטרנט הפעילו JavaScript. כספריית JavaScript הפופולרית ביותר, jQuery משמשת ברוב האתרים המודרניים, וכ -65% מעשרת מיליון האתרים הפופולריים ביותר באינטרנט..

משמעות הדבר היא שאם אתה רוצה להיות מפתח אתרים, מעצב אתרים או מנהל אתרים, אתה צריך לדעת לעבוד עם jQuery.

מבוא ל- jQuery

Contents

מהי jQuery?

JavaScript היא שפת התכנות המשמשת להוספת אינטראקטיביות לאתרים. jQuery היא ספרייה של פונקציות JavaScript מובנות מראש המטפלות במשימות הנפוצות באמצעות JavaScript. בעיקרו של דבר, jQuery מקל על השימוש ב- JavaScript קל ומהיר יותר.

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

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

כוחה של jQuery הוא ביכולתה לאתר ולבחור בקלות אלמנטים ב- HTML מבלי לדרוש כי כל תכונות נוספות יחולו על אלמנט ה- HTML.

jQuery מקל על דברים קשים

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

הסתר או הצגה של אלמנטים בעמוד עם התג

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

לא קשה להשתמש ב- JavaScript כדי להסתיר או להציג אלמנט HTML על ידי שליטה במאפיין התצוגה של CSS. עם זאת, שיטת jQuery toggle () כוללת אפשרויות מובנות רבות המאפשרות לייצר אפקטים של חיוג חזק שיהיה קשה מאוד לשכפל באמצעות JavaScript. אם אתה כולל את ממשק המשתמש של jQuery בנוסף ל- jQuery של לוח הדוד במסמך ה- HTML שלך, אתה יכול גם להשתמש במספר אפקטים של ממשק המשתמש של jQuery כדי לשלוט כיצד מוסתרים ומוצגים אלמנטים מחוברים..

אם אתה רוצה ללמוד להשתמש בשיטת jQuery toggle (), יש המון מקומות להתחיל בעבודה:

  • למדו את jQuery: משאב חינוכי בחינם של קרן jQuery. שווה להשלים את מערך ה- jQuery המלא ואנו מקשרים למשאבים בסוף מסמך זה. עם זאת, השתמש בקישור זה אם ברצונך לעבור ישירות לקטע שמסביר את שיטת המעבר.
  • תיעוד API של jQuery: סקירה כללית של שיטת ההחלפה וכל האפשרויות בהן ניתן להשתמש לצידה.
  • jQuery UI Effects and Toggle: jQuery UI מרחיב את שיטת ה- toggle עם מספר אפקטים. בנוסף, יש בה הדגמה חיה של האפקטים המשלימים את שיטת המיתוג.
  • jQuery toggle () שיטה ב- W3Schools: מבוא מהיר לשיטת ה- toggle וארגז חול של קוד בו תוכלו לנסות זאת.
  • jQuery Toggle Effect Tutorial מאת Akshay Jaiswal ו- jQuery Toggle effect מאת Harry Finn הם שני הדרכות וידיאו ביוטיוב המדגימות בקצרה כיצד לבנות מסמך HTML הכולל jQuery ומשתמש בשיטת המיתוג כדי להסתיר או להציג אלמנט HTML.

בצע סקריפט בעזרת מטפל אירועים

משימה נוספת ש- jQuery מקל מאוד היא להפעיל מטפל באירועים גם אם האירוע לא התרחש. לדוגמה, נניח שיש לך סקריפט שמבוצע בכל פעם שלחץ על כפתור מסוים משתמש באירוע onclick של JavaScript. עכשיו, מה אם אתה רוצה שגם אותו סקריפט יפעל בכל פעם שמתבצעת פעולה אחרת כאילו לחיצה על הכפתור עצמו? המטפל באירוע () הוא התשובה.

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

  • הפעלת מטפלים באירועים: השתמש בקישור זה כדי לעבור ישירות לפרק על הפעלת מטפלים באירועים במדריך למידע על jQuery.
  • תיעוד API של jQuery: סקירה כללית של שיטת ההדק וכל הפרמטרים והאפשרויות שניתן להשתמש איתו.
  • jQuery trigger () שיטה ב- W3Schools: מבוא לשיטת ההדק של jQuery וארגז חול לבדיקת קוד.
  • כיצד ליצור אירועים מותאמים אישית ב- jQuery: מדריך של Sitepoint המסביר כיצד ליצור אירועי jQuery מותאמים אישית, כך שתוכלו להשתמש בשיטת ההדק עם אירועים מותאמים אישית ולא אירועים מובנים של jQuery..
  • אל תפעיל שמות אירועים אמיתיים באמצעות jQuery! מפתחים רבים משתמשים באירועי jQuery סטנדרטיים כמו "לחץ" כסוג האירוע בו ניתן להפעיל אירוע. עם זאת, זה יכול ליצור בעיות ודויד וולש ממליץ להשתמש באירועים מותאמים אישית בשיטת ההדק.

יתרונות לשימוש ב- jQuery

אם jQuery רק מקל על השימוש ב- JavaScript, מדוע אנו משתמשים בכלל ב- jQuery? מדוע לא להישאר עם JavaScript ולהימנע מלהצטרך ללמוד מערך פקודות ויישומים חדש לגמרי?

על פי ויקיפדיה, ישנם לפחות ארבעה יתרונות שמציעה jQuery.

  1. jQuery מעודד הפרדת scripting ו- HTML. אמנם ניתן לכתוב סקריפטים ישירות למסמכי HTML, אולם החשיבה הנוכחית בקהילת עיצוב ופיתוח אתרים היא שיש לשמור על HTML, CSS ו- JavaScript בנפרד. זה מסובך מהעובדה שחייבת להיות דרך לקשר סקריפטים לאלמנטים ואירועים HTML ספציפיים. ללא jQuery, הדרך הקלה ביותר לעשות זאת היא להוסיף תכונות אירועים למסמך HTML המכנים פונקציות JavaScript. עם זאת, jQuery מתמודד עם הצורך לעשות זאת על ידי מתן תחביר פשוט להוספת מטפלים באירועים באופן דינמי באמצעות JavaScript. זה מאפשר הפרדה מוחלטת של ה- JavaScript ממסמך ה- HTML.
  2. jQuery מעודד קודאים לכתוב סקריפטים קצרים יותר ברורים. jQuery מיועד לקיצור. כל מה שתוכלו לעשות עם jQuery תוכלו לעשות גם עם JavaScript רגיל. עם זאת, קוד jQuery בדרך כלל יהיה קצר הרבה יותר וברור מקוד JavaScript כדי לבצע את אותה משימה.
  3. השימוש ב- jQuery מבטל חוסר עקביות בין דפדפנים. בעוד JavaScript מוצג בצורה שונה במקצת על ידי מנועי דפדפן שונים, jQuery פותח כדי להתמודד עם הבדלים בין דפדפנים ולהעניק חוויה עקבית בכל הדפדפנים..
  4. jQuery ניתן להרחבה. ספריית jQuery תוכננה כך שתוכל להשלים אותה בקלות עם אלמנטים, אירועים ושיטות חדשים. לאחר שהפריטים החדשים הללו יתווספו לספריית jQuery המקומית, ניתן להשתמש בהם בקלות מחדש ברחבי אתר אינטרנט כתוסף.

תחילת העבודה עם jQuery

אם אתה מוכן להתחיל ללמוד כיצד להשתמש ב- jQuery ואינך מכיר עדיין JavaScript, הצעד הראשון ללמוד jQuery הוא ללמוד JavaScript..

כאמור, jQuery היא ספרייה של פקודות JavaScript. כתוצאה מכך, jQuery עוקב אחר אותם תחביר ומבנים בסיסיים כמו JavaScript. הכרת התפקוד, המבנה והפונקציות הבסיסיות של JavaScript חיונית מאוד לשליטה ב- jQuery. על פי קרן jQuery:

ניתן לגשת לכל הכוח של jQuery באמצעות JavaScript, לכן אחיזה חזקה ב- JavaScript היא חיונית להבנה, מבנה וניפוי שגיאות של הקוד שלך. בזמן שעבודה עם jQuery באופן קבוע יכולה לשפר, לאורך זמן, את מיומנותך ב- JavaScript, זה יכול להיות קשה להתחיל לכתוב jQuery ללא ידיעה עובדתית על מבנים ותחביר מובנים של JavaScript..

סביבת הפיתוח שלך

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

בעוד שכל דפדפן אינטרנט יעשה זאת, מפתחים משתמשים במוזילה פיירפוקס או בגוגל כרום. אמנם יש לרשותך גם Internet Explorer או Edge, Opera, ו- Safari לבחון את הקוד שלך בדפדפנים מרובים, אם אינך כבר משתמש ב- Firefox או Chrome, עבור להורדה והתקין את הגירסה האחרונה של אחד או שניהם מהיישומים החינמיים האלה השתמש בו למטרות פיתוח.

בטח, אתה יכול להשתמש בפנקס הרשימות לכתיבת קוד, אבל מדוע? ישנם עורכי טקסט נהדרים רבים הזמינים בחינם או בעלות סבירה מאוד המספקים תכונות רבות המיועדות להקל על קידוד ופחות מועדים לטעויות. כמה מהמועדפים שלנו הם Atom, TextMate למחשבי אפל, פנקס רשימות ++ למחשבי Windows וסוגריים.

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

משאבים

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

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

קורסים אינטראקטיביים בחינם

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

מכיוון ש- jQuery Foundation ממליץ ללמוד JavaScript לפני שאתה צולל ב- jQuery, אנו ממליצים שתעשה זאת. קורסים חינמיים אלה ידרשו ממך לכתוב JavaScipt בסיסי תוך זמן קצר:

  • טיול כביש JavaScript חלק 1 מ- CodeSchool: רק חלק 1 מטיול הכביש הזה הוא בחינם. שאר הטיול מוסתר מאחורי חומת שכר. רץ דרך התוכן החינמי ואז פנה אל Codecademy כדי להמשיך ללמוד.
  • JavaScript מאת Codecademy: תוכן זה בקורס מקוון זה באורך מלא הוא בחינם. הגישה לחידונים הינה לא חובה והיא כוללת תג מחיר. הקורס צריך להימשך כעשר שעות ולהשאר אותך מסוגל לכתוב קוד JavaScript בסיסי. עם קורס זה מתחת לחגורה שלך תהיה מוכן להתמודד עם כמה jQuery.

ישנם שני קורסי jQuery אינטראקטיביים שכדאי לקחת כדי לקבל הבנה בסיסית טובה של מה אפשרי עם jQuery. קורסים אלה כוללים:

  • נסה את jQuery: מבוא חינם ל- jQuery שהוקמה על ידי קרן jQuery בשיתוף עם CodeSchool.
  • jQuery מאת Codecademy: קורס זה ייקח כשלוש שעות. בדיוק כמו שקרה בקורס JavaScript, תוכן הקורס הוא בחינם, אך אם ברצונך לבצע את החידונים תצטרך לשלם עבור אלה. ההמלצה שלנו היא לעבוד דרך התוכן החינמי ואז לעבור למשאבים נוספים. לאחר שתסיים, תדע כיצד להשתמש ב- jQuery לבחירת אלמנטים ב- HTML, כיצד לעצב אלמנטים אלה וכיצד לקשור פעולות של מבקרים באתר לקוד jQuery כך שהאתר יגיב באופן אינטראקטיבי..

הדרכות עומק ומדריכי למידה ממובילי התעשייה

לימוד JavaScript ו- jQuery צריכים ללכת יד ביד. אם אתה מוכן להעמיק עם jQuery, יהיה עליך גם להרחיב את הידע שלך ב- JavaScript. אחד המקומות הטובים ביותר ללמוד על JavaScript הוא רשת המפתחים של מוזילה (MDN). בדוק את המשאבים הנהדרים האלה:

  • יסודות JavaScript: למרות שלמדת את היסודות כיצד להשתמש בפועל ב- JavaScript באמצעות הקורסים האינטראקטיביים שהמלצנו, ב- MDN תוכלו ללמוד כיצד מפתחים מקצועיים חושבים על JavaScript ומשתמשים בהם. אם תקרא בעיון בזה, ייקח מספר שעות לעיכול מלא של מסמך זה.
  • מדריך JavaScript: מדריך והדרכה נרחבים זה יעביר אותך בכל הנושאים היסודיים בשפת JavaScript, כולל פונקציות, טיפול בשגיאות, לולאות, דקדוק, ביטויים, ועוד ועוד. עשו זאת באמצעות מדריך זה ותדעו יותר JavaScript כי מעצבי האתרים הממוצע.

אם עשית את זה באמצעות משאבי JavaScript ב- MDN, תהיה מוכן לחלוטין להתמודד עם ההדרכה שמציעה קרן jQuery. באתר jQuery Foundation תוכלו למצוא מרכז למידה נרחב המאורגן בפרקים. כל פרק מוקדש לנושא ספציפי כגון About jQuery, Effects, Ajax, Plugins ועוד. משאב הרשאה זה הוא מפורט וטכני – בדיוק הדבר הדרוש לך אם אתה מתכוון לשלוט ב- jQuery.

ספרים אלקטרוניים וכריכה רכה

לאחר שתעבור בדרך שלך באמצעות המשאבים שכבר כיסינו, תהיה מוכן להשתמש ב- jQuery כדי להתמודד עם כל תרחיש עיצוב נפוץ. בנוסף, תוכלו להיות בקיאים מספיק בכדי למצוא את העזרה הדרושה לכם בכדי להתמודד עם בעיות מורכבות יותר באמצעות ה- jQuery API.

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

ספרים אלקטרוניים בחינם

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

  • יסודות jQuery מאת BoCoup, LLC: ספר אלקטרוני חלקי ושיעורים אינטראקטיביים, טקסט זה מכסה את jQuery הן בפורמט כתוב והן בדוגמאות מעשיות..
  • jQuery Succinctly, נכתב על ידי קודי לינדלי ומתארח על ידי Syncfusion: טקסט של מאה עמודים המכסה את המושגים החיוניים לפיתוח jQuery מתקדם. אם אתה רק מתחיל, זה לא הטקסט בשבילך, אבל אם אתה מפתח JavaScript או jQuery מוכשר למדי, שמוכן לעשות את הצעד הבא, טקסט זה הוא בחירה מצוינת.

טקסטים בכריכה רכה

אם אתה מעדיף טקסט פיזי, הנה כמה מהטקסטים הטובים ביותר של jQuery הקיימים כיום:

  • לימוד jQuery: קארל סברדברג, חבר הנוכחי במועצת היועצים של קרן jQuery, יחד עם ג’ונתן צ’אפר, מפתח אינטרנט ומתכנת דרופל המשפיע, עיצבו טקסט זה כך שיתאים לחידושי JavaScript או למפתחים מנוסים כאחד. טקסט זה זמין גם עבור Kindle.
  • JavaScript ו- JQuery, פיתוח אינטרנט אינטראקטיבי מקדימה: טקסט זה של ג’ון דוקט משלים את הטקסט המוביל שלו ב- HTML ו- CSS, והוא עשוי להיות הטקסט JavaScript ו- jQuery הפופולריים ביותר שניתן להשיג כיום..
  • jQuery בפעולה מאת Bear Bibeault, יהודה כץ, ואורליו דה רוזה: כץ ודה רוזה הם שניהם פעילים בקרן jQuery – כץ לזכר מועצת היועצים ודה רוזה כחבר בצוות התוכן. טקסט סמכותי זה הוא מבט מהיר ב- jQuery המתאים באופן אידיאלי למפתחי JavaScript.

עיצוב עם jQuery

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

JavaScript

JavaScript היא שפת תכנות המובנית בכל דפדפני אינטרנט מודרניים. יחד עם HTML ו- CSS, זהו הרגל השלישית בשלישיה בטכנולוגיית האינטרנט המודרנית.

JavaScript היא שפת תכנות כללית ברמה גבוהה שניתן להשתמש בה למגוון רחב של משימות סקריפט ברשת וגם מחוצה לה. הדרך העיקרית שבה מעצבים משתמשים ב- JavaScript היא להניע אינטראקציות משתמשים. שינויי סטיילינג ושיחות AJAX הן שתי דוגמאות לאינטראקציות משתמשים הניתנות להפעלה באמצעות JavaScript. בואו נסתכל על כל בקצרה.

אך ראשית, נקח צעד אחורה ונדון בכמה היבטים של JavaScript.

שינוי סגנון עם JavaScript

בעוד שעיצוב דף אינטרנט הוא בדרך כלל תחום של גיליונות סגנון מדורגים (CSS), ניתן להשתמש ב- JavaScript כדי לתפעל את CSS. סגנונות ניתנים לתמרון ישירות על ידי בחירת אלמנט ומשתמשים במאפיין הסגנון, כך:

תוכן הדיביד שלי

document.getElementById ("my-div") .style.backgroundColor = "כחול";

הקטע הזה של JavaScript תופס את האלמנט עם מזהה של ה- div שלי ומחיל צבע רקע של כחול. אמנם שימוש ישיר בניהול CSS באמצעות JavaScript הוא שימושי, אם ברצונך לשנות חבורה של סגנונות בבת אחת, הרבה יותר קל לכלול את הסגנונות באתר CSS שלך, ואז להחיל את הסגנונות באמצעות JavaScript. הנה דרך אחת שניתן לעשות זאת:

.מדינה ראשונה {
צבע רקע: # 303030;
צבע: #fff;
גבול: 3px מוצק #ddd;
רוחב: 200 פיקסלים;
גובה: 200 פיקסלים;
}
.מדינה שנייה {
צבע רקע: #ddd;
צבע: # 333;
גבול: 3px מוצק # 333;
רוחב: 300 פיקסלים;
גובה: 300 פיקסלים;
}

תוכן הדיביד שלי

document.getElementById ("my-div") .onclick = פונקציה () {
this.className = "מדינה שנייה";
}

כעת, כאשר לוחצים על רכיב ה- div עם התכונה id של my-div, מחלקת המצב הראשון תוסר ויוחלף במחלקה של המצב השני, ו- CSS של המדינה השנייה ייושם..

הוסף אנימציה בכיתה

עדכון תוכן בטיסה עם AJAX

AJAX, העומדת ב- JavaScript ו- XML ​​אסינכרוני, היא טכניקה המשמשת להוסיף תוכן לדף אינטרנט מבלי לרענן את הדף. הרעיון הבסיסי הוא ש- JavaScript שולח נתונים לשרת אינטרנט שמאחורי הקלעים, מקבל תגובה מהשרת ומתאים את תוכן דף האינטרנט על סמך תגובה זו..

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

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

משאבי JavaScript

אם כישורי JavaScript שלך מעט חלודים, הנה שלושה משאבים מצוינים שיחזירו אותך למהירות:

  • קורס JavaScript של CodeCademy מציג תחביר, לולאות, זרימת בקרה, מבני נתונים ואובייקטים בקורס אינטראקטיבי מבוסס דפדפן..
  • ערכת היסודות הבסיסית של JavaScript של Mozilla Network (MDN) היא הקדמה לתחביר JavaScript, משתנים, מפעילים, תנאים, פונקציות ואירועים..
  • MDN AJAX תחילת העבודה הוא מדריך קצר המכסה שיחות AJAX בסיסיות. מאמרים נוספים זמינים גם ב- MDN המכסה טכניקות מתקדמות של AJAX.

בעוד JavaScript הוא חזק, jQuery מאפשר לך לעשות הרבה יותר בפחות מאמץ.

jQuery: מתכונן לרוק את העולם

חשוב על jQuery כחבורה של אבני בניין JavaScript שנבנו מראש. בואו נראה דוגמא בסיסית. כך תבחר רכיב עם המזהה של ה- div שלי הראשון ב- JavaScript ואחריו ב- jQuery.

// JavaScript
document.getElementById (‘my-div’);

// jQuery
$ (‘# my-div’);

בחירת אלמנט לפי מזהה די קלה לביצוע בשתי השפות. עם זאת, כפי שאתה יכול לראות, דרוש בערך 25 פחות הקשות על מנת לבצע זאת ב- jQuery מאשר ב- JavaScript.

הוספת jQuery למסמך ה- HTML שלך

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

הנה הקוד שתכלול במסמך ה- HTML שלך לטעינת jQuery:

שים לב שכשאתה כותב jQuery, עליך לטעון את הקוד שלך לאחר שטען ליבת jQuery.

שימוש ב- jQuery עם WordPress

שיקול מיוחד שיש לשים לב אליו הוא שכאשר אתה משתמש ב- jQuery באתר וורדפרס עליך להשתמש ב- jQuery לקידומת הקוד שלך ולא ל- $. ישנן דרכים לעקיפת הדרך שבהן אתה יכול להשתמש כדי לגרום לקידומת $ לעבוד, אך אם לא, פשוט קידף את הקוד שלך ב- jQuery, כך:

// jQuery רגיל
$ (‘# my-div’);

// jQuery ל- WordPress
jQuery (‘# my-div’);

jQuery CSS

בדיוק כמו שאתה יכול להשתמש ב- JavaScript כדי לתפעל CSS, אתה יכול לעשות את אותו הדבר עם jQuery.

אנחנו יכולים לתפעל שיעורים בצורה יעילה למדי עם jQuery. התסריט למטה צופה בלחיצת עכבר על האלמנט עם מזהה של my-div ואז מסיר כיתה אחת ומוסיף מחלקה אחרת. אתה יכול להשתמש בקוד זה כדי להחליף בין שתי שיעורי CSS.

var myDiv = $ (‘# my-div’);
$ (myDiv). לחץ (פונקציה () {
if ($ (‘# my-div’). Class (‘מצב ראשון’)) {
$ (‘# my-div’). remove Class (‘מצב ראשון’);
$ (‘# my-div’) .add Class (‘מדינה שנייה’);
}
אחרת אם ($ (‘# my-div’) .hasClass (‘מדינה שנייה’)) {
$ (‘# my-div’) .removeClass (‘מדינה שנייה’);
$ (‘# my-div’) .add Class (‘מצב ראשון’);
}
})

זה מועיל אם כי היינו יכולים לעשות זאת הרבה יותר בקלות על ידי שימוש ב- .toggleClass () במקום.

var myDiv = $ (‘# my-div’);
$ (myDiv). לחץ (פונקציה () {
$ (myDiv) .toggleClass (‘מצב ראשון’);
$ (myDiv) .toggleClass (‘מדינה שנייה’);
})

בואו נראה את המעבר הזה בפעולה.

החלף הנפשה בכיתה

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

אפקטים של jQuery

מגוון רחב של אפקטים מובנים ב- jQuery. אפקטים אלה נמתחים יחד עם שיטות ופונקציות אחרות של jQuery כדי לשלוט על ביצוע שינויים באלמנטים בעמוד.

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

var myDiv = $ (‘# my-div’);
$ (myDiv). לחץ (פונקציה () {
$ (זה) .fadeOut (‘איטי’, פונקציה () {
$ (זה) .toggleClass (‘מצב ראשון’);
$ (זה) .toggleClass (‘מדינה שנייה’);
})
$ (זה) .fadeIn (‘איטי’);
})

מה שקוד זה עושה הוא לדעוך את האלמנט, להחליף את המחלקות ולדהות את האלמנט שהשתנה פנימה.

סמן את האנימציה של אפקט

אפקטים של fadeOut () ו- fadeIn () הם רק שניים מכמה אפקטים של jQuery. בנוסף, כל האפקטים יכולים להשתמש במספר אפשרויות שונות בכדי לכוונן את התנהגותם.

אירועי jQuery

ראינו כבר אירוע jQuery אחד מספר פעמים במדריך זה: .click (), המופסק כאשר משתמש לוחץ על האלמנט הממוקד. עם זאת, ישנם אירועים רבים נוספים זמינים.

אירועים המשמשים למיקוד על פעולות משתמשים כוללים .קליק (), .dblclick (), .hover (), .mouseenter (), .mouseleave () ו- .mousemove (), שכולם די מסבירים את עצמם. ישנם גם מספר מטפלים באירועים אשר צופים בשינויים באלמנטים בעמוד:

  • .שינוי () מגלה מתי משתנים רכיבי הטופס. באופן דומה, .smit () מגלה מתי מוגש טופס.
  • .מיקוד () מופעל כאשר אלמנט ממוקד משיג מיקוד.
  • .מוכן () יורה ברגע שהדפדפן בנה את דף האינטרנט.
  • .שינוי גודל () מפעיל קוד להפעלה כאשר גודל התצוגה של גודל התצוגה.
  • .trigger () קושר אירוע אחד לאירוע קשור אחר.

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

ממשק המשתמש של jQuery

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

ניתן לחלק את תכונות ממשק המשתמש של jQuery לארבע קטגוריות: ווידג’טים, אפקטים, אינטראקציות וכלי עזר. בואו נסתכל על כל אחת מהן. אך ראשית, עלינו לדעת להוסיף את ממשק המשתמש של jQuery למסמך HTML.

הוספת ממשק המשתמש של jQuery למסמך HTML

יש לך שתי אפשרויות בכל הקשור לטעינת ממשק המשתמש של jQuery: הורד אותו וכולל עותק מקומי או כלול עותק שמארח CDN..

בנוסף, זכור נקודות אלה:

  • קישור הגליון הסגנונות של CSS אמור לעבור לראש המסמך.
  • סקריפט ממשק המשתמש של jQuery צריך לעבור ממש מעל לתג הגוף הסגור.
  • יש לטעון את גרעין ה- jQuery (jquery.js או jquery.min.js) לפני שמשתמשים ב- jQuery UI (jquery-ui.js או jquery-ui.min.js).

ערכות נושא של ממשק המשתמש של jQuery

כשאתה מוריד עותק של ממשק המשתמש של jQuery, בונה ההורדות מאפשר לך לכלול נושא. הסיבה לכך היא ש- widgets של ממשק המשתמש של jQuery דורשים עיצוב ברירת מחדל. ערכת הנושא של ממשק המשתמש jQuery שתבחר מגדירה את סגנונות הווידג’ט המוגדרים כברירת מחדל, והקוד הרלוונטי כלול ב- jquery-ui.css.

אם תבחר באפשרות שמתארחת ב- Google, שים לב ששם הנושא מוזנח ממש לפני שם הקובץ: … / smoothness / jquery-ui.css. החלקות היא נושא ברירת המחדל של ממשק המשתמש של jQuery. אתה יכול להשתמש בכל נושא על ידי החלפת שם הנושא בעת בניית ה- URL.

בנוסף, אתר ממשק המשתמש של jQuery מציע Theme Roller בו תוכלו להשתמש כדי לבנות נושא משלכם ולכלול אותו בעת הורדת ממשק המשתמש של jQuery.

יישומונים של ממשק המשתמש של jQuery

ווידג’טים מקלים יחסית על יצירת אלמנטים ממשקים של ממשק המשתמש שייקח הר של קוד ליצור בעזרת JavaScript ו- CSS טהורים. בואו נסתכל על כמה מהגדג’טים המועילים ביותר של jQuery (לחץ על כל אחד כדי לקחת הדגמה):

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

כדי לתת לך תחושה עד כמה קל לבצע יישומונים, הנה כל הקוד שאתה צריך להשתמש בו כדי ליצור קבוצה של אקורדיונים:

אקורדיון סעיף 1

תוכן אקורדיון. אתה יכול להשתמש בפסקאות, רשימות, קישורים, מה שלא יהיה.

אקורדיון סעיף 2

כמו שאמרתי.

  • אתה
  • פחית
  • להשתמש
  • רשימות

אקורדיון סעיף 3

זהו זה. זה סופר קל.

$ (פונקציה () {
$ ( "# אקורדיון" ). אקורדיון ();
});

כפי שאתה יכול לראות, ה- HTML ארוך בהרבה משורות ה- jQuery הבודדות הנדרשות כדי להפוך את ה- HTML לאקורדיונים.

jQuery UI אקורדיונים אנימציה

אפקטים של ממשק jQuery

מרבית השיטות בקטגוריה זו הן הרחבות של שיטות הליבה של jQuery. לדוגמה, אם ברצונך לתפעל כיתות, השיטות .addClass (), .removeClass () ו- .toggleClass () זמינות כולם בממשק המשתמש של jQuery, יחד עם שיטה נוספת, .switchClass (). ההבדל הוא שבממשק המשתמש של jQuery שיטות אלה כוללות אפשרויות נוספות, כמו היכולת להוסיף אפקטים של מעבר ישירות לשיטה עצמה.

בואו נראה דוגמא. זוכר כאשר השתמשנו ב- fadeIn () ו- .fadeOut () כדי לשנות את המראה של div? ובכן, אנו יכולים ליצור אפקט הרבה יותר נחמד עם הרבה פחות קוד על ידי שימוש בממשק המשתמש של jQuery.

var myDiv = $ (‘# my-div’);
$ (myDiv). לחץ (פונקציה () {
$ (זה) .toggleClass (‘מדינה שנייה’, 1000);
})

הנה המעבר הזה בפעולה.

jQuery ממשק משתמש - החלף אנימציה בכיתה

כמה שיטות השפעה נוספות שתרצו לדעת כוללות:

  • שיטת ה- show () מסירה את התצוגה: none; מהיסוד הממוקד.
  • שיטת ההסתרה () מוסיפה תצוגה: none; לאלמנט הממוקד.
  • שיטת .toggle () תעביר את האלמנט הממוקד בין מצב גלוי ונסתר.
jQuery UI אנימציות אפקט

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

var myDiv = $ (‘# my-div’);
var myButton = $ (‘# הכפתור שלי’);
$ (myButton). לחץ (פונקציה () {
$ (myDiv) .toggle ( "שקופית" );
})

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

ממשק jQuery הסתר אנימציה

ניתן להחיל את אפקטים של מעבר jQuery בשיטות .show (), .hide () ו- .toggle (). אתר ה- UQ של jQuery כולל כלי תצוגה מקדימה של אפקט בו תוכלו להשתמש בכדי להחליט איזו השפעה מתאימה ביותר ליישום שלכם.

הקלת מעברי ממשק המשתמש של jQuery

ליבת jQuery כוללת רק שתי הקלות: סווינג וליניארי. עם זאת, ממשק המשתמש של jQuery מוסיף יותר מ 20 הקלות. בואו נסתכל אחורה על היישום שלנו של שיטת .toggle () והוסיף הפעם שתי הקלות שונות.

var myButton = $ (‘# הכפתור שלי’);
$ (myButton). לחץ (פונקציה () {
$ (‘# div-first’) .toggleClass (‘מדינה שנייה’, 2000, ‘easInOutQuad’);
$ (‘# div-second’) .toggleClass (‘מדינה שנייה’, 2000, ‘easInOutExpo’);
})

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

jQuery ממשק משתמש הקלה של אנימציה

אינטראקציות ממשק המשתמש של jQuery

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

  • האינטראקציה Draggable מאפשרת למשתמשים למקם מחדש אלמנט של דף אינטרנט על ידי גרירה ושחרורו בעזרת העכבר שלהם.
  • האינטראקציה הנשלפת עובדת יד ביד עם האינטראקציה הניתנת להחלפה. כדי להשתמש בו, על פריט הניתן לדחיפה וגם לפריט הניתן להחלפה להיות זמינים בדף האינטרנט. כאשר הפריט הניתן להחלפה נשמט על הפריט הניתן להחלפה, פעולה מופעלת.
  • Resizable עושה בדיוק מה שאתה חושב שהוא צריך: זה הופך את שינוי גודל אלמנט העמוד.
  • ניתן לבחירה באפשרותך לבחור את הפריטים ברשימה על ידי לחיצה עליהם אחד אחד, או על ידי לחיצה על Ctrl או לחיצה וגרירה על פני פריטים מרובים לבחירת מספר פריטים בבת אחת.
  • ניתן למיין את האפשרות לארגן מחדש פריטי רשימה בכל סדר.

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

שירות UI של jQuery

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

אם אתה מכיר תכנות מונחה עצמים, ייתכן שיעזור לך לחשוב על יישומונים של ממשק המשתמש של jQuery כאובייקטים. אז, אקורדיון ממשק המשתמש של jQuery הוא למעשה מושא לשיעור האקורדיון. מה שמפעל הווידג’ט מאפשר לך לעשות הוא להגדיר מחלקות ווידג’טים חדשות ואז להשתמש בכיתה זו ליצירת אובייקטים מרובים, באותה צורה שבה אתה יוצר מחלקה ומשתמש בה שוב ושוב ב- OOP.

כלי שימושי נוסף של ממשק המשתמש של jQuery הוא שיטת .position (). שיטה זו מאפשרת לך להגדיר את המיקום של כל אלמנט ביחס לאלמנט אחר או לפעולת משתמש אחרת. השיטה היא די פשוטה ברגע שאתה מקבל אותה. בואו נראה דוגמא.

$ (‘# div-second’). מיקום ({
שלי: ‘שמאל למעלה’,
ב: ‘התחתון הימני’,
של: ‘# div-first’
});

פיסת קוד זו אומרת שצריך למקם את הפינה השמאלית העליונה של האלמנט עם המזהה של ה- div השני בפינה התחתונה הימנית של האלמנט עם המזהה של div-first, כך:

jQuery UI הנפשת מיקום

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

$ (מסמך) .mememove (פונקציה (אירוע) {
$ (‘# div-second’). מיקום ({
שלי: ‘מרכז’,
של: אירוע,
התנגשות: ‘בכושר’
})
})

קוד זה מוסיף מאזין לאירוע .mousemove () שיופעל בכל עת שהעכבר נכנס למסמך. כאשר זה יקרה, המיקום () של ה- div הממוקד ייקבע על סמך מיקום העכבר.

בואו נראה את זה בפעולה.

jQuery UI מיקום עכבר אנימציה

jQuery נייד

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

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

הספרייה כוללת מערך גדול של כפתורים מגיבים, המותאמים למגע, קוטפי תאריכים, אלמנטים בטופס, אירועי החלקה, אלמנטים ניווט, טבלאות, כרטיסיות, סליידרים ועוד. בנוסף, jQuery Mobile כולל ThemeRoller.

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

משאבי תכנון

כבר צייננו על כמה מקומות בהם תוכלו ללמוד JavaScript. אם אינך מכיר עדיין JavaScript כלשהו, ​​פיתוח מיומנויות אלה לפני שאתה צולל אל jQuery. ברגע שיש לכם קצת JavaScript בחגורה, המשאבים הבאים יעלו אתכם במהירות עם jQuery, jQuery UI ו- jQuery Mobile.

  • מרכז הלמידה של jQuery Foundation הוא המקומות הרשמיים (ואחד הטובים ביותר) ללמוד jQuery. כאן תמצא קורס מבוסס פרק שכולל את היסודות, האירועים והאפקטים, AJAX, תוספים ועוד. כשתהיה מוכן, תוכל גם ללמוד כיצד להשתמש בממשק המשתמש של jQuery ו- jQuery Mobile.
  • למד jQuery מ- Scratch הוא מדריך מבוסס פרויקטים שיעזור לך להשיג ביטחון כמתכנת jQuery.
  • CodeCademy jQuery Course מלמד אותך תחביר jQuery, כמו גם כיצד לכתוב פונקציות בסיסיות, לשנות אלמנטים של DOM, להשתמש באירועים וליישם אפקטים..
  • jQuery Fundamentals מאת Bocoup הוא ספר אלקטרוני עם קונסולת JavaScript מובנית, כך שתוכלו לנסות את הקוד ישירות בדפדפן. זה מכסה את יסודות jQuery, חוצה ומניפולציה של אלמנטים, אירועים, אפקטים ו- DOM של DOM.

מעצבים זקוקים ל- jQuery

תוספים ל- jQuery, jQuery UI ו- jQuery Mobile מוסיפים שפע של יישומונים, אינטראקציות, שיטות, אפקטים וכלים המותאמים למגע. שליטה באלה תהפוך אותך למעצב ומפתח טוב יותר מכיוון שתוכל לבנות אפליקציות אינטרנט אינטראקטיביות עוצמתיות מבלי לבזבז הקשות..

דברים מעניינים אחרים

יש לנו מדריכים נוספים, הדרכות ואינפוגרפיות הקשורים לקידוד ופיתוח אתרים:

  • CSS3 – מבוא, מדריכים & מקורות: זהו מקום נהדר להתחיל ללמוד פריסת דפי אינטרנט.
  • משאבי ASP.NET: מדריך זה יביא אותך למסגרת .NET של מיקרוסופט ליצירת דפי אינטרנט.

איזה קוד אתה צריך ללמוד?

מבולבל באיזו שפת תכנות כדאי ללמוד לקוד? עיין באינפוגרפיה שלנו, איזה קוד עליכם ללמוד? זה לא רק דן בהיבטים שונים של השפות, הוא עונה על שאלות חשובות כמו, “כמה כסף אפיק לתכנת ג’אווה למחיי?”

איזה קוד אתה צריך ללמוד?
איזה קוד אתה צריך ללמוד?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map