jQuery Examples

• Selectors

  In this section we are going to learn about the Selectors in jQuery. What are Selectors? To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. jQuery provides many selectors out of ...
  1. All Selector
  2. Class Selector (“.class”)
  3. Element Selector
  4. Mutliple selector
  5. ID Selectors("#id")
  6. first-child - First child selector
  7. last-child - Last child selector
  8. nth-child(n) - Nth child
  9. element[attribute*='value'] - Attribute contains
  10. element[attribute$='value' - Attribute ends with
  11. element[attribute='value' - Attribute equals to
  12. element[attribute!='value' - Attribute not equals
  13. element[attribute^='value' - Attribute starts with
  14. element[attribute~='value' - Attribute contains value in mid
  15. Button
  16. How to select closest element on click event in jQuery?

• Attribute related method

  In this section we are going to learn about the Attribute related method in jQuery. jQuery Attribute related methods are used to get and/or set the attributes of the html elements using jQuery. 
  1. append() in jQuery
  2. appendTo() in jQuery
  3. .addClass() - Add class to element
  4. .attr() - Get set attribute value
  5. .prepend() - Insert content at beginning
  6. .prependTo() - prepend content to target element
  7. .removeAttr() - Remove attribute from element
  8. .toggleClass() - Toggle class attribute
  9. .hasClass() - Check for class attribute
  10. .html() - Get set html content
  11. .text() - Get set text of element
  12. .removeClass() - remove class from element
  13. .val() - Get or set the value of an element

• Traversing methods

  In this section we are going to learn about the Traversing methods in jQuery. jQuery traversing methods enable us to traverse through the html elements of the web page.
  1. .add() - Add element to particular element
  2. .children() - Get all children elements
  3. .each() - Iterate through each element
  4. .eq() - Get specific element form group
  5. .filter() - Filter element from group of similar elements
  6. .find() - Find descendant elements
  7. .first() - Find the first element
  8. .last() - Find last element
  9. .next() - Immediate next element
  10. .parent() - Find parent element

• Manipulations methods

  In this section we are going to learn about the Manipulations methods in jQuery. jQuery manipulations methods are used to manipulate the web page contents.
  1. .before() - Place content before element
  2. .after() - Place content after element
  3. .height() - Get & set height of element
  4. .width() - Get & set width of element
  5. .insertAfter() - Insert after specific element
  6. .insertBefore() - Insert before specific element
  7. .position() - Retrieve position of element
  8. .scrollLeft() - Get & set horizontal scroll position
  9. .scrollTop() - Get & set vertical scroll position
  10. .unwrap() - Unwrap parent element
  11. .wrap() - Wrap a specific element

• Events

  In this section we are going to learn the Events in jQuery. jQuery events methods are used to specify the behavior of the html element when user interacts with the web page contents. All events are directly related with the user interactio ...
  1. .blur() - Attach blur event
  2. .change() - Attach change event
  3. .click() - Attach click event
  4. .dblclick() - Attach double click event
  5. .bind() .unbind() - Attach & Detach event
  6. .bind() .unbind() - Attach multiple events to element
  7. .error() - Attach error event to element
  8. event.pageX & event.pageY - Get mouse position
  9. event.preventDefault() - Stop default behavior of element
  10. event.target - Finding the target element
  11. .focus() - Attach focus event to element
  12. .focusout() - Attach focus out event
  13. .hover() - Attach hover event to element
  14. .load() - Attach load event to element
  15. .mousedown() - Attach mouse down event to element
  16. .mouseenter() - Attach mouse enter event to element
  17. .mouseleave() - Attach mouse leave event to element
  18. .mousemove() - Attach mouse move event to element
  19. .mouseup() - Attach mouse up event to element
  20. .keypress() - Attach keypress event to element
  21. .keydown() - Attach keydown event to element
  22. .keyup() - Attach key up event to element
  23. .resize() - Attach resize event
  24. .scroll() - Attach scroll event to element
  25. .select() - Select text or attach select event
  26. Attach custom event to element

• Effects methods

  In this section we are going to learn the Effects in jQuery. jQuery effects methods are used to give animation effect to html elements.
  1. .animate() - Animate particular element
  2. .hide() - Hide particular element
  3. .slideUp() - Hide using sliding effect
  4. .show() - show element
  5. .slideToggle() - Toggle display element with sliding effect
  6. .toggle() - Toggle display element
  7. .stop() - Stop animation
  8. .clearQueue() - Remove unexecuted animation from queue
  9. .slideDown() - Slide down effect
  10. .fadeIn() - Show suing fading effect
  11. .fadeOut() - Hide using fading effect
  12. .fadeTo() - Adjust opacity of element
  13. .delay() - Delay execution of method
  14. .queue() - Get length of animation queue
  15. .dequeue() - Remove executing animation from queue
  16. jQuery.fx.off - Toggle animation effect

• Ajax methods

  In this section we are going to learn the Ajax in jQuery. jQuery Ajax methods are used to load the data from server without page refresh. It also helps to capture events that fires at different stages of the Ajax request.
  1. .ajax() - Asynchronous ajax request
  2. .post() & .get() - Get & Post request to server
  3. .load() - Load web page content
  4. .serialize() - Serialize html form data
  5. .ajaxStart() - Register handler when 1st ajax request begins

• How to Solution

  In this section we are going to learn the Solutions for the How to's on real time expierence in jQuery.
  1. How to disable right click or context menu using jQuery