Οδηγός jQuery

Δωρεάν

Ένας οδηγός αναφοράς jQuery με δυνατότητα αναζήτησης και εκτύπωσης — επιλογείς, χειρισμός DOM, συμβάντα, εφέ, διάσχιση, AJAX και βοηθήματα φορμών. Δωρεάν.

Επιλογείς (selectors)

$('#id')

Επιλογή στοιχείου με το id του

$('.class')

Επιλογή όλων των στοιχείων με μια class

$('div')

Επιλογή όλων των στοιχείων ενός tag name

$('*')

Επιλογή κάθε στοιχείου στη σελίδα

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

Επιλογή με τιμή attribute

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

Selector attribute που ξεκινά με

$('ul li:first')

Πρώτο αντιστοιχισμένο στοιχείο

$('ul li:last')

Τελευταίο αντιστοιχισμένο στοιχείο

$('tr:eq(2)')

Στοιχείο σε zero-based index

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

Εξαίρεση στοιχείων που ταιριάζουν σε selector

$(':checked')

Όλα τα επιλεγμένα checkboxes/radios

$('div:visible')

Μόνο τα τρέχοντα ορατά στοιχεία

$('ul li')

Descendant combinator

$('ul > li')

Direct child combinator

Document ready & DOM

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

Εκτέλεση κώδικα μόλις είναι έτοιμο το DOM

$(document).ready(fn)

Ρητός document-ready handler

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

Εκτέλεση αφού φορτωθούν όλα τα assets

$(this)

Τύλιγμα του τρέχοντος context στοιχείου

$(el)

Τύλιγμα raw DOM κόμβου σε jQuery

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

Δημιουργία νέου στοιχείου από HTML

$('#box')[0]

Λήψη του υποκείμενου DOM κόμβου

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

Λήψη του DOM κόμβου μέσω .get()

$('.item').length

Καταμέτρηση αντιστοιχισμένων στοιχείων

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

Έλεγχος selector έναντι του set

Χειρισμός DOM

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

Ορισμός του inner 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()

Αφαίρεση όλων των child κόμβων

$('#box').clone()

Δημιουργία αντιγράφου του στοιχείου

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

Τύλιγμα στοιχείου σε νέο HTML

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

Πλήρης αντικατάσταση του στοιχείου

Attributes & CSS

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

Λήψη τιμής attribute

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

Ορισμός τιμής attribute

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

Λήψη DOM property (checked/disabled)

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

Ορισμός DOM property

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

Αφαίρεση attribute

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

Προσθήκη CSS class

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

Αφαίρεση CSS class

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

Εναλλαγή CSS class on/off

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

Έλεγχος αν υπάρχει μια class

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

Ορισμός μίας CSS ιδιότητας

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

Ορισμός πολλαπλών CSS ιδιοτήτων

$('#box').width()

Λήψη υπολογισμένου πλάτους σε pixels

$('#box').height()

Λήψη υπολογισμένου ύψους σε pixels

Γεγονότα

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

Σύνδεση event handler

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

Αποσύνδεση event handlers

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

Συνοπτικός click handler

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

Χειρισμός υποβολής φόρμας

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

Χειρισμός αλλαγών τιμής

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

Χειρισμός key-up σε πεδίο

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

Delegated event για δυναμικά children

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

Προγραμματική ενεργοποίηση event

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

Εκτέλεση handler το πολύ μία φορά

e.preventDefault()

Διακοπή προεπιλεγμένης ενέργειας browser

e.stopPropagation()

Διακοπή bubbling του event

e.target

Το στοιχείο που ενεργοποίησε το event

Εφέ & animation

$('#box').show()

Εμφάνιση κρυμμένου στοιχείου

$('#box').hide()

Απόκρυψη στοιχείου

$('#box').toggle()

Εναλλαγή ορατότητας

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

Σταδιακή εμφάνιση στοιχείου

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

Σταδιακή απόκρυψη στοιχείου

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

Fade σε δεδομένη διαφάνεια

$('#box').slideUp()

Slide στοιχείου προς τα πάνω (collapse)

$('#box').slideDown()

Slide στοιχείου προς τα κάτω (expand)

$('#box').slideToggle()

Εναλλαγή slide animation

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

Animation CSS ιδιοτήτων

$('#box').stop()

Διακοπή τρέχοντος animation

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

Καθυστέρηση του επόμενου εφέ στην ουρά

Διάσχιση

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

Εύρεση descendants που ταιριάζουν σε selector

$('#box').parent()

Λήψη του άμεσου γονέα

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

Λήψη όλων των ancestors που ταιριάζουν σε selector

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

Πλησιέστερος ancestor που ταιριάζει (ή ο ίδιος)

$('#box').children()

Λήψη των άμεσων children

$('#box').siblings()

Λήψη sibling στοιχείων

$('#box').next()

Λήψη του επόμενου sibling

$('#box').prev()

Λήψη του προηγούμενου sibling

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

Επανάληψη σε κάθε αντιστοιχισμένο στοιχείο

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

Περιορισμός του set με selector

$('.item').first()

Περιορισμός του set στο πρώτο στοιχείο

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

Περιορισμός του set σε ένα index

AJAX

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

AJAX request με πλήρη έλεγχο

$.get('/api', fn)

Συνοπτικό HTTP GET request

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

Συνοπτικό HTTP POST request

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

GET request που αναμένει JSON

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

Φόρτωση HTML σε στοιχείο

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

Ορισμός αναμενόμενου τύπου απόκρισης

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

Αποστολή παραμέτρων request

.done(function (res) {})

Εκτέλεση callback σε επιτυχία

.fail(function (err) {})

Εκτέλεση callback σε αποτυχία

.always(function () {})

Εκτέλεση callback μετά την ολοκλήρωση

$.ajaxSetup({headers: {}})

Ορισμός defaults για όλα τα requests

Φόρμες

$('#form').serialize()

Κωδικοποίηση δεδομένων φόρμας ως query string

$('#form').serializeArray()

Κωδικοποίηση δεδομένων φόρμας ως array

$('#name').val()

Ανάγνωση τιμής πεδίου

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

Εγγραφή τιμής πεδίου

$(':input')

Επιλογή όλων των input στοιχείων φόρμας

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

Έλεγχος αν ένα checkbox είναι checked

$('#sel option:selected')

Λήψη της επιλεγμένης option

$('#in').focus()

Μετακίνηση εστίασης σε πεδίο

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

Χειρισμός event submit της φόρμας

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

Απενεργοποίηση στοιχείου ελέγχου φόρμας

Βοηθητικά

$.each(arr, fn)

Επανάληψη σε array ή object

$.map(arr, fn)

Δημιουργία νέου array από κάθε στοιχείο

$.grep(arr, fn)

Φιλτράρισμα array με predicate

$.extend({}, a, b)

Συγχώνευση objects σε έναν στόχο

$.trim(' hi ')

Trim αρχικού/τελικού whitespace

$.inArray(2, arr)

Εύρεση index στοιχείου σε array

$.isArray(x)

Έλεγχος αν μια τιμή είναι array

$.isFunction(x)

Έλεγχος αν μια τιμή είναι function

$.parseJSON(str)

Ανάλυση JSON string σε object

$.now()

Τρέχον timestamp σε milliseconds

$.type(x)

Λήψη του εσωτερικού τύπου μιας τιμής

Καμία καταχώριση δεν ταιριάζει με «:q».

Χρειάζεστε βοήθεια;

Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.

Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.

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