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

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

מודל אובייקט מסמכים

jQuery עוסק בהעברה ומניפולציה של פְּסַק דִין - ה ד מסמך אוֹ bject M אודל. DOM הוא ייצוג עץ היררכי של הדף, שנבנה על ידי דפדפנים לאחר קריאת כל קוד ה- HTML. ב- jQuery נשתמש במינוח כמו הוֹרֶה , יְלָדִים , ו אחים לעתים קרובות למדי, כך שיהיה לך מושג מה זה אומר ביחס ל- DOM.

התרשים הפשוט הזה מw3schoolsמסביר את המושגים די טוב. אתה אמור להיות מסוגל לראות שהורה של האלמנט הוא, בעוד ה- לאלמנט יש מיידי

jQuery code codes here`

$ ('בוחר').שיטה();

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

הבוחראומר ל- jQuery למצוא דברים התואמים את הכלל הזה, וזהה לבוררי CSS (ולאחר מכן עוד קצת למעלה). אז, בדיוק כמו ב- CSS היית מעצב את כל הקישורים איתם

a { }

אותו הדבר ייעשה ב- jQuery כמו

$('a')

ניתן לעשות זאת עבור כל רכיבי HTML - div, h1, span - מה שלא יהיה. תוכל גם להשתמש בשיעורי ומזהי CSS כדי להיות יותר ספציפיים.

לדוגמה, כדי למצוא את כל הקישורים עם הכיתה 'findme', היית משתמש ב:

$('a.findme')

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

$('.findme')

שיתאים לכל דבר עם הכיתה מצא אותי , בין אם זה היה קישור או לא.

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

קיצורי דרך לשולחן העבודה לא עובדים Windows 10

$('#something')

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

$('body p:first')

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

$('a[href*='makeuseof']')

זה לא מגניב? ובכן, אני חושב שכן.

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

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

$('a').css('background-color','red');

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 5 טיפים להטעין את מכונות הלינוקס של VirtualBox

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

קרא הבא נושאים קשורים

תרבות אינטרנט
בניית אתרים
JavaScript
תִכנוּת
jQuery

על הסופר ג'יימס ברוס(707 מאמרים פורסמו)

לג'יימס תואר ראשון בבינה מלאכותית והוא מוסמך CompTIA A+ ו- Network+. כשהוא לא עסוק כעורך ביקורות חומרה, הוא נהנה מ- LEGO, VR ומשחקי לוח. לפני שהצטרף ל- MakeUseOf, הוא היה טכנאי תאורה, מורה לאנגלית ומהנדס מרכז נתונים.

עוד מאת ג'יימס ברוס

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה