Scribd
Upload
17 views

J Query

The document describes jQuery, a lightweight JavaScript library that makes HTML document traversal, manipulation, event handling, animation, and Ajax interactions easier. It discusses how to include jQuery in a webpage from a CDN or by downloading, and some basic syntax like using $() to select elements and perform actions on them. It also provides examples of common jQuery methods for DOM manipulation, CSS styling, sliding and fading effects.

Uploaded by

P Jain
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

J Query

The document describes jQuery, a lightweight JavaScript library that makes HTML document traversal, manipulation, event handling, animation, and Ajax interactions easier. It discusses how to include jQuery in a webpage from a CDN or by downloading, and some basic syntax like using $() to select elements and perform actions on them. It also provides examples of common jQuery methods for DOM manipulation, CSS styling, sliding and fading effects.

Uploaded by

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

 jQuery is a small and lightweight JavaScript

library.
 jQuery is cross-platform.
 jQuery means "write less do more".
 jQuery is a fast, small, and feature-rich JavaScript
library. It makes things like HTML document
traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-
to-use API that works across a multitude of
browsers. With a combination of versatility and
extensibility, jQuery has changed the way that
millions of people write JavaScript.
 Download the jQuery library from jQuery.com
 Include jQuery from a CDN, like Google
Download from
https://code.jquery.com/jquery-3.6.0.min.js

(Open link in browser and right click-> save as)

<head>
<script src="jquery-3.6.0.min.js"></script>
</head>
The jQuery CDN is a way to include jQuery in
your website without actually downloading and
keeping it your website's folder.

<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/3.6.0/jquery.min.js"></script>
</head>
 Reduced server load
 Faster content delivery(browser caching)
 Constant availability
 Better traffic management
 Syntax → $(selector).action()

 $ -> to access jQuery. Query selectors start


with the dollar sign and parentheses − $().
 selector -> to find the HTML elements
 Action() -> what action is to be performed
 Selectors are used to select one or more
HTML elements using jQuery.
 Once an element is selected then we can
perform various operations on that selected
element.
1 Tag Name
Represents a tag name available in the DOM. For
example $('p') selects all paragraphs <p> in the document.

2 Tag ID
Represents a tag available with the given ID in the DOM. For
example $('#any-id') selects the single element in the
document that has an ID of any-id.

3 Tag Class
Represents a tag available with the given class in the DOM. For
example $('.any-class') selects all elements in the document
that have a class of any-class.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
></script>
</head>
<body>
<h1>This is first paragraph.</h1>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("h1").css("font-size", "70px");
$("h1").css("color", "red");
});
</script>
</body>
</html>
jQuery DOM manipulation
text() - Sets or returns the text content of
selected elements
html() - Sets or returns the content of selected
elements (including HTML markup)
val() - Sets or returns the value of form fields
attr() - This method sets or returns attributes
and values of the selected elements.

removeAttr() – This method removes one or


more attributes from the selected elements.
 append() - Inserts content at the end of the
selected elements
 prepend() - Inserts content at the beginning
of the selected elements
 after() - Inserts content after the selected
elements
 before() - Inserts content before the selected
elements
To remove elements and content, there are
mainly two jQuery methods:
 remove() - Removes the selected element
(and its child elements)
 empty() - Removes the child elements from
the selected element
jQuery has several methods for CSS manipulation. We
will look at the following methods:
 addClass() - Adds one or more classes to the
selected elements
 removeClass() - Removes one or more classes from
the selected elements
 toggleClass() - Toggles between adding/removing
classes from the selected elements
 css() - Sets or returns the style attribute
jQuery has the following slide methods:
 slideDown()

 slideUp()

 slideToggle()
jQuery has the following fade methods:
 fadeIn()

 fadeOut()

 fadeToggle()

 fadeTo()

You might also like