close

Basic Syntax of jQuery - Selecting, Manipulating, and Effects

The basic syntax of jQuery involves using a selector (CSS-style selector) and methods to manipulate the selected elements. Here are some basic syntax examples of jQuery:

 

Selecting elements

  • Select elements by HTML tag name: $("tagname") Example: $("p") selects all <p> elements on the page.

  • Select elements by CSS class: $(".classname") Example: $(".myClass") selects all elements with the class "myClass".

  • Select elements by ID: $("#idname") Example: $("#myElement") selects the element with the ID "myElement".

  • Select elements by attribute: $("[attribute='value']") Example: $("[data-type='button']") selects elements with the attribute data-type set to "button".

  • Combining selections: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulating selected elements

  • Changing the content of an element: .html(), .text() Example: $("#myElement").html("New content") sets the HTML content of the element with ID "myElement".

  • Modifying element attributes: .attr(), .prop() Example: $("img").attr("src", "newimage.jpg") changes the src attribute of all <img> elements.

  • Manipulating CSS classes of an element: .addClass(), .removeClass(), .toggleClass() Example: $("#myElement").addClass("highlight") adds the class "highlight" to the element with ID "myElement".

  • Hiding/showing elements: .hide(), .show(), .toggle() Example: $(".myClass").hide() hides all elements with the class "myClass".

  • Handling events on elements: .click(), .hover(), .submit(), ... Example: $("button").click(function() { ... }) registers a click event handler

 

Working with collections of element

  • Iterating through a collection: .each() Example: $("li").each(function() { ... }) iterates over each <li> element on the page.

  • Filtering a collection: .filter(), .not() Example: $("div").filter(".myClass") filters the <div> elements and selects those with the class "myClass".

  • Inserting elements into a collection: .append(), .prepend(), .after(), .before() Example: $("#myElement").append("<p>New paragraph</p>") appends a new <p> element to the element with ID "myElement".

 

Effects and animations

  • Performing fadeIn/fadeOut effects: .fadeIn(), .fadeOut() Example: $("#myElement").fadeIn(1000) fades in the element with ID "myElement" over a duration of 1 second.

  • Performing slideUp/slideDown effects: .slideUp(), .slideDown() Example: $(".myClass").slideUp(500) slides up all elements with the class "myClass" over a duration of 0.5 seconds.

  • Performing custom animations: .animate() Example: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animates the element with ID "myElement" by changing its left position and opacity.

 

These examples demonstrate how to use different aspects of the basic syntax of jQuery to select elements, manipulate their properties, and apply effects or animations. jQuery offers a rich set of methods and functionalities to simplify and enhance web development tasks.