Scribd
Upload
21 views

J Query

Uploaded by

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

J Query

Uploaded by

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

What is jQuery

 jQuery is a small and lightweight JavaScript


library.
 jQuery is cross-platform.
 jQuery means "write less do more".
Adding jQuery
 Download the jQuery library from jQuery.com
 Include jQuery from a CDN, like Google
Download the jQuery library
Download from
https://code.jquery.com/jquery-3.7.0.min.js

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

<head>
<script src="jquery-3.7.0.min.js"></script>
</head>
Include jQuery from a CDN
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.7.0/jquery.min.js"></
script>
</head>
Benefits of jQuery CDN
 Reduced server load
 Faster content delivery(browser caching)
 Constant availability
 Better traffic management
Syntax
 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
jQuery selectors
 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.
jQuery selectors
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.
jQuery Example
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></
script>
</head>
<body>
<h1>This is first paragraph.</h1>

<script type="text/javascript">
$(document).ready(function(){
$("h1").css("font-size","70px");
$("h1").css("color","red");
});

</script>
</body>
</html>
jQuery DOM manipulation
jQuery get(to get or set content)
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
jQuery attr()
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.
Inserting HTML content
 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
Removing content
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


Css manipulation
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 Effects
jQuery has the following slide methods:
 slideDown()

 slideUp()

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

 fadeOut()

 fadeToggle()

 fadeTo()

You might also like