Scribd
Upload
3 views

Basic JQuery Syntax

Uploaded by

armar abdul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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