<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Alternatively, you can download the jQuery library from the official website (https://jquery.com) and include it locally.
1. Selectors:
Selectors are a fundamental part of jQuery syntax and allow you to target specific HTML elements for manipulation. jQuery provides a wide range of selectors that mimic CSS selectors, such as element selectors, class selectors, ID selectors, attribute selectors, and more. Here are a few examples:
- Selecting an element by its tag name:
$('p') // Selects all <p> elements
- Selecting an element by its class:
$('.my-class') // Selects all elements with the class "my-class"
- Selecting an element by its ID:
$('#my-id') // Selects the element with the ID "my-id"
DOM Manipulation:
Once you have selected the desired elements using jQuery selectors, you can manipulate them in various ways. Here are some common DOM manipulation method
- Changing the content of an element:
$('.my-class').text('New content') // Changes the text content of elements with the class "my-class"
- Modifying element attributes:
$('img').attr('src', 'new-image.jpg') // Changes the source attribute of all <img> elements
- Appending new elements:
$('.my-class').append('<div>New element</div>') // Appends a new <div> element to elements with the class "my-class"
Event Handling:
jQuery simplifies event handling by providing an easy-to-use syntax. You can attach event handlers to selected elements and perform actions when events occur. Here's an example:
$('#my-button').click(function() {
alert('Button clicked!');
});
In the above code, a click event handler is attached to the element with the ID "my-button." When the button is clicked, an alert message will appear.
Animations and Effects:
jQuery includes a powerful set of animation and effect methods that allow you to create engaging and interactive web experiences. Here's an example of fading in an element:
$('.my-element').fadeIn(1000); // Fades in elements with the class "my-element" over 1 second
You can explore other methods such as slideUp(), slideDown(), animate(), etc., to add motion and visual effects to your web pages.
Conclusion:
jQuery's concise syntax and vast collection of methods make it an invaluable tool for web developers. This article has covered the basics of jQuery syntax, including selectors, DOM manipulation, event handling, and animations/effects. By mastering these fundamental concepts, you can unlock the full potential of jQuery and build dynamic and interactive web applications with ease. Happy coding!
Comments (0)