jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka
1 like700 views
This document provides a comprehensive overview of jQuery, including its installation, key methods, event handling, and effects for manipulating HTML elements. It outlines various jQuery methods such as selectors, before, after, text, html, css, and event handlers like click and keypress. Additionally, it introduces jQuery UI functionalities like draggable, droppable, and a datepicker widget to enhance user interaction on web pages.
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery | Edureka
- 2. Agenda 32 41 5 Basics Install jQuery jQuery Methods jQuery Effects jQuery Events 6 jQuery UI
- 3. Let’s Cover Basics First!
- 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.
- 5. 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
- 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 :
- 11. jQuery Methods
- 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
- 22. jQuery Events
- 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
- 26. jQuery Effects
- 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
- 36. jQuery UI
- 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.