jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka

Agenda
32 41 5
Basics
Install jQuery
jQuery Methods jQuery Effects
jQuery Events
6
jQuery UI

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.

Why Use jQuery?
Cross
browser
DOM
manipulation
AJAX support
Large
community
• Easy to manipulate DOM
• Massive community
• Cross browser support
• 1000s of plugins
jQuery Features

What Is jQuery?
jQuery is a fast and concise JavaScript Library created by John Resig in 2006
Event Handling
Simplifies JavaScript Lightweight
Animations

Getting Started With jQuery!
Link to a CDNLocal Installation
Two ways to Install jQuery

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>

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 :

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

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

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)

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
elements
Syntax:
1 $(selector).html( )
2 $(selector).html(content)

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
elements
Syntax:
1 $(selector).css(propertyname);
2 $(selector).css(propertyname, value);

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)

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)

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

jQuery Methods – removeClass( )
Syntax:
1 $(selector).removeClass(classname)
The jQuery removeclass( ) method removes one or more class to the selected element
you want to add

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.
you want to add

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)

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( )

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

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

jQuery Effects – show( )
The jQuery show( ) effect is used to show a selected element.
Syntax:
1 $(selector).show(speed, callback);
completion of show( ) effect

jQuery Effects – toggle( )
The jQuery toggle( ) effect is used to toggle between the hide( ) and show( ) effects.
Syntax:
1 $(selector).toggle(speed, callback);
completion of toggle( ) effect

jQuery Effects – fadeOut( )
The jQuery fadeOut ( ) effect is used to fade out a selected element.
Syntax:
1 $(selector).fadeOut(speed, callback);
completion of fadeOut() effect

jQuery Effects – fadeIn( )
The jQuery fadeIn ( ) effect is used to fade in a selected element.
Syntax:
1 $(selector).fadeIn(speed, callback);
completion of fadeIn() effect

jQuery Effects – fadeToggle( )
The jQuery fadeToggle ( ) effect toggles between the fadeIn() and fadeOut() methods.
Syntax:
1 $(selector).fadeToggle(speed, callback);
completion of fadeIn() effect

jQuery Effects – slideDown( )
The jQuery slideDown ( ) effect is used to slide down a selected element.
Syntax:
1 $(selector).slideDown(speed, callback);
completion of slideDown( ) effect

jQuery Effects – slideUp( )
The jQuery slideUp ( ) effect is used to slide up a selected element.
Syntax:
1 $(selector).slideUp(speed, callback);
completion of slideUp( ) effect

jQuery Effects – slideToggle( )
The jQuery slideToggle ( ) effect toggles between the slideUp( ) and slideDown( ) methods.
Syntax:
1 $(selector).slideToggle(speed, callback);
completion of slideToggle( ) effect

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( );

jQuery UI - DatePicker
jQuery UI datepicker widget facilitates users to enter dates easily and visually.
Syntax:
1 $(selector).datepicker( );

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.

jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka

Recommended

More Related Content

What's hot (20)

Similar to jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka (20)

More from Edureka! (20)

Recently uploaded (20)

jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka