Basic jQuery Syntax
The general syntax of jQuery is:
$(selector).action()
$: The jQuery function, often referred to as the jQuery object.
selector: A string that specifies the element(s) you want to select. It follows the
CSS selector syntax.
action(): A method or action you want to perform on the selected elements.
Examples of jQuery Syntax
1. Selecting Elements
// Select all paragraphs
$('p')
// Select an element with id="myElement"
$('#myElement')
// Select elements with class="myClass"
$('.myClass')
// Select all elements with a specific attribute
$('[attribute=value]')
2. Manipulating Content
// Change the text of an element
$('#myElement').text('New Text')
// Set HTML content of an element
$('#myElement').html('<p>New HTML Content</p>')
// Get the value of an input field
var value = $('#myInput').val()
// Set the value of an input field
$('#myInput').val('New Value')
3. Adding/Removing Elements
// Append content to an element
$('#myElement').append('<p>Appended Content</p>')
// Prepend content to an element
$('#myElement').prepend('<p>Prepended Content</p>')
// Remove an element
$('#myElement').remove()
4. Styling Elements
// Add CSS styles to an element
$('#myElement').css('color', 'blue')
// Add multiple CSS styles
$('#myElement').css({
'color': 'blue',
'font-size': '16px'
})
5. Handling Events
// Attach a click event handler
$('#myButton').click(function() {
alert('Button clicked!')
})
// Attach a hover event handler
$('#myElement').hover(
function() { $(this).css('background-color', 'yellow') }, // Mouse enter
function() { $(this).css('background-color', '') } // Mouse leave
)
6. Animations
// Fade in an element
$('#myElement').fadeIn()
// Fade out an element
$('#myElement').fadeOut()
// Slide up an element
$('#myElement').slideUp()
// Slide down an element
$('#myElement').slideDown()
// Animate custom properties
$('#myElement').animate({
'width': '200px',
'height': '200px'
}, 1000) // duration in milliseconds
7. AJAX Requests
// Perform a GET request
$.get('url', function(data) {
console.log(data)
})
// Perform a POST request
$.post('url', { key: 'value' }, function(data) {
console.log(data)
})
// Perform a full AJAX request
$.ajax({
url: 'url',
type: 'GET',
success: function(data) {
console.log(data)
},
error: function(xhr, status, error) {
console.error(error)
}
})
Chaining
jQuery allows for method chaining, where multiple methods can be called on the same
jQuery object in a single line:
$('#myElement').css('color', 'blue').slideUp().fadeIn()
Utility Functions
jQuery also provides utility functions that are not directly related to DOM
manipulation:
// Check if an element is hidden
$('#myElement').is(':hidden')
// Get the length of a jQuery object
var count = $('p').length
// Iterate over a set of elements
$('p').each(function() {
console.log($(this).text())
})
