Scribd
Upload
21 views

J Query

Uploaded by

omkeshri21
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views

J Query

Uploaded by

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