פרסומת
זה חלק ממבוא מתמשך למתחילים לסדרת תכנות האינטרנט jQuery. חלק 1 כיסה את יסודות jQuery מדריך jQuery - תחילת העבודה: יסודות ובוחריםבשבוע שעבר דיברתי על כמה חשוב jQuery לכל מפתח אינטרנט מודרני ומדוע זה מדהים. השבוע אני חושב שהגיע הזמן שנלכלך את היד עם קצת קוד ונלמד איך ... קרא עוד כיצד לכלול אותו בפרויקט שלך ובוחרים. בחלק 2 נמשיך בשימוש בסיסי כשאנחנו מסתכלים על כמה שיטות שתוכלו לבצע על אותם אלמנטים של DOM, ועוד כמה יסודות שפה.
$(בוחר).שיטה();
אם אתה זוכר משיעור 1, זהו המבנה הבסיסי של מניפולציה של DOM ב- jQuery. מניפולציה של DOM היא לא הדבר היחיד שאתה יכול לעשות עם jQuery כמובן, אבל זה המקום הכי קל להתחיל ממנו והשכיח ביותר, ולכן לכן בחרנו בו.
כדי לחזור במהירות, את בוחר חלק מהצהרה זו מאפשר לך להשתמש בשמות אלמנטים, שיעורים או מזהי CSS דמויי CSS על מנת לאתר חלקים של ה- DOM. לדוגמה, לתפוס את כל עם שם כיתה של מוסתר, היינו משתמשים ב:
$ ('div.hidden')
החלק השני של משוואה זו הוא שיטה להופיע ב- DIV אלה ברגע שמצאנו אותם (אם הם קיימים בכלל; או שהם עשויים להיות רק פריט "תואם" אחד). זכור, jQuery יחזיר אי פעם אלמנט אחד לבחירת זיהוי, מכיוון שמזהים צריכים להתייחס לפריטים ייחודיים. אם יהיה לך יותר מאחד ממשהו, עליו להיות מוגדר ככיתה ב- CSS.
לאחר מכן לשיטות; מה אתה יכול לעשות עם אלמנטים של ה- DOM בכל מקרה?
ראשית, הכרתי בפניך את .css בפעם הקודמת כדי שתוכל להשתמש בה לבדיקה. הפורמט פשוט:
.css ('נכס', 'ערך');
לפיכך כל דבר שניתן להגדיר על ידי CSS יכול להיות מותאם על ידי jQuery - צבעים, שקיפות, מיקום, גודל - רק למעט שם. השינוי הוא מיידי.
אם אתה מעדיף להנפיש את השינויים ב- CSS, יש לי חדשות נהדרות עבורך; יש גם שיטה שנקראת . לחיות (). זה קצת יותר מורכב:
.animate ({'נכס': 'ערך'}, מהירות);
לדוגמא:
. animat ({'אטימות': '0.25', 'גובה': '100 פיקסלים'}, 'מהיר');
בשלב זה, אולי תוהה למה מיועד הפלטה המתולתלת; הם נקראים "מילולי אובייקט", ומשמשים בדרך כלל ליצירת רשימה של ערך הנכס זוגות, סוג של כמו מערך צמוד אם אתה בא משפות אחרות. תשתמש בהם הרבה ב- jQuery, אז אני אומר זאת שוב - התרגל לבדוק כראוי אם סוגריים וסגרים סגורים!
לבדוק הדף הזה להרבה דוגמאות עבודה של שיטת ההנפשה.
כמו גם לתפעל את מאפייני CSS של משהו, אתה יכול להתאים את התוכן שלו באמצעות ה- .גם שיטות טקסט (), .html () ו- .val () (val מיועד לתוכן של אלמנטים בטופס). שיטות אלה פועלות כשניהם סטters ו לקבלters; אם לא תציין ערך, הם יקבלו את הערך הנוכחי. אם תציין ערך, הם יחליפו את הערך הנוכחי.
להלן כמה דוגמאות מהירות:
השג את הערך הנוכחי של שדה השם בטופס התגובה והקצה אותו למשתנה שם תגובה:
var commenter_name = $ (# comment-form #name) .val ();
קבע את הערך של לערך שנקטף ממנו שם המגיב:
$ ('span.name'). טקסט (commenter_name);
אז יש לנו מבחר עצום של שיטות לשיבוט, להסתובב, להכנס או למחיקה של חלקים של ה- DOM. הדמיון שלך הוא הגבול, באמת.
נניח שרצית להכניס חסימה לתמונות פרסום באופן דינמי אחרי כל שלוש בפיסקה בעמודת התוכן, אך אתה עושה זאת ב- Javascript כך שניתן יהיה לטעון את העמוד הראשוני נשמר נקי. נשמע די מורכב, נכון? בקושי ...
$('div # תוכןע: ילד לידה (3n)').לאחר('
');
על פי פירוט זה, ביקשנו מ- jQuery:
- מצא את ה- div עם מזהה של "תוכן"
- מצא את ה- p הכלול בתוך הדיוויזיה הזו
- סנן לכל עמוד 3 באמצעות בורר פסאודו לילד (עוד על זה כאן)
- הכנס אימג 'שרירותי אחרי כל אלמנט תואם
אינני יכול לרשום כאן את כל השיטות, וגם לא תרצה לקרוא את זה. העניין הוא שיש שיטה לעשות די הרבה כל מה שתוכלו לחשוב עליה כשמדובר במניפולציה, כך בדוק את ה- API עבור אחד שאתה יכול להשתמש בו.

כמו כן, זכור שייתכן שיש יותר מדרך אחת לעשות משהו. אם למשל אינך יכול לצמצם את האובייקט הנכון אליו insertAfter (), אולי לחשוב על למצוא את הבא ילד למטה ומשתמש insertFore () במקום זאת.
שרשור שיטה
סוף סוף היום, בואו נאמר מילה מהירה על שרשור שיטות, בעיקרון בגלל שזה מדהים. ראשית, נשקול את שורות הקוד הבאות:
$ ('תפריט nav #'). fadeIn ('מהיר'); $ ('תפריט nav #'). addClass ('beingShown'); $ ('תפריט nav #'). css ('שולח-ימין', '10 פיקסלים');
זה נשמע מספיק הגיוני, נכון? אבל אתה יכול לעשות את אותו הדבר בשורה אחת בלבד:
$ ('תפריט nav #'). fadeIn ('מהיר'). addClass ('beingShown'). css ('margin-right', '10px');
זה עושה את אותו הדבר בדיוק, והוא נקרא שרשור שיטה. מכיוון שכמעט כל שיטות jQuery מחזירות עצם jQuery בעצמן, כל אחת מהן יכולה להזין את הבא. המשמעות היא פחות קוד - וזה תמיד דבר טוב - אך למעשה הוא פועל מהר יותר.
למה? ובכן, בכל פעם שאתה קורא ל- jQuery הבסיסי $ פקודה ובורר, אתה מבקש ממנו לחפש בעץ ה- DOM ומחפש אלמנט תואם. כשאתה משרשר שיטות, אינך צריך יותר מדי לחזור אל ה- DOM, מכיוון שהוא יודע היכן הן נמצאות, ויכול לבצע את השיטה באופן מיידי.
זהו זה להיום, ולדעתי כנראה כיסינו די הרבה. עכשיו אתה צריך להיות חמוש ביכולת לבצע כמה מניפולציות DOM כבד למדי, אז תעזוב, תשרשר את השיטות שלך יחד ותעשה בלגן אמיתי של הדף. לעת עתה, תרצה להציב את התסריטים שלך בכותרת התחתונה בכדי לתת לשאר הדף זמן לטעון. בשבוע הבא נתמודד עם סוגיית הגורם ל- jQuery לעשות דברים רק כאשר הכל טעון נכון באירועים, ובמקרה המוזר של פונקציות אנונימיות.
אם פשוט מעדת את הפוסט הזה, אתה כנראה מפתח אינטרנט מסוג כלשהו ואולי תרצה לבדוק את כל וורדפרס ובלוגים מאמרים, או אפילו שלנו התוספים הטובים ביותר לוורדפרס התוספים הטובים ביותר לוורדפרס קרא עוד עמוד.
ג'יימס הוא בעל תואר ראשון בבינה מלאכותית, והוא מוסמך CompTIA A + ו- Network +. הוא המפתח הראשי של MakeUseOf, ומבלה את זמנו הפנוי במשחקי פיינטבול VR ומשחקי לוח. הוא בנה מחשבים אישיים מאז שהיה ילד.