פרסומת
JQuery היא אחת מספריות ה- JavaScript הפופולריות ביותר בעולם.מה זה JavaScript מה זה JavaScript והאם האינטרנט יכול להתקיים בלעדיו?JavaScript הוא אחד הדברים שרבים לוקחים כמובן מאליו. כולם משתמשים בזה. קרא עוד ). בזמן הקמתו, JavaScript (יכונה JS מכאן והלאה) היה במקום אחר לגמרי. 14 בינואר 2006 היה היום בו הוכרז jQuery בשעה BarCampNYC. JS עדיין היה חסר במקצת - הדפדפנים תומכים בחלקים ממנו, אך היה צורך ליישם המון פריצות ועקיפות לצורך התאמה.
JQuery הגיעה לשינוי הכל. JQuery הקל מאוד לכתוב קוד תואם לדפדפנים. אתה יכול לדפי אינטרנט מונפשים בלי להיות בעל תואר במדעי המחשב - נעימה! עשר שנים אחר כך, jQuery הוא עדיין מלך, ואם מעולם לא השתמשת בו בעבר, מה אתה יכול לעשות איתו?
בנוסף לצמצום כישורי JavaScript שלך, אולי תרצה לקרוא כמה הדרכות HTML ו- CSS למד HTML ו- CSS בעזרת הדרכות שלב אחר שלבהאם אתה סקרן HTML, CSS ו- JavaScript? אם אתה חושב שיש לך כשרון ללמוד כיצד ליצור אתרים מאפס - הנה כמה הדרכות שלב אחר שלב שכדאי לנסות. קרא עוד ראשית אם גם אתם לא מכירים אותם.
יש לנו הציג jQuery הפיכת האינטרנט לאינטראקטיבי: מבוא ל- jQuery jQuery היא ספריית סקריפטים בצד הלקוח שכמעט כל אתר מודרני משתמש בה - היא הופכת אתרים לאינטראקטיביים. זו לא ספריית Javascript היחידה, אבל היא הספרייה המפותחת ביותר, הנתמכת ביותר והנפוצה ביותר ... קרא עוד לפני כן, מדריך זה ל- JQuery יתמקד בקידוד בפועל.
מתחילים
יתכן שאתה מכיר את הדרך JS לבחירת מזהים ממודל אובייקט המסמך (דום):
document.getElementById ('foo');ובכן JQuery לוקח צעד זה קדימה. אינך צריך להתקשר לשיטות שונות לבחירת שיעורים, תעודות זהות או רכיבים מרובים. כך תבחר מזהה:
$ ('סרגל #');קל נכון? זה בדיוק אותו תחביר לבחור כמעט כל רכיב DOM. כך תבחר שיעורים:
$ ('. baz');אתה יכול גם להיות יצירתי למען כוח אמיתי. זה בוחר את כולם td אלמנטים בתוך א שולחן למעט הראשון.
$ ('טבלה td'). לא (': ראשון');שימו לב כיצד שמות הבורר מתאימים כמעט בדיוק לעמיתיהם של CSS. אתה יכול להקצות אובייקטים רגיל משתני JS:
var xyzzy = $ ('הורה # ילד');או שאתה יכול להשתמש במשתני jQuery:
var $ xyzzy = $ ('הורה. ילד');סימן הדולר משמש אך ורק כדי לסמן שמשתנה זה הוא אובייקט jQuery, דבר שמועיל מאוד בפרויקטים מורכבים.
אתה יכול לבחור את האב של אלמנט:
$ ('ילד'). הורה ();או האחים:
$ ('ילד'). אחים ();עליך לבצע את הקוד שלך ברגע שהדפדפן יהיה מוכן. כך תעשה זאת:
$ (מסמך) .ready (פונקציה () {console.log ('מוכן!'); });עוד כוח
עכשיו כשאתה יודע את היסודות, נעבור לכמה דברים מורכבים יותר. ניתן טבלת HTML:
עשה
דוגמנית
צבע
פורד
ליווי
שחור
מיני
קופר
אדום
פורד
קורטינה
לבן
נניח שאתה רוצה להפוך כל שורה אחרת לצבע אחר (המכונה פסי זברה). כעת תוכל להשתמש ב- CSS לשם כך:
#cars tr: nth-ילד (אפילו) {צבע רקע: אדום; }
כך ניתן להשיג באמצעות jQuery:
$ ('tr: even'). addClass ('even');זה ישיג את אותו הדבר, בתנאי שכך אפילו הוא כיתה המוגדרת ב- CSS. שימו לב כיצד אין צורך במתח המלא לפני שם הכיתה. אלו הם בדרך כלל נדרש רק לבורר הראשי. באופן אידיאלי, היית משתמש ב- CSS מלכתחילה, למרות שזה לא עניין גדול.
JQuery יכול גם להסתיר או להסיר שורות:
$ ('# fordCortina'). להסתיר (); $ ('# fordCortina'). הסר ();אתה לא צריך להסתיר אלמנט לפני הסרתו.
פונקציות
פונקציות JQuery הן בדיוק כמו JS. הם משתמשים בסד מתולתל ויכולים לקבל ויכוחים. היכן שזה ממש מעניין זה דרך התקשרות חוזרת. ניתן להחיל התקשרות חזרה על כמעט כל פונקציות jQuery. הם מציינים פיסת קוד להפעלה לאחר השלמת פעולת הליבה. זה מספק פונקציונליות אדירה. אם הם לא היו קיימים, וכתבת את הקוד שלך בציפייה שהוא יפעל בצורה ליניארית, JS תמשיך לבצע את שורת הקוד הבאה בזמן שתמתין לקודמתה. התקשרות חוזרת מבטיחה שהקוד יפעל רק לאחר סיום המשימה המקורית. הנה דוגמה:
$ ('טבלה'). להסתיר (פונקציה () {התראה ('כללי MUO!'); });ראו הוזהרת - קוד זה מבצע התראה עבור כל רכיב. אם הבורר שלך הוא משהו בדף לא פעם, תקבל התראות מרובות.
אתה יכול להשתמש בהתקשרות חוזרת עם ארגומנטים אחרים:
$ ('tr: even'). addClass ('even', פונקציה () {console.log ('Hello'); });שימו לב כיצד ישנו מעי גס למחצה לאחר הפלטה הסגורה. בדרך כלל זה לא יהיה נחוץ לפונקציית JS, אולם קוד זה עדיין נחשב לקו אחד (מכיוון שה- callback נמצא בתוך סוגריים).
אנימציה
JQuery מקל מאוד על הנפשת דפי אינטרנט. אתה יכול לדעוך אלמנטים פנימה או החוצה:
$ ('. fade1'). fadeIn ('איטי'); $ ('# fade2'). fadeOut (500);ניתן לציין שלוש מהירויות (איטיות, בינוניות, מהירות) או מספר המייצג את המהירות באלפיות השנייה (1000ms = 1 שנייה). אתה יכול להנפיש כמעט כל אלמנט CSS. זה מונע את רוחב הבורר מהרוחב הנוכחי שלו ל -250 פיקסלים.
$ ('foo'). הנפשה ({רוחב: '250 פיקסלים'});לא ניתן להנפיש צבעים. אתה יכול להשתמש בקריאות שחזור גם עם הנפשה:
$ ('bar'). אנימציה ({גובה: '250 פיקסלים'}, פונקציה () {$ ('בר'). אנימציה ({רוחב: '50 פיקסלים'} });לולאות
לולאות ממש מאירות ב- jQuery. כל אחד() משמש לאיטציה על כל אלמנט מסוג מסוים:
$ ('li'). each (פונקציה () {console.log ($ (זה)); });אתה יכול גם להשתמש באינדקס:
$ ('li'). each (פונקציה (i) {console.log (i + '-' + $ (זה)); });זה ידפיס 0, לאחר מכן 1 וכן הלאה.
אתה יכול גם להשתמש כל אחד() לחזור על מערכים, ממש כמו ב- JS:
מכוניות var = = '' פורד ',' יגואר ',' לוטוס ']; $ .each (מכוניות, פונקציה (i, value) {console.log (value); });שימו לב לטיעון הנוסף שנקרא ערך - זה הערך של רכיב המערך.
ראוי לציין את זה כל אחד() פחית לפעמים להיות איטי יותר מאשר לולאות JS וניל. זה נובע מהתקורה העיבוד הנוספת ש- jQuery מבצעת. לרוב זה לא נושא. אם אתה מודאג מביצועים או שאתה עובד עם מערכי נתונים גדולים, שקול לבצע את השוואה עם הקוד שלך jsPerf ראשון.
AJAX
JavaScript ו- XML אסינכרוני או AJAX זה ממש קל מאוד עם jQuery. AJAX מעניקה כוח רב לאינטרנט וזה משהו שכיסינו בו חלק 5 מדריך jQuery (חלק 5): AJAX לכולם!כאשר אנו מתקרבים לסוף סדרת הדרכות המיני מיני של jQuery שלנו, הגיע הזמן שנבדוק יותר את אחת התכונות המשומשות ביותר של jQuery. AJAX מאפשרת לאתר לתקשר עם ... קרא עוד שלנו מדריך jQuery מדריך jQuery - תחילת העבודה: יסודות ובוחריםבשבוע שעבר דיברתי על כמה חשוב jQuery לכל מפתח אינטרנט מודרני ומדוע זה מדהים. השבוע אני חושב שהגיע הזמן שנלכלך את היד עם קצת קוד ונלמד איך ... קרא עוד . זה מספק דרך לטעון חלקית של דף אינטרנט - אין סיבה לטעון מחדש את הדף כולו כשרק רוצים לעדכן את ציון הכדורגל, למשל. ל- jQuery מספר שיטות AJAX, כשהן הקלות ביותר עומס ():
$ ('# baz'). לטעון ('כמה / url / page.html');פעולה זו מבצעת שיחת AJAX לדף שצוין (כמה / url / page.html) ודוחף את הנתונים לבורר. פשוט!
אתה יכול להופיע קבל HTTP בקשות:
$ .get ('כמה / url', פונקציה (תוצאה) {console.log (תוצאה); });אתה יכול גם לשלוח נתונים באמצעות הודעה:
$ .post ('כמה / אחר / url', {'make': 'פורד', 'model': 'Cortina'});קל מאוד להגיש נתוני טפסים:
$ .post ('url', $ ('form'). סדרתי (), פונקציה (תוצאה) {console.log (תוצאה); }ה לסדר () הפונקציה מקבלת את כל נתוני הטופס ומכינה אותם לשידור.
הבטחות
ההבטחות משמשות לביצוע נדחה. הם יכולים להיות קשים ללימוד, אולם jQuery הופך את זה למעט פחות בעייתי. ECMAScript 6 מציג JS הבטחות מקוריות, עם זאת, התמיכה בדפדפנים היא רעועה במקרה הטוב. לעת עתה, הבטחות jQuery טובות בהרבה בתמיכה הדפדפנית.
הבטחה היא כמעט בדיוק כמו שהיא נשמעת. הקוד יבטיח הבטחה לחזור בשלב מאוחר יותר לאחר השלמתו. מנוע ה- JavaScript שלך יעבור לביצוע קוד אחר. פעם ההבטחה פותר (חוזר), ניתן להריץ פיסת קוד אחרת. ניתן לחשוב על הבטחות כמו התקשרות חוזרת. ה תיעוד jQuery מסביר ביתר פירוט.
הנה דוגמה:
// dfd == נדחה. var dfd = $. נדחה (); פונקציה doThing () {$ .get ('some / slow / url', פונקציה () {dfd.resolve (); }); להחזיר dfd.promise (); } $. כאשר (doThing ()). ואז (פונקציה () {console.log ('YAY, זה נגמר'); });שימו לב כיצד מבטיחים את ההבטחה (dfd.promise ()), והיא נפתרת רק לאחר סיום שיחת ה- AJAX. אתה יכול להשתמש במשתנה כדי לעקוב אחר שיחות AJAX מרובות, ולהשלים משימה אחרת רק לאחר ביצוע כל אלה.
טיפים לביצועים
המפתח לסחיטת הביצועים מהדפדפן שלך הוא הגבלת הגישה ל- DOM. רבים מהטיפים הללו עשויים לחול גם על JS, וייתכן שתרצה לפרופיל את הקוד שלך כדי לראות אם הוא איטי באופן בלתי מקובל. בעידן הנוכחי של מנועי JavaScript עם ביצועים גבוהים, צווארי בקבוק קלים בקוד עלולים לעיתים קרובות לשים לב. למרות זאת, עדיין כדאי לנסות לכתוב את הקוד בעל הביצועים המהירים ביותר שאתה יכול.
במקום לחפש ב- DOM כל פעולה:
$ ('foo'). css ('צבע רקע', 'אדום'); $ ('foo'). css ('צבע', 'ירוק'); $ ('foo'). css ('רוחב', '100 פיקסלים');אחסן את האובייקט במשתנה:
$ bar = $ ('foo'); $ bar.css ('צבע רקע', 'אדום'); $ bar.css ('צבע', 'ירוק'); $ bar.css ('רוחב', '100 פיקסלים');בצע אופטימיזציה לולאות שלך. ניתן לווניל לולאה:
מכוניות var = = '' מיני ',' פורד ',' יגואר ']; עבור (int i = 0; i אמנם לא מטבעו רע, אך ניתן לבצע לולאה זו במהירות רבה יותר. על כל איטרציה, על הלולאה לחשב את הערך של מערך המכוניות (מכוניות. אורך). אם אתה מאחסן זאת במשתנה אחר, ניתן להשיג ביצועים, במיוחד אם אתה עובד עם מערכי נתונים גדולים:
עבור (int i = 0, j = מכוניות. אורך; i כעת מאוחסן מערך המכוניות j. זה כבר לא צריך להיות מחושב בכל איטרציה. אם אתה משתמש כל אחד(), אינך צריך לעשות זאת, אם כי וניל JS ממוטב כהלכה יכול לעלות על jQuery. המקום בו jQuery באמת מאיר זה דרך המהירות של פיתוח וניפוי באגים. אם אתה לא עובד על נתונים גדולים, jQuery בדרך כלל הוא יותר מהיר.
כעת עליכם לדעת מספיק יסודות כדי להיות נינג’ה של jQuery!
האם אתה משתמש ב- jQuery באופן קבוע? הפסקת להשתמש בו מסיבות כלשהן? ספר לנו את מחשבותיך בתגובות למטה!
ג'ו הוא בוגר מדעי המחשב מאוניברסיטת לינקולן, בריטניה. הוא מפתח תוכנה מקצועי, וכאשר הוא לא טס מל"טים או כותב מוסיקה, לעתים קרובות ניתן למצוא אותו בצילום או בהפקת סרטונים.
