Scribd
Upload
3 views

Basic JQuery Syntax

Uploaded by

armar abdul
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

Basic JQuery Syntax

Uploaded by

armar abdul
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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())
})

You might also like