Scribd
Upload
38 views

JQuery Documentation

Uploaded by

heyaaru2000
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views

JQuery Documentation

Uploaded by

heyaaru2000
Copyright
© © All Rights Reserved
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