Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
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
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
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