Οδηγός jQuery

Δωρεάν

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

Selectors

$('#id')

Select an element by its id

$('.class')

Select all elements with a class

$('div')

Select all elements of a tag name

$('*')

Select every element in the page

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

Select by an attribute value

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

Attribute starts-with selector

$('ul li:first')

First matched element

$('ul li:last')

Last matched element

$('tr:eq(2)')

Element at a zero-based index

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

Exclude elements matching a selector

$(':checked')

All checked checkboxes/radios

$('div:visible')

Only currently visible elements

$('ul li')

Descendant combinator

$('ul > li')

Direct child combinator

Document ready & DOM

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

Run code once the DOM is ready

$(document).ready(fn)

Explicit document-ready handler

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

Run after all assets have loaded

$(this)

Wrap the current context element

$(el)

Wrap a raw DOM node in jQuery

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

Create a new element from HTML

$('#box')[0]

Get the underlying DOM node

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

Get the DOM node via .get()

$('.item').length

Count the matched elements

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

Test a selector against the set

DOM manipulation

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

Set the inner HTML

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

Set the text content (escaped)

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

Set a form field value

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

Insert content at the end

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

Insert content at the start

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

Insert content before the element

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

Insert content after the element

$('#box').remove()

Remove the element from the DOM

$('#box').empty()

Remove all child nodes

$('#box').clone()

Create a copy of the element

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

Wrap the element in new HTML

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

Replace the element entirely

Attributes & CSS

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

Get an attribute value

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

Set an attribute value

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

Get a DOM property (checked/disabled)

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

Set a DOM property

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

Remove an attribute

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

Add a CSS class

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

Remove a CSS class

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

Toggle a CSS class on/off

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

Test if a class is present

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

Set a single CSS property

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

Set multiple CSS properties

$('#box').width()

Get the computed width in pixels

$('#box').height()

Get the computed height in pixels

Events

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

Attach an event handler

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

Detach event handlers

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

Shorthand click handler

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

Handle form submission

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

Handle value changes

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

Handle key-up in a field

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

Delegated event for dynamic children

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

Programmatically fire an event

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

Run a handler at most once

e.preventDefault()

Stop the default browser action

e.stopPropagation()

Stop the event from bubbling

e.target

The element that triggered the event

Effects & animation

$('#box').show()

Display a hidden element

$('#box').hide()

Hide an element

$('#box').toggle()

Toggle visibility

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

Fade an element in

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

Fade an element out

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

Fade to a given opacity

$('#box').slideUp()

Slide an element up (collapse)

$('#box').slideDown()

Slide an element down (expand)

$('#box').slideToggle()

Toggle a slide animation

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

Animate CSS properties

$('#box').stop()

Stop the current animation

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

Delay the next queued effect

Traversing

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

Find descendants matching a selector

$('#box').parent()

Get the direct parent

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

Get all ancestors matching a selector

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

Nearest matching ancestor (or self)

$('#box').children()

Get the direct children

$('#box').siblings()

Get sibling elements

$('#box').next()

Get the next sibling

$('#box').prev()

Get the previous sibling

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

Iterate over each matched element

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

Reduce the set by a selector

$('.item').first()

Reduce the set to the first element

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

Reduce the set to one index

AJAX

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

Full-control AJAX request

$.get('/api', fn)

Shorthand HTTP GET request

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

Shorthand HTTP POST request

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

GET request expecting JSON

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

Load HTML into an element

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

Set the expected response type

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

Send request parameters

.done(function (res) {})

Run a callback on success

.fail(function (err) {})

Run a callback on failure

.always(function () {})

Run a callback after completion

$.ajaxSetup({headers: {}})

Set defaults for all requests

Forms

$('#form').serialize()

Encode form data as a query string

$('#form').serializeArray()

Encode form data as an array

$('#name').val()

Read a field value

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

Write a field value

$(':input')

Select all form input elements

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

Test if a checkbox is checked

$('#sel option:selected')

Get the selected option

$('#in').focus()

Move focus to a field

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

Handle the form submit event

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

Disable a form control

Utilities

$.each(arr, fn)

Iterate over an array or object

$.map(arr, fn)

Build a new array from each item

$.grep(arr, fn)

Filter an array by a predicate

$.extend({}, a, b)

Merge objects into a target

$.trim(' hi ')

Trim leading/trailing whitespace

$.inArray(2, arr)

Find an item index in an array

$.isArray(x)

Test whether a value is an array

$.isFunction(x)

Test whether a value is a function

$.parseJSON(str)

Parse a JSON string into an object

$.now()

Current timestamp in milliseconds

$.type(x)

Get the internal type of a value

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

Σχετικά με το Οδηγός jQuery

Αυτό το φύλλο εξαπάτησης για jQuery είναι μια συμπαγής αναφορά στη βιβλιοθήκη που εξακολουθεί να τροφοδοτεί ένα τεράστιο μερίδιο υπαρχόντων ιστότοπων: επιλογείς, document ready και βασικά DOM, χειρισμός DOM, χαρακτηριστικά και CSS, συμβάντα, εφέ και κίνηση, διάσχιση, AJAX, φόρμες, και βοηθητικά προγράμματα.

Αν συντηρείτε παλαιά front-ends, plugins ή παλιότερα θέματα CMS, η ευχέρεια στο jQuery παραμένει μια πρακτική δεξιότητα. Κάθε γραμμή συνδυάζει μια κλήση μεθόδου με μια σύντομη περιγραφή, ώστε να θυμάστε την ακριβή υπογραφή για ανάθεση συμβάντων, αλυσιδωτή διάσχιση ή αίτημα AJAX χωρίς να ψάχνετε παλιά τεκμηρίωση.

Το φύλλο είναι δωρεάν και πλήρως από την πλευρά του client. Φιλτράρετε τις μεθόδους ζωντανά με το πλαίσιο αναζήτησης, μεταβείτε μεταξύ ενοτήτων από τον κολλημένο πίνακα περιεχομένων, αντιγράψτε οποιοδήποτε απόσπασμα με ένα κλικ και εκτυπώστε τη σελίδα όταν βρίσκεστε βαθιά σε μια αναδιαμόρφωση παλαιού κώδικα.

Πώς να χρησιμοποιήσετε το Οδηγός jQuery

Εξετάστε τις ενότητες, από τους Επιλογείς και το Document ready & DOM έως τη Διάσχιση, το AJAX και τα Βοηθητικά προγράμματα.
Αναζητήστε μια μέθοδο όπως on, closest ή ajax για ζωντανό φιλτράρισμα του φύλλου.
Μεταβείτε σε μια ενότητα όπως τα Εφέ & κίνηση μέσω της κολλημένης πλαϊνής μπάρας.
Κάντε κλικ σε ένα απόσπασμα ή στο εικονίδιο αντιγραφής του για να αντιγράψετε την κλήση jQuery στον κώδικά σας.
Εκτυπώστε το φύλλο για αναφορά εκτός σύνδεσης ενώ εργάζεστε σε παλαιά έργα.

Συχνές ερωτήσεις

Δέκα ενότητες: επιλογείς, document ready και βασικά DOM, χειρισμός DOM, χαρακτηριστικά και CSS, συμβάντα, εφέ και κίνηση, διάσχιση, AJAX, φόρμες, και βοηθητικές συναρτήσεις.

Για νέα έργα οι περισσότερες ομάδες χρησιμοποιούν vanilla JavaScript, αλλά ένας τεράστιος όγκος κώδικα παραγωγής, plugins και θεμάτων CMS εξακολουθεί να εκτελεί jQuery — αυτό το φύλλο στοχεύει στη συντήρηση και μετάβαση αυτού του κώδικα με σιγουριά.

Ναι. Η ενότητα συμβάντων περιλαμβάνει την ανατεθειμένη μορφή του .on() μαζί με σύνδεση, αποσύνδεση και ενεργοποίηση — το μοτίβο που χρειάζεστε περισσότερο όταν εργάζεστε με στοιχεία που εισάγονται δυναμικά.

Ναι. Κάντε κλικ σε οποιοδήποτε απόσπασμα, ή στο εικονίδιο αντιγραφής στη γραμμή του, και η κλήση αντιγράφεται στο πρόχειρό σας έτοιμη για επικόλληση.

Ναι, εντελώς δωρεάν — με δυνατότητα αναζήτησης, εκτυπώσιμη και αποδίδεται στο πρόγραμμα περιήγησής σας χωρίς εγγραφή.

Δημοφιλείς αναζητήσεις

jquery cheat sheet jquery selectors jquery ajax syntax jquery event methods jquery dom manipulation jquery effects and animation jquery traversing methods jquery reference

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

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

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

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

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

Οδηγός jQuery

Selectors

Document ready & DOM

DOM manipulation

Attributes & CSS

Events

Effects & animation

Traversing

AJAX

Forms

Utilities

Σχετικά με το Οδηγός jQuery

Πώς να χρησιμοποιήσετε το Οδηγός jQuery

Συχνές ερωτήσεις

Τι καλύπτει το φύλλο εξαπάτησης για jQuery;

Αξίζει ακόμα να ανατρέχω στο jQuery;

Καλύπτει την ανάθεση συμβάντων;

Μπορώ να αντιγράψω κλήσεις μεθόδων με ένα κλικ;

Είναι δωρεάν η αναφορά jQuery;

Σχετικά Εργαλεία

Δημοφιλείς αναζητήσεις

Ενσωματώστε αυτό το εργαλείο