Scribd
Upload
45 views4 pages

JQuery Documentation

Uploaded by

heyaaru2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views4 pages

JQuery Documentation

Uploaded by

heyaaru2000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Akshay P

JQuery Overview
jQuery is a popular library that simplifies the process of interacting with documents, handling
events, creating animations, and making AJAX requests. Here’s a summary of the key features and
methods I explored

Getting Started with jQuery


To use jQuery, you need to include it in your project either by linking to a CDN or by hosting the file
locally. This is done by adding the following script tag to your

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery Syntax
The basic syntax for jQuery is quite straightforward. It follows the pattern $(selector).action(), where
$(selector) is used to select elements and .action() specifies what to do with those elements. For

$(document).ready(function() {

$("p").text("Hello, World!");

});

Selectors
jQuery selectors are similar to CSS selectors and are used to find elements within the DOM. Common
selectors include:

 $("element") for selecting elements by tag name.

 $(".class") for selecting elements by class.

 $("#id") for selecting an element by ID.

$("#myId").css("color", "blue");

$(".myClass").hide();
Akshay P

Handling Events
jQuery makes it easy to handle various events such as clicks, mouse movements, and keyboard
inputs. Some commonly used event methods are:

 .click() for handling click events.

 .hover() for mouseenter and mouseleave events.

 .on() for attaching event handlers.

$("button").click(function() {

alert("Button clicked!");

});

Effects and Animations


jQuery offers a range of methods to create visual effects and animations:

 .hide() and .show() to toggle visibility.

 .fadeIn() and .fadeOut() for fading effects.

 .slideUp() and .slideDown() for sliding effects.

 .animate() for custom animations.

$("#myDiv").fadeIn("slow");

$("#myDiv").slideUp();

Callbacks and Chaining


Callbacks in jQuery are functions that are executed after a certain action is completed, which is
especially useful for animations. Chaining allows you to perform multiple actions in a single line of
code:

$("#myDiv").css("color", "red").slideUp(2000).slideDown(2000);
Akshay P

Manipulating and CSS


jQuery provides methods to manipulate and CSS:

 .() and .text() to get or set and text content.

 .append() and .prepend() to add content.

 .addClass(), .removeClass(), and .toggleClass() for managing CSS classes.:

$("#myDiv").("<p>New content</p>");

$("#myDiv").addClass("highlight");

Working with Dimensions


To get or set dimensions of elements, you can use:

 .width() and .height()

 .innerWidth() and .innerHeight() (includes padding)

 .outerWidth() and .outerHeight() (includes padding and border)

var width = $("#myDiv").width();

Traversing the DOM


jQuery provides methods to navigate through the DOM tree:

 Ancestors: .parent(), .parents(), .closest()

 Descendants: .children(), .find()

 Siblings: .siblings(), .next(), .prev()

 Filtering: .filter(), .not(), .is()

$("#myDiv").find(".child");
Akshay P

AJAX Requests
jQuery simplifies making AJAX requests:

 .ajax() for a general AJAX request.

 .get() and .post() for GET and POST requests.

 .load() for loading content into elements:

$.ajax({

url: "example.com/api",

method: "GET",

success: function(data) {

console.log(data);

});

Miscellaneous Features
 noConflict(): This method allows you to release control of the $ variable to avoid conflicts
with other libraries.

 Filters: Methods like .filter(), .not(), and .is() help in selecting elements based on specific
criteria.

Example:

jQuery.noConflict();

$("p").filter(".special");

This summary covers the essential aspects of jQuery, providing a clear understanding of how to use
the library effectively for various web development tasks.

You might also like