דוגמאות jQuery

הסבר על דוגמאות jQuery

דוגמאות click()

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

הסבר על דוגמאות click()

דוגמאות פונקציה jQuery $

jQuery מספקת פונקציה שמורידה רווחים מיותרים ממחרוזת: דרך קצרה יותר
בדוגמה הבאה פונקציה בשם 'myfunc' נקראת ישר אחרי טעינת הדף
בדוגמה הבאה לכל השורה זוגית במסמך בטבלה יתווסף class בשם oddStripe ולכל השורה האי זוגית evenStripe
דוגמה: jQuery מספקת פונקציה שמורידה רווחים מיותרים ממחרוזת
דוגמה: פונקציה הבאה מוסיפה class בשם bar לכל הפסקאות שיש להן class בשם foo

הסבר על דוגמאות פונקציה jQuery $

דוגמאות שיטות שימוש jQuery

ניתן להתייחס לאוביקטים בשרשרת על ידי הוספת פעולת

הסבר על דוגמאות שיטות שימוש jQuery

דוגמאות jQuery.trim()

מוחק רווחים מתחילת מחרוזת ומהסוף

הסבר על דוגמאות jQuery.trim()

דוגמאות addClass()

מוסיף מחלקות 'selected' ו- 'highlight' לאלמנטים בהתאמה.
מוסיף מחלקה 'selected' לאלמנט בהתאמה.

הסבר על דוגמאות addClass()

דוגמאות $(document).ready()

מציג הודעה, כשה DOM מוכן להפעלה

הסבר על דוגמאות $(document).ready()

דוגמאות toggle()

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

הסבר על דוגמאות toggle()

דוגמאות slideDown()

פותח כל השדות קלט מטה על ידי אפקט החלקה מטה

הסבר על דוגמאות slideDown()

דוגמאות add()

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

הסבר על דוגמאות add()

דוגמאות load()

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

הסבר על דוגמאות load()

דוגמאות removeClass()

מוחק class 'blue' מאלמנטים בהתאמה
מוחק class 'blue' ו- 'under' מאלמנטים בהתאמה.
מוחק כל ה- classes מאלמנטים בהתאמה.

הסבר על דוגמאות removeClass()

דוגמאות slideUp()

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

הסבר על דוגמאות slideUp()

דוגמאות hover()

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

הסבר על דוגמאות hover()

דוגמאות append()

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

הסבר על דוגמאות append()

דוגמאות remove()

מוחק כל הפסקאות מ- DOM
מוחק כל הפסקאות המכילות "Hello" מ- DOM

הסבר על דוגמאות remove()

דוגמאות find()

בחירה מרשימה מלאה של תגים span. רק תגים span בתוך תגים p משתנים לאדום, בזמן שאחרים נשארים כחולים.
מחפש אלמנטים ילד מסוג span ברשימהת אלמנטים מסוג p, אותו דבר כמו $(»p span») .
מוסיף אלמנט מסוג span מסביב לכל מילה, אחרי זה מוסיף אפקט hover ומדגיש כל מילה המכילה את אות t כטקסט נטוי .

הסבר על דוגמאות find()

דוגמאות fadeIn()

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

הסבר על דוגמאות fadeIn()

דוגמאות fadeOut()

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

הסבר על דוגמאות fadeOut()

דוגמאות unbind()

יכול לצרף או למחוק אירועים לכפתור צבוע

הסבר על דוגמאות unbind()

דוגמאות show()

מציג כל הפסקאות
מציג כל האלמנטים לפי הסדר של div מוסתרים באמצעות מצב מהירות fast. משך כל אנימציה הוא 200 אלפיות השנייה. בסיות כל אנימציה מתחילה אנימציה שניה.
מפעיל אנימציה על כל הפסקאות כדי לראות אותם לאט, משך האנימציה 600 אלפיות השנייה.
מציג כל האלמנטים המוסתרים span ו- input לפי הסדר בעמצאות מצב מהירות normal. בסיום האנימציה משנה טקסט של פסקה.

הסבר על דוגמאות show()

דוגמאות bind()

מטפל ב- click ו- double-click עבור פסקה

הסבר על דוגמאות bind()

דוגמאות text()

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

הסבר על דוגמאות text()

דוגמאות מטפל ב- click ו- double-click עבור פסקה

ניתן לקשור אירועי משתמש

הסבר על דוגמאות מטפל ב- click ו- double-click עבור פסקה

דוגמאות toggleClass()

מוסיף class 'highlight' אם אין אותו, ומוחק אם יש אותו בכל לחיצה שלישית

הסבר על דוגמאות toggleClass()

דוגמאות trigger()

לחיצה על כפתור #2 מפעילה גם לחיצה על כפתור #1

הסבר על דוגמאות trigger()

דוגמאות stop()

תלחצו על כפתור «Go» כדי להפעיל אנימציה, אחרי זה «STOP» כדי לעצור. כפתור «STOP» עוצר רק אפקט הנוכחי, אבל לא מוחק את תור אפקטים.

הסבר על דוגמאות stop()

דוגמאות css()

מקבל גישה לצבע רקע של אלמנט div, שעליו משתמש לחץ.
מגדיר צבע של גופן של כל הפסקאות וצבע רקע:
אם שם מאפיין מכיל "-", יש לשים אותו בין הגרשיים:
מחליף צבע של כל פסקה לאדום באירוע mouseover
מסמן מילה שלחצתם עליה בפסקה

הסבר על דוגמאות css()

דוגמאות jQuery

מוצא כל האלמנטים 'p', שהם ילדים של אלמנט div.

הסבר על דוגמאות jQuery

דוגמאות :last

מחפש שורה אחרונה בטבלה.

הסבר על דוגמאות :last

דוגמאות :even

מחפש שורות זוגיות בטבלה, מסומנות כראשונה, שניה, רביעית וכו'.

הסבר על דוגמאות :even

דוגמאות :odd

מחפש שורות של טבלה אי זוגיות, מסומנות כשניה, רביעית וכו' ( אינדרס 1, 3, 5 וכו' ).

הסבר על דוגמאות :odd

דוגמאות :eq(index)

מחפש td שלישי .

הסבר על דוגמאות :eq(index)

דוגמאות val()

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

הסבר על דוגמאות val()

דוגמאות :first

מחפש שורה ראשונה בטבלה

הסבר על דוגמאות :first

דוגמאות html()

מוסיף קוד html לכל div אחרי זה מעבד קוד שהוכנס
מוסיף קוד HTML לכל div
תלחצו על הפסקה כדי להפוך אותה מ- html לטקסט

הסבר על דוגמאות html()

דוגמאות :selected

בלחיצה על אלמנט של הרשימה מופיע ערך שלו באלמנט DIV שלמטה.

הסבר על דוגמאות :selected

דוגמאות :checked

מחפש כל האלמנטים מסומנים.

הסבר על דוגמאות :checked

דוגמאות change()

באירוע change מופעלת פונקציה, שמקבלת טקסט של כל אופציה שנבחרה ורושמת אותו לתוך ה- div

הסבר על דוגמאות change()

דוגמאות keyup()

מציג אובייקט אירוע עבור מטפל keyup, כאשר כפתור שוחרר בתוך שדה קלט.
מגדיר פעולה כשה מקש escape שוחרר

הסבר על דוגמאות keyup()

דוגמאות each()

עובר בלולאה על שלושה אלמנטים div ומגדיר מאפיין צבע שלהם.
אם אתם רוצים לקבל אובייקט jQuery במקום אלמנט רגיל של DOM, תשתמשו בפונקציה $(this), לדוגמה:
אתם יכולים להשתמש ב- 'return' כדי לצאת מלולאה each() מוקדם יותר.

הסבר על דוגמאות each()

דוגמאות hide()

מסתיר כל הפסקאות בלחיצה על הקישור
מסתיר באמצעות אנימציה כל הפסקאות, משך האנימציה 600 אלפיות השנייה.
מפעיל אנימציה על כל אלמנטים מסוג span (מילים במקרה שלנו) ומסתיר אותם באמצעות מצב המהירות fast. משך האנמציה 200 מילישניות. בסיום כל אנימציה מתחילה אנימציה אחרת.
בלחיצה מסתיר אלמנטים div במשך 2 שניות, בסיום האנימציה מוחק אלמנט div. נסו ללחוץ על כמה אלמנטים בו זמנית.

הסבר על דוגמאות hide()

דוגמאות is()

בדיקת אוסף הקיים של רשימת אלמנטים חלופית. כחולה, רשימה חלופית של אלמנטים נסגרת, בזמן שאחרים הופכים לאדומים
דרך חלופית להשיג את הדוגמה שלעיל באמצעות אלמנט ולא אובייקט jQuery. בדיקת אוסף הקיים של רשימת אלמנטים חלופית. כחולה, רשימה חלופית של אלמנטים נסגרת, בזמן שאחרים הופכים לאדומים
מספר דרכי שימוש של is() בתוך מטפל אירועים.
מחזיר true, מכיוון שהורה של השדה הוא אלמנט form
מחזיר false, בגלל שהורה של השדה input הוא אלמנט p

הסבר על דוגמאות is()

דוגמאות filter()

מחליף צבע של כל אלמנטים div ואחרי זה מצייר גבול מסביב של חלק מהם
מחליף צבע של כל האלמנטים מסוג div ומוסיף מסגרת לחלק מהם.

הסבר על דוגמאות filter()

דוגמאות focus()

מפעיל פוקוס
כדי למנוע מהמשתמש לכתוב בשדה טקסט, נסו:

הסבר על דוגמאות focus()

דוגמאות parent()

מציג הורה של כל אלמנט בצורה ( הורה > ילד ).
מחפש אלמנט הורה של כל הפסקאות עם class 'selected' .

הסבר על דוגמאות parent()

דוגמאות ready()

מציג הודעה כשה DOM מוכן

הסבר על דוגמאות ready()

דוגמאות next()

מחפש אלמנט הקרוב עבור כל כפתור לא זמין ( אלמנט הבא אחרי כפתור ) ומשנה טקסט שלו ל- «this button is disabled» .
מחפש אלמנט שבא אחרי כל פסקה שיש לו class «selected» .

הסבר על דוגמאות next()

דוגמאות blur()

מפעיל blur.

הסבר על דוגמאות blur()

דוגמאות one()

מציג הודעה alert עם טקסט של פסקה אחרי click על הפסקה, מופעל רק פעם אחד, נסו:
מקשר אירוע click עם כל div, מופעל רק פעם אחד

הסבר על דוגמאות one()

דוגמאות triggerHandler()

אם הפעלתם .triggerHandler()
על אירוע focus - אירוע ברירת מחדל לא יתבצע, רק מטפל אירועים קשור לאירוע focus

הסבר על דוגמאות triggerHandler()

דוגמאות live()

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

הסבר על דוגמאות live()

דוגמאות die()

מקשר ומבטל אירוע לכפתור צהוב, נסו:

הסבר על דוגמאות die()

דוגמאות

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

הסבר על דוגמאות

דוגמאות dblclick()

לחצו פעמיים על צבע רקע כדי להחליפו

הסבר על דוגמאות dblclick()

דוגמאות keydown()

מציג אובייקט אירוע עבור מטפל keydown, כאשר כפתור נלחץ בתוך שדה קלט

הסבר על דוגמאות keydown()

דוגמאות keypress()

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

הסבר על דוגמאות keypress()

דוגמאות mousedown()

מציג טקסט לפי אירוע mouseup ו- mousedown.

הסבר על דוגמאות mousedown()

דוגמאות mouseenter()

מראה טקסט כשה אירועים mouseenter ו- mouseout הופעלו

הסבר על דוגמאות mouseenter()

דוגמאות mouseleave()

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

הסבר על דוגמאות mouseleave()

דוגמאות mousemove()

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

הסבר על דוגמאות mousemove()

דוגמאות mouseout()

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

הסבר על דוגמאות mouseout()

דוגמאות mouseover()

מציג טקסט כשה אירועים mouseover ו- mouseout מופעלים

הסבר על דוגמאות mouseover()

דוגמאות scroll()

לעשות משהו כשה דף מוגלל (scrolled)

הסבר על דוגמאות scroll()

דוגמאות select()

כדי לעשות משהו כשה טקסט בשדות טקסט סומן, נסו:

הסבר על דוגמאות select()

דוגמאות submit()

כדי למנוע שליחת טופס, אם לא צוין ערך הנדרש, נסו:

הסבר על דוגמאות submit()

דוגמאות index()

בלחיצה מחזיר אינדקס של div בדף.
מחזיר אינדקס של האלמנט עם ID bar.
מחזיר אינדקס של אלמנט ראשון באוסף jQuery.
מחזיר אינדקס של אלמנט עם ID bar יחסית לכל אלמנטים 'li'.
מחזיר אינדקס של האלמנט עם ID bar יחסית לאחים שלו.
מחזיר -1, מכיוון שאין כאן אלמנט עם ID foobar.

הסבר על דוגמאות index()

דוגמאות appendTo()

מוסיף כל ה- spans לאלמנט עם ID «foo»

הסבר על דוגמאות appendTo()

דוגמאות after()

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

הסבר על דוגמאות after()

דוגמאות children()

מחפש כל הבנים של אלמנט שנלחץ.
מחפש כל הבנים של אלמנטים מסוג div.
מחפש כל צאצאים עם class «selected» של כל אלמנט מסוג div

הסבר על דוגמאות children()

דוגמאות height()

מציג מספר ערכי גובה. שימו לב, ערכים יכולים להיות קטנים יותר, מאשר היה צפוי, מכיוון שערכים הם מ- iframe. צבע צהוב מציג גוף של iframe.
בלחיצה מגדיר גובה של כל div ל- 30px וגם מחליף צבע רקע.

הסבר על דוגמאות height()

דוגמאות jQuery.support

מחזירה את המודל עבור תיבת iframe

הסבר על דוגמאות jQuery.support

דוגמאות jQuery.browser

מחזיר את גירסת הדפדפן.
מציג מידע על דפדפן

הסבר על דוגמאות jQuery.browser

דוגמאות

מחזיר מספר גרסה של דפדפן

הסבר על דוגמאות

דוגמאות jQuery.boxModel

מחזיר ערך של box model עבור iframe.

הסבר על דוגמאות jQuery.boxModel

דוגמאות jQuery.each()

עובר על כל פריט במערך ומציג מספר שלו גם על ידי ספרה וגם על ידי מילה

הסבר על דוגמאות jQuery.each()

דוגמאות jQuery.grep()

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

הסבר על דוגמאות jQuery.grep()

דוגמאות jQuery.makeArray()

הופך אוסף של אלמנטים HTML לתוך המערך.

הסבר על דוגמאות jQuery.makeArray()

דוגמאות jQuery.map()

שתי דוגמאות של שימוש ב- .map()

הסבר על דוגמאות jQuery.map()

דוגמאות jQuery.inArray()

מחזיר אינדקס של ערך מתוך המערך

הסבר על דוגמאות jQuery.inArray()

דוגמאות jQuery.unique()

מסיר אלמנטים כפולים ממערך של ה- divs

הסבר על דוגמאות jQuery.unique()

דוגמאות jQuery.isArray()

קובע אם האובייקט הוא מערך.

הסבר על דוגמאות jQuery.isArray()

דוגמאות jQuery.isFunction()

בוחן מספר פרמטרים.

הסבר על דוגמאות jQuery.isFunction()

דוגמאות jQuery.param( obj )

מסדר מפתח/ערך של אובייקט

הסבר על דוגמאות jQuery.param( obj )

דוגמאות get()

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

הסבר על דוגמאות get()

דוגמאות attr( )

מחפש תכונת כותרת של אלמנט em ראשון בדף
מגדיר מספר תכונות לכל ה img's בדף.
משבית כפטורים גדולים מכפטור ראשון.
מגדיר תכונה ID תלוי במקום של div בדף.
מגדיר תכונה src של תמונה מתכונה title

הסבר על דוגמאות attr( )

דוגמאות removeAttr()

לחיצה על הכפתור משחררת שדה טקסט לידו.

הסבר על דוגמאות removeAttr()

דוגמאות hasClass()

מחפש מחלקה 'selected' באלמנטים בהתאמה.

הסבר על דוגמאות hasClass()

דוגמאות :gt(index)

מחפש TD #5 או יותר גדול. תזכורת: אינדקס מתחיל מ-0

הסבר על דוגמאות :gt(index)

דוגמאות slideToggle()

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

הסבר על דוגמאות slideToggle()

דוגמאות fadeTo()

משנה נראות של פסקה ראשונה לערך 0.33 ( 33%, שליש מהנראות המלאה ) , משך של אנימציה - 600 אלפיות השנייה.
משנה שקיפות של אלמנטים div באופן אקראי, משך אנימציה 200 אלפיות השנייה.
מצאו תשובה נכונה! משך האנימציה 250 אלפיות השנייה, בסיום משתנה גם סגנון של הטקסט .

הסבר על דוגמאות fadeTo()

דוגמאות animate()

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

הסבר על דוגמאות animate()

דוגמאות jQuery.fx.off

מפעיל אנימציה מושבת

הסבר על דוגמאות jQuery.fx.off

דוגמאות prev()

מחפש אלמנט הקרוב קודם עבור כל אלמנט div.
מחפש אלמנט הקרוב קודם של כל פסקה שיש לו class 'selected' .

הסבר על דוגמאות prev()

דוגמאות

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

הסבר על דוגמאות

דוגמאות

מוסיף אלמנט לכל הפסקאות.

הסבר על דוגמאות

דוגמאות prepend()

מוסיף בהתחלה קוד HTML לכל הפסקאות.

הסבר על דוגמאות prepend()

דוגמאות prependTo()

מוסיף כל ה- spans לאלמנט עם ID 'foo'

הסבר על דוגמאות prependTo()

דוגמאות before()

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

הסבר על דוגמאות before()

דוגמאות insertAfter()

מכניס כל הפסקאות אחרי אלמנט עם id 'foo' . כמו $('#foo').after ('p')
מכניס כל הפסקאות לפני אלמנט עם id 'foo' . כמו $('#foo').before('p')

הסבר על דוגמאות insertAfter()

דוגמאות wrap()

עוטף div חדש מסביב לכל הפסקאות.
מכניס כל אלמנטים span לתוך עץ אובייקטים. שימו לב, כל אלמנט שנמצא מחוץ ל- span נשאר ללא שינוי, לדוגמה, טקסט אדום באובייקט strong בדוגמה. אפילו רווחים בין ה- spans נשארו. תלחצו על View Source כדי לראות קוד html חדש .
עוטף כל הפסקאות בדף עם אלמנט div חדש.
עוטף כל הפסקאות בדף באובייקט jQuery - אובייקט div כפול. שימו לב, זה לא מזיז אובייקט אלא משכפל אותו כדי לעטוף מסביב לאובייקט.

הסבר על דוגמאות wrap()

דוגמאות wrapAll()

עוטף div חדש מסביב לכל הפסקאות.
עוטף עץ אובייקטים החדש שנוצר מסביב ל- spans. שימו לב, כל מה שנמצא מעבר לאובייקט span , כמו <strong> ( טקסט אדום ) בדוגמה אזו, נשאר ללא שינוי. תלחצו על View Source כדי לראות קוד html חדש
עוטף כל הפסקאות באמצעות div חדש.
עוטף כל הפסקאות בדף לתוך האובייקט div כפול של jQuery. שימו לב שזה לא מזיז אובייקט אלא משכפל אותו מסביב ליעד.

הסבר על דוגמאות wrapAll()

דוגמאות wrapInner()

עוטף עץ החדש שנוצר של אובייקטים מסביב לתוכן של גוף המסמך.
בוחר את כל הפסקאות ועוטף אובייקט jQuery סביב כל תכולתה.
מוצא כל הפסקאות במסמך ועוטף את תוכן שלהם בתג b ( bold text )
מוצא כל הפסקאות במסמך ועוטף את תוכן שלהם בתג b ( bold text )

הסבר על דוגמאות wrapInner()

דוגמאות replaceWith()

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

הסבר על דוגמאות replaceWith()

דוגמאות replaceAll()

מחליף כל הפסקאות עם מילים מודגשות

הסבר על דוגמאות replaceAll()

דוגמאות empty( )

מוחק תוכן של כל הפסקאות בדף

הסבר על דוגמאות empty( )

דוגמאות clone()

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

הסבר על דוגמאות clone()

דוגמאות סלקטור id

מוצא את האלמנט עם מזהה "myID.entry[1]". שימו לב איך התווים מסוימים צריכים להמלט עם לכסונים.
מחפש אלמנט עם 'myDiv' id .

הסבר על דוגמאות סלקטור id

דוגמאות סלקטור element

מוצא כל אלמנט DIV

הסבר על דוגמאות סלקטור element

דוגמאות סלקטור class

מוצא אלמנטים בעלי שני קלאסים "myClass" ו- "myOtherClass".
מוצא כל האלמנטים עם 'myClass' class

הסבר על דוגמאות סלקטור class

דוגמאות סלקטור אוניברסלי

דרך הנפוצה כדי לבחור כל האלמנטים היא חיפוש בתוך document.body אלמנטים כמו head, script, וכו'
מחפש כל האלמנטים ( כולל head, body, וכו' ).

הסבר על דוגמאות סלקטור אוניברסלי

דוגמאות סלקטור מרובה

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

הסבר על דוגמאות סלקטור מרובה

דוגמאות סלקטור צאצא

מחפש כל הצאצאים שדה מסוג input של תווניות.

הסבר על דוגמאות סלקטור צאצא

דוגמאות parent > child

ממקם גבול מסביב כל אלמנטים ברשימה שהם ילדים של <ul class="topnav">
מחפש כל ילדים של אלמנט עם "main" id , הוא בצבע צהוב.

הסבר על דוגמאות parent > child

דוגמאות prev + next

מחפש כל שדות מסוג inputs שבאות מיד אחרי label.

הסבר על דוגמאות prev + next

דוגמאות prev ~ siblings

מחפש כל האלמנטים div שבאים אחרי אלמנט עם ID «#prev». שימו לב שלא נבחר span מכייון שהוא לא אלמנט מסוג div, וגם לא נבחר «div niece» כי הוא אלמנט ילד של אובייקט «div sibling».

הסבר על דוגמאות prev ~ siblings

דוגמאות :not(selector)

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

הסבר על דוגמאות :not(selector)

דוגמאות :lt(index)

מחפש אלמנטים מסוג TD עם מספר אינדקס קטן מ-4 (TD 4).

הסבר על דוגמאות :lt(index)

דוגמאות :header

מוסיף רקע וצבע טקסט לכל הכותרות בדף.

הסבר על דוגמאות :header

דוגמאות :animated

מחליף צבע של כל div שמופעלת עליו אנימציה.

הסבר על דוגמאות :animated

דוגמאות :contains(text)

מחפש כל האלמנטים מסוג div שמכילים טקסט "John" ומסמן אותו עם קו תחתון.

הסבר על דוגמאות :contains(text)

דוגמאות :empty

מחפש כל האלמנטים רייקיים - הם לא מכילים אלמנטים ילד או טקסט.

הסבר על דוגמאות :empty

דוגמאות :has(selector)

מוסיף class בשם «test» לכל האלמנטים מסוג div שמכילים פסקה בתוכם

הסבר על דוגמאות :has(selector)

דוגמאות :parent

מחפש כל האלמנטים מסוג td עם ילדים המכילים טקסט.

הסבר על דוגמאות :parent

דוגמאות :hidden

מציג כל אלמנטים מסוג div מוסתרים וסופר שדות קלט מוסתרים

הסבר על דוגמאות :hidden

דוגמאות :visible

בלחיצה כל האלמנטים מסוג div מקבלים רקע צהוב

הסבר על דוגמאות :visible

דוגמאות [attribute]

בלחיצה עם העכבר מוסיף ID של אלמנט div לטקסט שלו.

הסבר על דוגמאות [attribute]

דוגמאות [attribute=value]

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

הסבר על דוגמאות [attribute=value]

דוגמאות [attribute!=value]

מחפש כל שדות קלט שאין להם שם 'newsletter' ומוסיף טקסט לאלמנט מסוג span שבא אחריו.

הסבר על דוגמאות [attribute!=value]

דוגמאות [attribute$=value]

מחפש כל השדות מסוג input בעלי שם שמסתיים ב- 'letter' ומכניס בתוכם טקסט.

הסבר על דוגמאות [attribute$=value]

דוגמאות [attribute*=value]

מחפש כל השדות קלט, ששמם מכיל ‘man’, ומכניס בתוכם טקסט.

הסבר על דוגמאות [attribute*=value]

דוגמאות [attributeFilter1][attributeFilterN]

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

הסבר על דוגמאות [attributeFilter1][attributeFilterN]

דוגמאות :nth-child(index/even/odd/equation)

זהו מגרש המשחקים לראות איך סלקטור עובד עם שורות שונות. שימו לב שהוא שונה מ- :even ו- :odd, שלא שומרים על קשר עם ההורים ופשוט מסננים רשימת האלמנטים אל כל אחד אחר. :nth-child, לעומת זאת, סופר אינדקס של ילד עבור ההורים שלו. בכל מקרה, קל יותר לראות מאשר להסביר, לכן...
מחפש אלמנט li השני בכל ul שצוין ומסמן אותו.

הסבר על דוגמאות :nth-child(index/even/odd/equation)

דוגמאות :first-child

מחפש אלמנט span ראשון בכל div, מוסיף אליו סגנונות.

הסבר על דוגמאות :first-child

דוגמאות :last-child

מחפש אלמנט span אחרון בכל div ומוסיף אליו סגנונות CSS.

הסבר על דוגמאות :last-child

דוגמאות :only-child

מחפש ומסמן כפתורים שאין להם אחים בכל אלמנט div.

הסבר על דוגמאות :only-child

דוגמאות :input

מחפש כל האלמנטים הקלט

הסבר על דוגמאות :input

דוגמאות :text

מחפש כל האלמנטים מסוג text.

הסבר על דוגמאות :text

דוגמאות :password

מחפש כל אלמנטים מסוג password

הסבר על דוגמאות :password

דוגמאות :radio

מחפש כל האלמנטים מסוג radio

הסבר על דוגמאות :radio

דוגמאות :checkbox

מחפש כל השדות קלט מסוג checkbox

הסבר על דוגמאות :checkbox

דוגמאות :submit

מחפש כל האלמנטים קלט מסוג submit

הסבר על דוגמאות :submit

דוגמאות :image

מחפש כל האלמנטים קלט מסוג image.

הסבר על דוגמאות :image

דוגמאות :reset

מחפש כל האלמנטים מסוג reset.

הסבר על דוגמאות :reset

דוגמאות :button

מחפש כל האלמנטים מסוג button.

הסבר על דוגמאות :button

דוגמאות :file

מחפש כל אלמנטים מסוג file.

הסבר על דוגמאות :file

דוגמאות :enabled

מחפש כל האלמנטים מסוג input שהם זמינים.

הסבר על דוגמאות :enabled

דוגמאות :disabled

מחפש כל האלמנטים הלא זמינים.

הסבר על דוגמאות :disabled

דוגמאות [attribute^=value]

מחפש כל האלמנטים מסוג input בעלי שם שמתחיל עם 'news' ומכניס טקסט בתוכם.

הסבר על דוגמאות [attribute^=value]

דוגמאות length

סופר אלמנטים div. תלחצו כדי להוסיף עוד.

הסבר על דוגמאות length

דוגמאות eq()

הופך לכחול div עם אינדקס 2 באמצעות הוספת class

הסבר על דוגמאות eq()

דוגמאות map()

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

הסבר על דוגמאות map()

דוגמאות not()

מוסיף מסגרת לאלמנטים מסוג div שלא ירוקים ולא כחולים.

הסבר על דוגמאות not()

דוגמאות slice()

באופן אקראי מוסיף צבע רקע לאלמנטים div.

הסבר על דוגמאות slice()

דוגמאות closest()

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

הסבר על דוגמאות closest()

דוגמאות contents()

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

הסבר על דוגמאות contents()

דוגמאות nextAll()

מאתר כל האלמנטים מסוג div אחרי ראשון ונותן להם class.
מתאר כל הפסקאות אחרי ילד השני בתוך ה- body ונותן להם class.

הסבר על דוגמאות nextAll()

דוגמאות

מחפש offsetParent של פריט "A"

הסבר על דוגמאות

דוגמאות parents()

מחפש כל אלמנטים הורה של תג b.
תלחצו כדי למצוא כל אלמנטים הורים div של כל אלמנטים מסוג span.

הסבר על דוגמאות parents()

דוגמאות prevAll()

מזהה כל האלמנטים div לפני האחרון ומגדיר להם class.

הסבר על דוגמאות prevAll()

דוגמאות siblings()

מחפש אלמנטים קרובים ייחודיים עבור כל האלמנטים li בצבע צהוב בשלוש רשימות ( כולל אלמנטים אחרים li, אם הם מתאימים ).
מחפש כל האלמנטים קרובים עבור אלמנט div, שיש להם class «selected»

הסבר על דוגמאות siblings()

דוגמאות andSelf()

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

הסבר על דוגמאות andSelf()

דוגמאות end()

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

הסבר על דוגמאות end()

דוגמאות offset()

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

הסבר על דוגמאות offset()

דוגמאות offsetParent()

מחפש offsetParent של פריט "A".

הסבר על דוגמאות offsetParent()

דוגמאות position()

מקבל קואורדינטות של פסקה השניה:

הסבר על דוגמאות position()

דוגמאות scrollTop()

מקבל ערך scrollTop
מקבל scrollTop

הסבר על דוגמאות scrollTop()

דוגמאות scrollLeft()

מקבל ערך scrollLeft של פסקה.
מגדיר ערך scrollLeft עבור div.

הסבר על דוגמאות scrollLeft()

דוגמאות width()

מציג מספר ערכי רוחב. שימו לב, ערכים יכולים להיות קטנים יותר, מאשר היה צפוי, מכיוון שערכים הם מ- iframe. צבע צהוב מציג גוף של iframe.
בלחיצה מגדיר גובה של כל div ל- 30px וגם מחליף צבע רקע.

הסבר על דוגמאות width()

דוגמאות innerHeight()

מקבל ערך innerHeight של פסקה.

הסבר על דוגמאות innerHeight()

דוגמאות innerWidth()

מקבל ערך innerWidth של פסקה.

הסבר על דוגמאות innerWidth()

דוגמאות outerHeight()

מקבל ערך outerHeight של הפסקה.

הסבר על דוגמאות outerHeight()

דוגמאות outerWidth()

מקבל ערך outerWidth של פסקה.

הסבר על דוגמאות outerWidth()

דוגמאות size()

סופר אלמנטים div. תלחצו כדי להוסיף עוד.

הסבר על דוגמאות size()

דוגמאות selector

זיהוי של סלקטור.
איסוף אלמנטים אחרת

הסבר על דוגמאות selector

דוגמאות context

קובע את קונטקסט מדויק בשימוש.

הסבר על דוגמאות context

דוגמאות

הופך צבע של div עם אינדקס 2 לכחול על ידי הוספת class מסוים.

הסבר על דוגמאות

דוגמאות data()

מאחסן ואחרי זה מקבל ערך מאלמנט div.
מקבל נתונים מאלמנט בשם «blah».

הסבר על דוגמאות data()

דוגמאות removeData()

מגדיר נתונים עבור שני אלמנטים, ואחרי זה מוחק באחד מהם.

הסבר על דוגמאות removeData()

דוגמאות queue()

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

הסבר על דוגמאות queue()

דוגמאות dequeue()

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

הסבר על דוגמאות dequeue()

דוגמאות jQuery.param()

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

הסבר על דוגמאות jQuery.param()

דוגמאות serializeArray()

מקבל ערכים מטופס, מעבד אותם, ומוסיף אותם לאלמנט result
Get the values from a form, iterate through them, and append them to a results display.

הסבר על דוגמאות serializeArray()

דוגמאות jQuery.getScript()

מתבצעת טעינה דינמית והתאמה של תוספת חדשה של אנימצית צבע של jQuery.

הסבר על דוגמאות jQuery.getScript()

דוגמאות [attribute|=value]

מוצא את כל הקישורים עם תכונה hreflang שהיא אנגלית.

הסבר על דוגמאות [attribute|=value]

דוגמאות [attribute~=value]

מוצא כל השדות טקסט עם תכונה name, שמכילים מילה 'man' ומגדיר ערך עם טקסט כלשהו.

הסבר על דוגמאות [attribute~=value]

דוגמאות event.preventDefault()

מבטל פעולת ברירת המחדל (ניווט) של קישור.

הסבר על דוגמאות event.preventDefault()

דוגמאות event.target

מציג שם התג בלחיצה
מיישמת משלחת האירוע פשוטה: המטפל לחיצה הוסף לרשימה לא מסודרת, והילדים של הילדים של תג li מוסתרים. לחיצה על אחד הילדים li מחליפה הצגה שלהם (ראו toggle).

הסבר על דוגמאות event.target

דוגמאות event.pageX

הצג את מיקום העכבר ביחס לשולי מסך השמאלי והעליון (בתוך מסגרת).

הסבר על דוגמאות event.pageX

דוגמאות event.which

מציג איזה מפתחות נלחצו.

הסבר על דוגמאות event.which

דוגמאות event.timeStamp

מציג זמן שעבר מלחיצה אחרונה.

הסבר על דוגמאות event.timeStamp

דוגמאות event.isImmediatePropagationStopped()

בודק האם event.stopImmediatePropagation() היה מופעל אי פעם.

הסבר על דוגמאות event.isImmediatePropagationStopped()

דוגמאות event.isPropagationStopped()

בודק האם event.stopPropagation() הופעל

הסבר על דוגמאות event.isPropagationStopped()

דוגמאות event.result

מציג ערך קודם שהוחזר ממטפל

הסבר על דוגמאות event.result

דוגמאות event.stopImmediatePropagation()

מונע ממטפלי אירועים אחרים להיות מופעלים

הסבר על דוגמאות event.stopImmediatePropagation()

דוגמאות delay()

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

הסבר על דוגמאות delay()

דוגמאות detach()

מוחק כל הפסקאות מ-DOM

הסבר על דוגמאות detach()

דוגמאות first()

מדגיש אלמנט ראשון span בפסקה

הסבר על דוגמאות first()

דוגמאות focusin()

עוקב אחרי פוקוס בדף.

הסבר על דוגמאות focusin()

דוגמאות focusout()

מציג איבוד פוקוס בתוך פסקאות, שימו לב על ההבדל במדד focusout ומדד blur .

הסבר על דוגמאות focusout()

דוגמאות has()

בודק האם אלמנט נמצא בתוך אלמנט אחר.

הסבר על דוגמאות has()

דוגמאות last()

מדגיש אלמנט האחרון span בפסקה.

הסבר על דוגמאות last()

דוגמאות nextUntil()

מוצא אחים שבאים אחרי <dt id="term-2"> עד ל-<dt> הבא ונותן להם רקע אדום.

הסבר על דוגמאות nextUntil()

דוגמאות parentsUntil()

מוצא כל האבותיהם של <li class="item-a"> עד <ul class="level-1"> ונותן להם צבע רקע אדום.

הסבר על דוגמאות parentsUntil()

דוגמאות prevUntil()

מחפש אחים שקודמים ל-<dt id="term-2"> עד <dt> ונותן להם צבע רקע אדום.

הסבר על דוגמאות prevUntil()

דוגמאות toArray()

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

הסבר על דוגמאות toArray()

דוגמאות unwrap()

עוטף / מסיר מעטפה של DIV מסביב כל הפסקאות

הסבר על דוגמאות unwrap()

דוגמאות delegate()

לחצו על הפסקה כדי להוסיף עוד אחת. שימו לב .delegate() מצרף אירוע לחיצה על כל הפסקאות - וגם על חדשות.
גם ניתן לקשר אירועי משתמש.

הסבר על דוגמאות delegate()

דוגמאות undelegate()

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

הסבר על דוגמאות undelegate()

דוגמאות מחליף את כל הפסקאות עם אלמנטים div רייקים.

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

הסבר על דוגמאות מחליף את כל הפסקאות עם אלמנטים div רייקים.

דוגמאות ניווט

הצגה פשוטה של תת-תפריט בהצבעה
הצגה פשוטה של תת-תפריט בהצבעה: שיטה שניה עם פחות אנימציה

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

דוגמאות event.namespace

קובע אירוע מרחב שמות שבשימוש

הסבר על דוגמאות event.namespace

דוגמאות jQuery.isWindow()

מגלה האם פרמטר הוא חלון

הסבר על דוגמאות jQuery.isWindow()

דוגמאות jQuery.type()

קובע אם פרמטר הוא RegExp

הסבר על דוגמאות jQuery.type()

דוגמאות jQuery.fx.interval

גורם לאנימציה להתבצע עם פחות פריימים

הסבר על דוגמאות jQuery.fx.interval

דוגמאות fadeToggle()

מציג או מסתיר פסקה ראשונה, מסיים אנימציה תוך 600 אלפיות השניה באמצעות הקלת לינארית. מציג או מסתיר פסקה אחרונה תוך 200 אלפיות השניה, מכניס הודעה "finished" עם סיום.

הסבר על דוגמאות fadeToggle()

דוגמאות jQuery.hasData()

מגדיר נתונים על אלמנט ומציג תוצאות של hasData

הסבר על דוגמאות jQuery.hasData()

דוגמאות prop()

מציג מאפיין checked ותכונה של תיבת סימון ברגע שינוי.
מכבה את כל התיבות סימון בדף.

הסבר על דוגמאות prop()

דוגמאות promise()

פותר Promise שמוחזר כאשר כל האנימציות הסתיימו (כולל אלה שהתחילו בפונקציה של קריאה חוזרת או הוספו מאוחר יותר):
פותר Promise שמוחזר באמצעות $.when() (שיטה .promise() מאפשרת לעשות זאת עם אוסף jQuery):

הסבר על דוגמאות promise()

דוגמאות removeProp()

מגדיר מאפיין על הפסקה, ואחרי זה מוחק אותו