1. LEARNING jQERY www.techieweb.in Techieweb Solutions

2. jQuery Introduction Intro: jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery: DOM manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle. Event handling: The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers. Techieweb Solutions

3. AJAX Support: The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology. Animations: The jQuery comes with plenty of built-in animation effects which you can use in your websites. Lightweight: The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ). Cross Browser Support: The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+ Latest Technology: The jQuery supports CSS3 selectors and basic XPath syntax. Techieweb Solutions

4. Installation Process: There are two versions of jQuery available for downloading: Production version - this is for your live website because it has been minified and compressed Development version - this is for testing and development (uncompressed and readable code) Both versions can be downloaded from jQuery.com.jQuery.com The downloaded file name “ jquery-1.11.1.min.js ” may vary for your version. Note: Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. Techieweb Solutions

5. How to use jQuery Now you can include jquery library in your HTML file as follows: For Example: Techieweb Solutions

6. JS DATATYPES jQuery CDN: If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery. Goggle CDN: Microsoft CDN: jQuery CDN Techieweb Solutions

7. jQuery Syntax Syntax: The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). $(selector).action() A $ sign to define/access jQuery A ( selector ) to "query (or find)" HTML elements A jQuery action () to be performed on the element(s) Examples : $(this).hide() - hides the current element. $("p").hide() - hides all elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". Techieweb Solutions

8. The Document Ready Event Document Ready Event: All jQuery methods are used inside a document ready event. This is to prevent any jQuery code from running before the document is finished loading (is ready). It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. Example: 1.Trying to hide an element that is not created yet 2.Trying to get the size of an image that is not loaded yet Syntax: $(document).ready(function(){ // jQuery methods go here... }); Techieweb Solutions

9. jQuery Selectors Selectors: jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors.CSS Selectors All selectors in jQuery start with the dollar sign and parentheses: $(). Types of Selectors: Element Selector ID(#) Selector Class(.) Selector Techieweb Solutions

10. The Element Selector Element Selector: The jQuery element selector selects elements based on the element name. You can select all elements on a page like this: $(“p”); Example: When a user clicks on a button, all elements will be hidden: $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); Techieweb Solutions

11. ID(#) Selector : The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element. $(“#text”); Example: When a user clicks on a button, the element with id="test" will be hidden: $(document).ready(function(){ $("button").click(function(){ $("#text").hide(); }); }); Techieweb Solutions The ID (#) Selector

12. Class(.) Selector : The jQuery class selector finds elements with a specific class. To find elements with a specific class, write a period character, followed by the name of the class. $(“#text”); Example: When a user clicks on a button, the element with id="test" will be hidden: $(document).ready(function(){ $("button").click(function(){ $(“.text").hide(); }); }); Techieweb Solutions The Class (.) Selector

13. jQuery Events jQuery Event Metods: All the different visitor's actions that a web page can respond to are called events. We have the ability to create dynamic web pages by using events. Events are actions that can be detected by your Web Application. An event represents the precise moment when something happens. Examples : moving a mouse over an element selecting a radio button clicking on an element A web page loading Submitting an HTML form Techieweb Solutions

14. jQuery Events Some Common DOM Events: Techieweb Solutions Mouse EventsKeyboard EventsForm EventsDocument/Wind ow Events clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscroll mousleaveblurunload

15. jQuery Syntax For Event Methods Most DOM events have an equivalent jQuery method. To assign a click event to all paragraphs on a page, you can do this: $("p").click(); The next step is to define what should happen when the event fires. You must pass a function to the event: $("p").click(function(){ // action goes here!! }); Techieweb Solutions

16. jQuery Syntax For Event Methods Commonly Used jQuery Methods: Here is a list of some common jQuery metods that we use: $(document).ready() click() dblclick() mouseenter() mouseleave() mousedown() mouseup() hover() focus() blur() Techieweb Solutions

17. jQuery Syntax For Event Methods $(document).ready(): The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained. click() : The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. Example: $("p").click(function(){ $(this).hide(); }); Techieweb Solutions

18. jQuery Syntax For Event Methods dblclick(): The dblclick() method attaches an event handler function to an HTML element. The function is executed when the user double-clicks on the HTML element: Example: $("p").dblclick(function(){ $(this).hide(); }); mouseenter() : The mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element: Techieweb Solutions

19. jQuery Syntax For Event Methods Example: $("#p1").mouseenter(function(){ alert("You entered p1!"); }); mouseleave() : The mouseleave() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer leaves the HTML element: Example: $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); Techieweb Solutions

20. jQuery Syntax For Event Methods mousedown(): The mousedown() method attaches an event handler function to an HTML element. The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element: Example: $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); mouseup(): The mouseup() method attaches an event handler function to an HTML element. The function is executed, when the left mouse button is released, while the mouse is over the HTML eleme Techieweb Solutions

21. jQuery Syntax For Event Methods Example: $("#p1").mouseup(function(){ alert("Mouse up over p1!"); }); hover(): The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element: Example: $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); Techieweb Solutions

22. jQuery Syntax For Event Methods focus(): The focus() method attaches an event handler function to an HTML form field. The function is executed when the form field gets focus: Example: $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); blur(): The blur() method attaches an event handler function to an HTML form field. The function is executed when the form field loses focus: Example: $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); Techieweb Solutions

23. jQuery Effects Effects in Jquery: The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects. Some Common Effects: Hide and Show Fade Slide Techieweb Solutions

24. jQuery Effects jQuey hide() and show(): With jQuery, you can hide and show HTML elements with the hide() and show() methods: Example: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); Techieweb Solutions

25. jQuery Effects jQuey toggel(); With jQuery, you can toggle between the hide() and show() methods with the toggle() method. Shown elements are hidden and hidden elements are shown: Example: $("button").click(function(){ $("p").toggle(); }); Techieweb Solutions

26. jQuery Effects jQuery Fading Methods With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method: The jQuery fadeIn() method is used to fade in a hidden element. Syntax: $( selector ).fadeIn( speed,callback ); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. Techieweb Solutions

27. jQuery Effects jQuery fadeOut() Method: The jQuery fadeOut() method is used to fade out a visible element. Syntax: $( selector ).fadeOut( speed,callback ); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. jQuery fadeToggle() Method The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out. Syntax: $( selector ).fadeToggle( speed,callback ); Techieweb Solutions

28. jQuery Effects jQuery Sliding Methods With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() jQuery slideDown() Method The jQuery slideDown() method is used to slide down an element. Syntax: $( selector ).slideDown( speed,callback ); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. Techieweb Solutions

29. jQuery Effects jQuery slideDown() Method The jQuery slideDown() method is used to slide down an element. Syntax: $( selector ).slideDown( speed,callback ); The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. jQuery slideUp() Method The jQuery slideUp() method is used to slide up an element. Syntax: $( selector ).slideUp( speed,callback ); Techieweb Solutions

30. jQuery Effects jQuery slideToggle() Method The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down. $( selector ).slideToggle( speed,callback ); Techieweb Solutions

31. jQuery Remove Elements Remove Elements/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 jQuery remove() Method The jQuery remove() method removes the selected element(s) and its child elements. Example: $("#div1").remove(); Techieweb Solutions

32. jQuery Remove Elements jQuery empty() Method: The jQuery empty() method removes the child elements of the selected element(s). Example: $("#div1").empty(); Techieweb Solutions

33. jQuery Ajax jQuery Ajax Introduction: AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page. AJAX = Asynchronous JavaScript and XML. In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page. jQuery provides several methods for AJAX functionality. jQuery Ajax load () Method: The jQuery load() method is a simple, but powerful AJAX method. The load() method loads data from a server and puts the returned data into the selected element. Syntax: $( selector ).load( URL,data,callback ); Techieweb Solutions

34. jQuery Ajax The required URL parameter specifies the URL you wish to load. The optional data parameter specifies a set of querystring key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed. Techieweb Solutions