דף עזר jQuery

כל הכלים

חינם

מדריך jQuery לחיפוש והדפסה — בוררים, מניפולציה של DOM, אירועים, אפקטים, ניווט, AJAX ועוזרי טפסים. בחינם.

Selectors

$('#id')

בחירת אלמנט לפי ה-id שלו

$('.class')

בחירת כל האלמנטים עם class

$('div')

בחירת כל האלמנטים של שם תג

$('*')

בחירת כל אלמנט בעמוד

$('[name="email"]')

בחירה לפי ערך מאפיין

$('a[href^="https"]')

selector של מאפיין שמתחיל ב-

$('ul li:first')

האלמנט התואם הראשון

$('ul li:last')

האלמנט התואם האחרון

$('tr:eq(2)')

אלמנט באינדקס מבוסס אפס

$('li:not(.done)')

אי-הכללת אלמנטים התואמים selector

$(':checked')

כל ה-checkboxes/radios המסומנים

$('div:visible')

רק אלמנטים נראים כעת

$('ul li')

מקנן צאצא

$('ul > li')

מקנן ילד ישיר

מוכנות מסמך ו-DOM

$(function () { /* ... */ });

הרצת קוד ברגע שה-DOM מוכן

$(document).ready(fn)

מטפל document-ready מפורש

$(window).on('load', fn)

הרצה לאחר שכל המשאבים נטענו

$(this)

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

$(el)

עטיפת צומת DOM גולמי ב-jQuery

$('<div class="box"></div>')

יצירת אלמנט חדש מ-HTML

$('#box')[0]

קבלת צומת ה-DOM הבסיסי

$('#box').get(0)

קבלת צומת ה-DOM דרך .get()

$('.item').length

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

$('#box').is(':visible')

בדיקת selector מול הקבוצה

מניפולציית DOM

$('#box').html('<b>Hi</b>')

הגדרת ה-HTML הפנימי

$('#box').text('Hello')

הגדרת תוכן הטקסט (escaped)

$('#name').val('Ada')

הגדרת ערך שדה טופס

$('#list').append('<li>x</li>')

הוספת תוכן בסוף

$('#list').prepend('<li>x</li>')

הוספת תוכן בתחילה

$('#box').before('<hr>')

הוספת תוכן לפני האלמנט

$('#box').after('<hr>')

הוספת תוכן אחרי האלמנט

$('#box').remove()

הסרת האלמנט מה-DOM

$('#box').empty()

הסרת כל צמתי הילד

$('#box').clone()

יצירת עותק של האלמנט

$('#box').wrap('<div>')

עטיפת האלמנט ב-HTML חדש

$('#box').replaceWith('<p>')

החלפת האלמנט כולו

מאפיינים ו-CSS

$('#img').attr('src')

קבלת ערך מאפיין

$('#img').attr('alt', 'Logo')

הגדרת ערך מאפיין

$('#cb').prop('checked')

קבלת מאפיין DOM (checked/disabled)

$('#cb').prop('checked', true)

הגדרת מאפיין DOM

$('#img').removeAttr('title')

הסרת מאפיין

$('.box').addClass('active')

הוספת class של CSS

$('.box').removeClass('active')

הסרת class של CSS

$('.box').toggleClass('open')

החלפת מצב class של CSS

$('.box').hasClass('active')

בדיקה אם class קיים

$('#box').css('color', 'red')

הגדרת מאפיין CSS בודד

$('#box').css({top: 0, left: 0})

הגדרת מספר מאפייני CSS

$('#box').width()

קבלת הרוחב המחושב בפיקסלים

$('#box').height()

קבלת הגובה המחושב בפיקסלים

אירועים

$('#btn').on('click', fn)

צירוף מטפל אירועים

$('#btn').off('click')

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

$('#btn').click(fn)

מטפל קליק מקוצר

$('#form').submit(fn)

טיפול בשליחת טופס

$('#sel').change(fn)

טיפול בשינויי ערך

$('#in').keyup(fn)

טיפול ב-key-up בשדה

$('#list').on('click', '.item', fn)

אירוע מואצל לילדים דינמיים

$('#btn').trigger('click')

הפעלת אירוע באופן תכנותי

$('#btn').one('click', fn)

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

e.preventDefault()

עצירת פעולת ברירת המחדל של הדפדפן

e.stopPropagation()

עצירת בעבוע האירוע

e.target

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

אפקטים והנפשה

$('#box').show()

הצגת אלמנט מוסתר

$('#box').hide()

הסתרת אלמנט

$('#box').toggle()

החלפת מצב נראות

$('#box').fadeIn(300)

הופעה הדרגתית של אלמנט

$('#box').fadeOut(300)

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

$('#box').fadeTo(300, 0.5)

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

$('#box').slideUp()

החלקת אלמנט מעלה (כיווץ)

$('#box').slideDown()

החלקת אלמנט מטה (הרחבה)

$('#box').slideToggle()

החלפת מצב הנפשת החלקה

$('#box').animate({left: 100})

הנפשת מאפייני CSS

$('#box').stop()

עצירת ההנפשה הנוכחית

$('#box').delay(500).fadeIn()

השהיית האפקט הבא בתור

מעבר

$('#box').find('.item')

מציאת צאצאים התואמים selector

$('#box').parent()

קבלת ההורה הישיר

$('#box').parents('.row')

קבלת כל האבות התואמים selector

$('#box').closest('.row')

האב התואם הקרוב ביותר (או עצמו)

$('#box').children()

קבלת הילדים הישירים

$('#box').siblings()

קבלת אלמנטים אחים

$('#box').next()

קבלת האח הבא

$('#box').prev()

קבלת האח הקודם

$('.item').each(fn)

מעבר על כל אלמנט תואם

$('.item').filter('.on')

צמצום הקבוצה לפי selector

$('.item').first()

צמצום הקבוצה לאלמנט הראשון

$('.item').eq(1)

צמצום הקבוצה לאינדקס אחד

AJAX

$.ajax({url: '/api', method: 'GET'})

בקשת AJAX בשליטה מלאה

$.get('/api', fn)

בקשת GET מקוצרת של HTTP

$.post('/api', data, fn)

בקשת POST מקוצרת של HTTP

$.getJSON('/api.json', fn)

בקשת GET המצפה ל-JSON

$('#box').load('/part.html')

טעינת HTML לתוך אלמנט

$.ajax({dataType: 'json'})

הגדרת סוג התגובה הצפוי

$.ajax({data: {q: 'x'}})

שליחת פרמטרי בקשה

.done(function (res) {})

הרצת callback בהצלחה

.fail(function (err) {})

הרצת callback בכישלון

.always(function () {})

הרצת callback לאחר השלמה

$.ajaxSetup({headers: {}})

הגדרת ברירות מחדל לכל הבקשות

טפסים

$('#form').serialize()

קידוד נתוני טופס כמחרוזת שאילתה

$('#form').serializeArray()

קידוד נתוני טופס כמערך

$('#name').val()

קריאת ערך שדה

$('#name').val('Ada')

כתיבת ערך שדה

$(':input')

בחירת כל אלמנטי הקלט בטופס

$('#cb').is(':checked')

בדיקה אם checkbox מסומן

$('#sel option:selected')

קבלת האפשרות הנבחרת

$('#in').focus()

העברת מיקוד לשדה

$('#form').on('submit', fn)

טיפול באירוע שליחת הטופס

$('#in').prop('disabled', true)

השבתת פקד טופס

כלי עזר

$.each(arr, fn)

מעבר על מערך או אובייקט

$.map(arr, fn)

בניית מערך חדש מכל פריט

$.grep(arr, fn)

סינון מערך לפי predicate

$.extend({}, a, b)

מיזוג אובייקטים לתוך יעד

$.trim(' hi ')

חיתוך רווח לבן בתחילה/בסוף

$.inArray(2, arr)

מציאת אינדקס פריט במערך

$.isArray(x)

בדיקה אם ערך הוא מערך

$.isFunction(x)

בדיקה אם ערך הוא פונקציה

$.parseJSON(str)

ניתוח מחרוזת JSON לאובייקט

$.now()

חותמת זמן נוכחית באלפיות שנייה

$.type(x)

קבלת הסוג הפנימי של ערך

אף רשומה אינה תואמת ל-„:q”.

צריך עזרה?

נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.

דיווח על בעיה

הוסיפו כלי חינמי זה לאתר שלכם — העתיקו והדביקו את הקוד שלהלן.

<iframe src="https://tweakee.com/he/studio/dev/jquery-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>