Jquery Tutorials for designing Dynamic Web Site

Jquery Tutorials for designing Dynamic Web Site

• 1.
  JQuery
• 2.
  JQuery A small andlightweight JavaScript library. Cross-platform To simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. Features DOM Selection Selectors to retrieve DOM element based on different criteria like tag name, id, css class name, attribute name, value, nth child in hierarchy etc. DOM Manipulation Adding or removing elements, modifying html content, css class Special Effects show or hide elements, fade-in or fade-out of visibility, sliding effect, animation etc Events click, dblclick, mouseenter, mouseleave, blur, keyup, keydown etc. Ajax To load data from servers without reloading whole page.
• 3.
  DOM Structure
• 4.
  Document Ready Event Beforewe execute any jQuery statement, we would like to wait for the document to be fully loaded. This is because jQuery works on DOM if complete DOM is not available before executing jQuery statements, then we will not get desired result. $(document).ready(function(){ // jQuery code goes here... }); Syntax $(document).ready(function(){ $(selector).action() });
• 5.
  jQuery Selectors To selectand manipulate HTML elements. Used to select one or more HTML elements once the element is selected then you can perform various operation on that. Every jQuery selector start with thiis sign $() - factory function Find or select HTML elements based on their id, classes, attributes, types 3 ways to select elements 1)Tag Name Tag name available in the DOM. example: $('p') selects all paragraphs'p'in the document. 2)Tag ID Tag available with a specific ID in the DOM. example: $('#real-id') selects a specific element in the document that has an ID of real-id. 3)Tag Class Tag available with a specific class in the DOM. example: $('real-class') selects all elements in the document that have a class of real- class.
• 6.
  How to useSelectors ? S.No. Selector Description 1) Name: It selects all elements that match with the given element name. 2) #ID: It selects a single element that matches with the given id. 3) .Class: It selects all elements that matches with the given class. 4) Universal(*) It selects all elements available in a DOM. 5) Multiple Elements A,B,C It selects the combined results of all the specified selectors A,B and C. Examples
• 7.
  jQuery Effects Events areoften triggered by the user's interaction with the web page Examples when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, The mouse pointer is moved etc. the Browser itself can trigger the events, such as the page load and unload events.
• 8.
  Jquery Effects Types •Form events • Keyboard events • Mouse events • Browser events • Document loading Example <script> $(document).ready(function() { $("p").click(function() { $(this).slideUp(); }); }); </script>
• 9.
  Jquery Effect Examples <script> $(document).ready(function(){ $("h1").hover(function() { $(this).css("color", "green"); }, function() { $(this).css("color", "red"); }); }); </script>
• 10.
  Jquery Effects :Forms • Blur • Change • Focus • Focusin • Select • submit
• 11.
  Jquery Effects :Keyboard • keydown • Keypress • Keyup • focusout
• 12.
  Jquery Effects :Mouse • Click • Dblclick • Focusout • Hover • Mousedown • Mouseenter • Mouseleave • Mousemove • Mouseout • Mouseover • Mouseup • Toggle
• 13.
  Jquery Effects: Document Load Ready Unload