( ** Full Stack Masters Training: https://www.edureka.co/masters-program/full-stack-developer-training ** )
This PPT on jQuery will help you understand the basics of jQuery and you will also be able to create your own program using jQuery by the end of this PPT.
Follow us to never miss an update in the future.
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
4. What is JavaScript?
Web pages more interactive
Interpreted language
Interpreter
Runs on the client’s computer
JavaScript is a scripting language that allows you to implement complex things on web
pages.
6. What Is jQuery?
jQuery is a fast and concise JavaScript Library created by John Resig in 2006
Event Handling
Simplifies JavaScript Lightweight
Animations
8. Getting Started With jQuery!
Link to a CDNLocal Installation
Two ways to Install jQuery
9. The Document Object Model (DOM)
Document
HTML
Head
Title
jQuery Tutorial
Body
h1
p
jQuery basics
By Edureka
<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial</title>
</head>
<body>
<h1>jQuery Basics</h1>
<p>By Edureka</p>
</body>
</html>
10. jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s)
Syntax:
1 $(selector).action( )
• $ - selects and accesses a query
• html_element – denotes the html element that
needs to be manipulated
• action( ) - denotes a jQuery action to be performed
on the html element
Keywords :
• $ - selects and accesses a query
• selector– denotes the html element that needs to be
manipulated
• action( ) - denotes a jQuery action to be performed
on the html element
Keywords :
12. jQuery Methods – before( )
Syntax:
1 $(selector).before(content);
The jQuery before( ) method inserts the specified content before the selected elements.
• content - specifies the content to insert. Possible
values are html elements, objects and Dom elements
13. jQuery Methods – after( )
Syntax:
1 $(selector).after(content);
The jQuery after( ) method inserts the specified content after the selected elements.
• content - specifies the content to insert. Possible
values are html elements, objects and Dom elements
14. jQuery Methods – text( )
The jQuery text( ) method is used to set or return the text content of the selected elements.
• Return content - it returns the combined text content
of all matched elements without the HTML markup
• Set content - it overwrites the content of all matched
elements
Syntax:
1 $(selector).text( )
2 $(selector).text(content)
15. jQuery Methods – html( )
The jQuery html( ) method is used to set or return the html content of the selected elements.
• Return content - it returns the content of the first
matched element
• Set content - it overwrites the content of all matched
elements
Syntax:
1 $(selector).html( )
2 $(selector).html(content)
16. jQuery Methods – css( )
The jQuery css( ) method sets or returns one or more style properties for the selected elements.
• Return content - it returns the content of the first
matched element
• Set content - it overwrites the content of all matched
elements
Syntax:
1 $(selector).css(propertyname);
2 $(selector).css(propertyname, value);
17. jQuery Methods – attr( )
The jQuery attr( ) method is used to set or return attributes values of the selected elements.
• Return content - it returns the value of the first
matched element
• Set content – it sets one or more attribute/value pairs
of the set of matched elements
Syntax:
1 $(selector).attr(attribute)
2 $(selector).attr(attribute, value)
18. jQuery Methods – val( )
The jQuery val( ) method is used to set or return values of the selected elements.
• Return content - it returns the current value of the
first matched element
• Set content – it sets the value of the matched element
Syntax:
1 $(selector).val( )
2 $(selector).val(value)
19. jQuery Methods – addClass( )
Syntax:
1 $(selector).addClass(classname)
The jQuery addClass( ) method adds one or more class to the selected element.
• classname - specifies one or more class names which
you want to add
20. jQuery Methods – removeClass( )
Syntax:
1 $(selector).removeClass(classname)
The jQuery removeclass( ) method removes one or more class to the selected element
• classname - specifies one or more class names which
you want to add
21. jQuery Methods – toggleClass( )
Syntax:
1 $(selector).toggleClass(classname)
The jQuery toggleClass() method toggles between adding and removing one or more class to the
selected element.
• classname - specifies one or more class names which
you want to add
23. jQuery Events – click( )
The jQuery click( ) event is executed when the user clicks on the HTML element.
Syntax:
1 $(selector).click(function)
• When you click on an element, the click event occurs
• After the click event occurs it execute the click
(function)
24. jQuery Events – on( )
The jQuery on( ) method attaches one or more event handlers for the selected elements.
Syntax:
1 $(selector).on(event, function)
• on( ) binds an event handler to dynamically added
elements
• Similarly off( ) removes event handlers that were
attached with on( )
25. jQuery Events – keypress( )
The jQuery keypress ( ) event is executed when a character is entered.
Syntax:
1 $(selector).keypress(function)
• keydown( ) - Event fired when a key is pressed on the
keyboard
• keyup( ) - Event fired when a key is released on the
keyboard
27. jQuery Effects – hide( )
The jQuery hide ( ) effect is used to hide a selected element.
Syntax:
1 $(selector).hide(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of hide( ) effect
28. jQuery Effects – show( )
The jQuery show( ) effect is used to show a selected element.
Syntax:
1 $(selector).show(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of show( ) effect
29. jQuery Effects – toggle( )
The jQuery toggle( ) effect is used to toggle between the hide( ) and show( ) effects.
Syntax:
1 $(selector).toggle(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of toggle( ) effect
30. jQuery Effects – fadeOut( )
The jQuery fadeOut ( ) effect is used to fade out a selected element.
Syntax:
1 $(selector).fadeOut(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of fadeOut() effect
31. jQuery Effects – fadeIn( )
The jQuery fadeIn ( ) effect is used to fade in a selected element.
Syntax:
1 $(selector).fadeIn(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of fadeIn() effect
32. jQuery Effects – fadeToggle( )
The jQuery fadeToggle ( ) effect toggles between the fadeIn() and fadeOut() methods.
Syntax:
1 $(selector).fadeToggle(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of fadeIn() effect
33. jQuery Effects – slideDown( )
The jQuery slideDown ( ) effect is used to slide down a selected element.
Syntax:
1 $(selector).slideDown(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of slideDown( ) effect
34. jQuery Effects – slideUp( )
The jQuery slideUp ( ) effect is used to slide up a selected element.
Syntax:
1 $(selector).slideUp(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of slideUp( ) effect
35. jQuery Effects – slideToggle( )
The jQuery slideToggle ( ) effect toggles between the slideUp( ) and slideDown( ) methods.
Syntax:
1 $(selector).slideToggle(speed, callback);
• speed - specifies the speed of the delay. Possible
values are slow, fast and milliseconds
• callback - specifies the function to be called after
completion of slideToggle( ) effect
37. jQuery UI - draggable( ) & droppable( )
• The jQuery UI draggable( ) method makes any DOM element
draggable after which you can drag it anywhere within the
html page
Syntax:
1 $(selector).draggable( );
• The jQuery UI droppable( ) method is used to make any DOM
element droppable at a specified target
Syntax:
1 $(selector).droppable( );
38. jQuery UI - DatePicker
jQuery UI datepicker widget facilitates users to enter dates easily and visually.
Syntax:
1 $(selector).datepicker( );
39. WebDriver vs. IDE vs. RC
➢ Data Warehouse is like a relational database designed for analytical needs.
➢ It functions on the basis of OLAP (Online Analytical Processing).
➢ It is a central location where consolidated data from multiple locations (databases) are stored.