arrow_back
INTRODUCTION & SYNTAX OVERVIEW
Introduction to jQuery
How to add jQuery to HTML page ? Using jQuery CDN or Downloaded file
Mini Quiz #1
jQuery syntax overview.
jQuery selectors | How to use selectors ?
Mini Quiz #2
The elemet selector in jQuery
The Id selector in jQuery
QUIZ 1
The class selector in jQuery
The miscellaneous jQuery selectors (element.class , element.nth-child)
Mini Quiz #3
1 module
EVENT HANDLING IN jQuery
jQuery events triggering and Types of events
Trigger Mouse Events in jQuery
Keyboard Events in jQuery
Form Events in jQuery
Document/Window Events in jQuery
jQuery on() and off() methods to handel events
QUIZ 1
2 module
Mini Quiz #1
jQuery EFFECTS
hide(), side() and toggle() Methods
fadeIn(), fadeOut(), fadeToggle() and fadeTo() Methods
slideIn(), slideOut() and slideToggle() Methods
animate() method , add CSS animations properties using jQuery
stop(), clearQueue() , finish() Method
jQuery Method Chaining
Mini Quiz #1
quiz 1
Assign #3
3 module
jQuery HTML METHODS
Get and set Content - text() ,html() and val()
Get and set Content - attr() , data() and prop()
jQuery add element - append(), prepend(), after() and before()
jQuery remove element - remove() and empty() methods
jQuery css classes - addClass(), removeClass() and toggleClass() methods
jQuery css() method - get and set css properties
jQuery Dimensions - get and set width and height
Mini Quiz #1
quiz 1
Assign #4
jQuery Traversing
What is Traversing ?
jQuery Traversing - Ancestors
jQuery Traversing - Descendants
jQuery Traversing - Siblings
jQuery Traversing - Filtering
has() and is() methods
each() method in jquery
Mini Quiz #1
quiz 1
5 module
Exercise 1
Image gallery using jQuery
Maximun character validation using jQuery
On-off blub using switch
Course Accordion
Events object: Properties & Methods
pageX, pageY and offset method
event.type property
event.which property
event.target property
event.preventDefault() and event.isDefaultPrevented() methods
event.stopPropagation() and event.isPropagationStopped()
event.data property
Mini Quiz #1
quiz 1
6 module
Assign #6
Exercise - 2
I agree validation
Show and Hide Password
Add more row on click.
To do list using jQuery
jQuery-UI (Introduction and Environment setup)
What is jQuery UI ?
Required files for jQuery UI
Adding online and offline refrences
Interaction: Draggable
Introduction to Draggable interaction
Restrict the draggable interaction
Cancel draggable interaction
Set Type, Position and Click-ability of Cursor
Pixles to move using Grid Property.
Return to the Original Position using Revert Property.
Add a helper for draggable elements
Megnetic effect using snap property
Other properties
Managing the events of draggable
Interaction: Droppable
Introduction to Droppable
Decide Which Draggable Elements To Be Accepted
Decide when an Element to be Considered as Dropped
Decide which Nested Droppable Element to Accept Dropped Element
Manage the look of the droppable based on the draggable
Decide whether to revert back or not when missmatch
Manage events in Droppable
Interaction: Resizeable
Introduction to Resizeable
Where to drag to resize ?
Synchronize method
Ghost and Helper Methods
Restrict Resizable
Maintain aspect ratio of resizable
Animate resizing
Manage Events
Selectable
Introduction to selectable
Filter Selectables and Non-Selectables
Sortable
Introduction to sortable
Replace the White Space using placeholder option
Connect between Sortables
Make some items sortable
Accordion
Introduction to Accordion
Allow to Collapse All Panels
"Decide which Panel to be Displayed by Default"
Decide which event to be used to display the content
Set the Height of the Content Panels
Change the Default Icons in Accordion
Tab
Introduction to Tabs Widget
Animate Hiding and Showing of Panels
Miscellaneous Options
Autocomplete
Introduction to autocomplete
Select One and Display Another
Some autocomplete options
Position options in autocomplete
Manage Events
Dialog
Introduction to Dialog Widget
Show and Hide effects
Set the size and position of the dialog box
Change Default Functionalities
Add Modal Behaviour
Add Buttons to the Dialog
Manage Events
Different methods
Datepicker
Introduction to Datepicker
Make Dates in a Range Selectable
Make Weekends/Weekdays Non-Selectable
Make Specific Dates Non-Selectable
Holiday concept in datepicker
Style Holidays in Your Calendar
Animate Hiding and Showing of Datepicker
Format Date and Text Box
Alternate field and alternate text
Show datepicker in different ways.
Change default datepicker options
Change the language of the datepicker
Control Datepicker Programmatically
Progress bar
Introduction to Progress bar
Customise the progress bar
Change the Value of the Progressbar Programmatically
Slider
Introduction to the slider
Change event in slider
Range Slider
Other options
Manage events
Menu
Introduction to the Menu
Change icons of menu
Divider & items option.
Manage events
Tooltip
Introduction to tooltip
Show & Hide effects for tooltip
Position of the tooltip
Customize the look of tooltip
Customize the content of the tooltip
Events and Methods
Spinner
Introduction to the Spinner
Methods of the Spinner
Miscellaneous Widgets
Button Widget
Checkbox Radio
Selectmenu widget
Control group
Effects
Effect method
Show and Hide method