The basic syntax of jQuery revolves around selecting HTML elements and performing actions on them. Here's the general structure:
javascript$(selector).action();
Let's break down each part:
$()
: This is the jQuery function. It's used to select one or more HTML elements from the DOM (Document Object Model). It accepts a CSS-style selector as an argument.
selector
: This is the CSS-style selector used to target HTML elements. You can select elements by their tag name, class, ID, attributes, or hierarchical relationships.
.
(dot): If the selector starts with a dot, it's targeting elements by class name.
#
(hash): If the selector starts with a hash, it's targeting elements by ID.
action()
: This is a method or function that performs an action on the selected element(s). It could be manipulating their properties, adding/removing classes, handling events, etc.
Here are a few examples:
Selecting Elements:
javascript$('p') // Selects all <p> elements
$('.myClass') // Selects all elements with class "myClass"
$('#myId') // Selects the element with ID "myId"
Manipulating Elements:
javascript$('p').hide() // Hides all <p> elements
$('.myClass').addClass('highlight') // Adds the class "highlight" to elements with class "myClass"
$('#myId').text('New text') // Sets the text content of the element with ID "myId" to "New text"
Event Handling:
javascript$('button').click(function() {
// Code to execute when a <button> is clicked
});
Chaining:
javascript$('p').hide().addClass('highlight').fadeIn(); // Hides <p> elements, adds class
Thanks for learning