![Ajax
$.get( url, [data], [callback], [type] )
◦ Requests data from the server with an HTTP GET request.
$.getJSON( url, [data], [callback] )
◦ Load JSON data using an HTTP GET request.
$.post( url, [data], [callback], [type] )
◦ Requests data from the server using an HTTP POST request.
$.ajax( options )
◦ Load a remote page using an HTTP request. Can be called for
get/post/put/delete requests
serialize( )
◦ Called on forms usually before sending request to server. It creates a URL
encoded text string by serializing form values.
serializeArray( )
◦ Serializes all forms and form elements like the .serialize() method but
returns a JSON data structure for you to work with.
10](https://image.slidesharecdn.com/jquery-170725070507/85/jQuery-basics-for-Beginners-10-320.jpg)
jQuery basics for Beginners
- 1. An Introduction to jQuery Pooja Saxena
- 2. Topics to cover 2 Introduction Features Selectors Animations Events Manipulating HTML/CSS Traversing Ajax
- 3. What is jQuery? 3 Is a free , open Javascript library Founded in 2006 with the motto - Write Less - Do More What it does - Simplifies the task of creating highly responsive web pages Not at all related to Java Works across modern browsers Can be enabled in your page by including reference to jQuery library file <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
- 4. Typical Usage 4 HTML/DOM manipulation CSS manipulation Event handling Animating Traversing Ajax interactions for rapid web development
- 5. Selectors jQuery selectors start with the dollar sign and − $(). $() is a synonym of jQuery() Name -Selects all elements which match with the given element Name. #ID -Selects a single element which matches with the given ID. .Class -Selects all elements which match with the given Class. Universal (*) - Selects all elements available in a DOM. Multiple Elements E, F, G - Selects the combined results of all the specified selectors E, F or G. 5
- 6. Animations jQuery provides several techniques for adding animation to a web page to craft sophisticated custom effects. Frequently used effects are built into jQuery as methods that you can call on any jQuery object. ◦ .show() Show the selected elements. ◦ .hide() Hide the selected elements. ◦ .fadeIn() Animate the opacity of the selected elements to 100%. ◦ .fadeOut() Animate the opacity of the selected elements to 0%. ◦ .slideDown() Display the selected elements with a vertical sliding motion. ◦ .slideUp() Hide the selected elements with a vertical sliding motion. ◦ .toggle() Show or hide the selected elements with a vertical sliding motion, depending on whether the elements are currently visible. 6
- 7. Events What are Events? ◦ An event represents the precise moment when some action happens that can be detected by your Web Application Examples: ◦ Mouse click ◦ Web page loading ◦ Mouse over an element ◦ Submitting an HTML form ◦ A keystroke on your keyboard. Etc. 7
- 8. Manipulating HTML/CSS 8 JQuery provides methods to manipulate DOM/CSS in efficient way. Almost all methods acts as getter or setter for HTML element's attribute DOM manipulation includes ◦ Add, Remove or modify any element or its attribute CSS manipulation includes ◦ Altering any of the style properties of DOM elments
- 9. Traversing 9 Used to filter out elements from a document based on given conditions. Some common methods which are used for traversing are :- ◦ children() Returns all direct children of the selected element ◦ closest() Returns the first ancestor of the selected element ◦ each() Executes a function for each matched element ◦ eq() Returns an element with a specific index number of the selected elements ◦ find() Returns descendant elements of the selected element ◦ first() Returns the first element of the selected elements ◦ last() Returns the last element of the selected elements ◦ next() Returns the next sibling element of the selected element ◦ parent() Returns the direct parent element of the selected element ◦ prev() Returns the previous sibling element of the selected element
- 10. Ajax $.get( url, [data], [callback], [type] ) ◦ Requests data from the server with an HTTP GET request. $.getJSON( url, [data], [callback] ) ◦ Load JSON data using an HTTP GET request. $.post( url, [data], [callback], [type] ) ◦ Requests data from the server using an HTTP POST request. $.ajax( options ) ◦ Load a remote page using an HTTP request. Can be called for get/post/put/delete requests serialize( ) ◦ Called on forms usually before sending request to server. It creates a URL encoded text string by serializing form values. serializeArray( ) ◦ Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with. 10
Editor's Notes
- #3: After first session add lines