JavaScript לעומת jQuery: הבדלים מרכזיים שעליך לדעת

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

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

JavaScript: שפה עוצמתית בפיתוח אתרים

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

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

בואו נמשיך עם JavaScript לעומת jQuery שלנו ונבין את הספרייה שפותחה מ- JavaScript.

jQuery: ספרייה שפותחה מ- JavaScript

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

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

עכשיו נמשיך לבלוג JavaScript לעומת jQuery ונראה מדוע נוצר jQuery.

מדוע נוצר jQuery ומה היכולות המיוחדות של jQuery?

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

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

בואו נבין את ההבדל.

JavaScript לעומת jQuery

ממשיכים בהבדל בין JavaScript ל- jQuery עם דוגמה.

JavaScript לעומת jQuery עם דוגמאות

בואו נסתכל על הדוגמאות.

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

JavaScript מתווסף ישירות למסמך HTML שבתוך התג או ניתן להוסיף קובץ JavaScript חיצוני במסמך HTML באמצעות תכונת src.
נכתב ישירות בתוך תג התסריט:

התראה ('תיבת התראה זו נקראה עם אירוע onload')

על מנת להשתמש ב- jQuery אנו מורידים את הקובץ מאתר האינטרנט שלו ומפנים את הנתיב של קובץ ה- jQuery שהורדת בתכונה src של תג SCRIPT או שנוכל לקבל אותו ישירות מ- CDN (רשת מסירת תוכן).

שימוש ב- CDN :

בואו נבין את DOM מעבר ומניפולציה

מעבר DOM ומניפולציה

ב- JavaScript:

אנו יכולים לבחור אלמנט DOM ב- JavaScript בשיטה document.getElementById () או בשיטת document.querySelector ().

var mydiv = document.querySelector (“# div1”)

אוֹ

document.getElementById ('# div1')

ב- jQuery:

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

$ (בורר) $ ('# div1') - הבורר הוא מזהה 'div1' $ ('. div1') - הבורר הוא מחלקה 'div1' $ ('p') - הבורר הוא הפיסקה ב דף HTML

בהצהרה לעיל, $ הוא סימן המשמש לגישה ל- jQuery, הבורר הוא אלמנט HTML.

הוספת סגנונות ב- JavaScript:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

הוספת סגנונות ב- jQuery:

$ ('# myDiv'). css ('צבע רקע', '# FFF')

בורר #myDiv מתייחס למזהה 'myDiv'

בחירת רכיבי DOM ומניפולציה הם הרבה יותר תמציתיים ב- jQuery מאשר ב- JavaScript.

ממשיכים בטיפול באירועים.

טיפול באירועים

ב- JavaScript אנו בוחרים אלמנט HTML:

document.getElementById ('# button1'). addEventListener ('לחץ ', myCallback) פונקציה myCallback () {console (' בתוך myCallback פונקציה ')}

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

אנו יכולים להשתמש גם בפונקציה אנונימית בדוגמה שלעיל:

document.getElementById ('# button1'). addEventListener ('לחץ ', פונקציה () {console.log (' בתוך הפונקציה ')})

ניתן להסיר את eventListener באמצעות השיטה removeEventListener ()

להמיר מחרוזת תאריך לתאריך

document.getElementById ('# כפתור 1'). removeEventListener ('לחץ', myCallback)

ב- jQuery

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

$ ('P'). לחץ על (פונקציה () {// לחץ על פעולה})

דוגמאות נוספות הן:

$ ('# כפתור 1'). Dblclick (פונקציה () {// פעולה עבור אירוע הלחיצה הכפולה על רכיב ה- html עם המזהה 'כפתור 1'}

שיטת JQuery 'on' משמשת להוספת אירוע אחד או יותר לאלמנט DOM.

$ ('# Button1'). על ('לחץ', פונקציה () {// פעולה כאן})

אנו יכולים להוסיף מספר אירועים ומספר מטפלים באירועים באמצעות שיטה.

$ ('כפתור 1'). על ({לחץ: פונקציה () {// פעולה כאן}, dblclick: פונקציה () {// פעולה כאן}})

לשני אירועים או יותר יכול להיות אותו מטפל כמפורט להלן:

$ ('# Button1'). ב- ('לחץ dblclick', פונקציה () {// פעולה כאן})

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

ממשיכים עם שיחות אייאקס.

אייאקס מתקשרת

ב- JavaScript

JavaScript השתמש באובייקט XMLHttpRequest כדי לשלוח בקשת Ajax לשרת. ל- XMLHttpRequest יש מספר שיטות לבצע את שיחת Ajax. שתי השיטות הנפוצות הן פתוחות (שיטה, URL, אסינכרון, משתמש, PSW), send () ושליחה (string).
בוא ניצור תחילה XMLHttpRequest:

var xhttp = XMLHttpRequest חדש () ואז השתמש באובייקט זה כדי לקרוא לשיטה הפתוחה: xhttp.open ('GET', 'D: //getinfo.txt', נכון) xhttp.send ()

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

הגשת בקשת הודעה:

var xhttp = XMLHttpRequest חדש () ואז השתמש באובייקט זה כדי לקרוא לשיטה הפתוחה ובקש בקשת הודעה: xhttp.open ('POST', 'D: //postinfo.txt', נכון) xhttp.send ()

כדי לפרסם נתונים עם הבקשה, אנו משתמשים בשיטת setRequestHeader של xhttp כדי להגדיר את סוג הנתונים שיש לשלוח ושיטת השליחה שולחת את הנתונים בזוגות מפתח / ערך:

xhttp.setRequestHeader ('סוג תוכן', 'יישום / x-www-form-urlencoded') xhttp.send ('שם = ראבי ושם משפחה = קומאר')

ב- jQuery

ל- jQuery מספר שיטות מובנות לביצוע שיחות של אייאקס. בשיטות אלה, אנו יכולים להתקשר לכל נתונים מהשרת ולעדכן חלק מדף האינטרנט בנתונים. שיטות jQuery הופכות את שיחת Ajax לקלה.
שיטת ה- jQuery load (): שיטה זו מביאה נתונים מכתובת אתר וטוענת את הנתונים לבורר HTML.
$ ('P'). טעינה (URL, נתונים, התקשרות חוזרת)
כתובת ה- URL היא המיקום שנקרא לנתונים, פרמטר הנתונים האופציונלי הוא הנתונים (זוגות מפתח / ערך) שאנו רוצים לשלוח יחד עם השיחה והפרמטר האופציונלי 'callback' הוא השיטה אותה אנו רוצים לבצע לאחר הטעינה. הושלם.

שיטת jQuery $ .get () ו- $ .post (): שיטה זו מביאה נתונים מכתובת אתר וטוענת את הנתונים לבורר HTML.
$ .get (URL, התקשרות חוזרת)
כתובת ה- URL היא המיקום שנקרא לנתונים וההתקשרות חוזרת היא השיטה שברצוננו לבצע לאחר השלמת הטעינה.

$ .post (URL, נתונים, התקשרות חוזרת)
כתובת האתר היא המיקום שנקרא לנתונים, הנתונים הם צמד המפתחות / ערכים שאנו רוצים לשלוח עם השיחה וההתקשרות חוזרת היא השיטה שברצוננו לבצע לאחר השלמת הטעינה. כאן הנתונים והפרמטרים להתקשרות הם אופציונליים.

שיחות jQuery Ajax הן תמציתיות יותר מ- JavaScript. ב- JavaScript אנו משתמשים באובייקט XMLHTTPRequest, ב- jQuery איננו צריכים להשתמש באובייקט כזה.

ממשיכים עם אנימציה.

אנימציה

ב- JavaScript

ל- JavaScript אין פונקציית אנימציה ספציפית כמו פונקציית jQuery animate (). באפקט אנימציה של JavaScript מושג בעיקר על ידי מניפולציה בסגנון האלמנט או באמצעות CSS טרנספורמציה, תרגום או הנפשה של מאפיינים. JavaScript משתמש גם בשיטות setInterval (), clearInterval (), setTimeout () ו- clearTimeout () לאפקטים של אנימציה.

setInterval (myAnimation, 4) פונקציה myAnimation () {document.getElementById ('# div1'). style.transform = 'תרגם (100 פיקסלים, 100 פיקסלים)' document.getElementById ('# div1'). style.transform = 'סובב ( 20 מעלות) '}

אנימציה ב- JavaScript עוסקת בעיקר במניפולציה על מאפייני CSS.

ב- jQuery

ל- jQuery שיטות מובנות רבות להוסיף אנימציות או אפקטים על רכיבי HTML. בואו נבדוק כמה מהם.
שיטת האנימציה (): שיטה זו משמשת להוספת אנימציה על אלמנט.

$ ('# button1'). לחץ על (פונקציה () {$ ('# div1'). animate ({height: '300px'})})

שיטת ההצגה (): שיטה זו משמשת להופעת אלמנט ממצב נסתר.

$ ('כפתור 1'). לחץ על (פונקציה () {$ ('# div1'). הצג ()})

שיטת הסתר (): שיטה זו משמשת להסתרת אלמנט ממצב גלוי.

$ ('# button1'). לחץ על (פונקציה () {$ ('# div1'). הסתר ()})

ל- jQuery יש שיטות משלה לייצר אנימציה ואפקטים בדף אינטרנט.

לסיכום, JavaScript היא שפה לפיתוח אתרים, jQuery היא ספריה שמקורה ב- JavaScript. ל- JavaScript ול- jQuery יש חשיבות משלהם בפיתוח אתרים.

עכשיו שאתה יודע על לולאות JavaScript, עיין ב מאת אדוריקה. הדרכת הסמכת בניית אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו ל- Amazon Simple Storage Service (S3).

יש לך שאלה עבורנו? אנא הזכיר זאת בסעיף ההערות של 'JavaScript לעומת jQuery' ונחזור אליך.