jQuery Examples

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. It simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. As the name suggests, jQuery is focused on queries. A query uses CSS selectors to get a set of elements in the document. You can then perform operations on all the selected elements at once.
jQuery help
jQuery itself is completely written in Javascript, however, it encapsulates in methods some of the most common activities that one would have to code and code over again for every program. jQuery is a perfect example of the big ideas of abstraction and modularity which are at the heart of computation.

Why Use a JavaScript Library?

  1. Rapid development.
  2. Lightweight.
  3. A lot of browser incompatibility worries are alleviated.
  4. Plugins - cool stuff and features you need are already written.

jQuery Features

  1. HTML element selections
  2. HTML element manipulation
  3. HTML event functions
  4. HTML DOM traversal and modification
  5. CSS manipulation
  6. JavaScript Effects and animations
  7. AJAX
  8. Utilities
The jQuery library consists of methods where you select an HTML element and then perform an action on it. To call a jQuery method, the general syntax is: Syntax
$(selector).action()
  1. A $ sign to define/access jQuery
  2. A (selector) to "query (or find)" HTML elements
  3. A jQuery action() to be performed on the element(s)

Selectors

Selector Description
$("*") Selects all elements
$("p") Selects all elements with that name
$("#id") Selects only that element having that unique id
$(".class") Selects all elements having that class
$(this) Selects the current HTML element
$("[href]") Selects all elements with an href attribute

Magic Selectors

  1. :first
  2. :last
  3. :header
  4. :hidden
  5. :contains
  6. :radio
  7. :input

Selectors by Relationship

Selector Description
$("p:first") The first p element
$("p:last") The last p element
$("tr:even") All even tr elements
$("tr:odd") All odd tr elements
$("p:first-child") All p elements that are the first child of their parent
$("p:last-child") All p elements that are the last child of their parent
$("div > p") All p elements that are a direct child of a div element
$("div p") All p elements that are descendants of a div element
$("h2 + div") All div elements that are adjacent siblings of h2 elements
$("ul ~ p") All p elements that are siblings of ul elements
The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s). examples
$(this).hide() // hides the current element. $("p").hide() // hides all <p> elements. $(".test").hide() // hides all elements with class="test". $("#test").hide() // hides the element with id="test".

jQuery and CSS

You can use jQuery to return the value of a CSS property or set the value of a CSS property.
$("p").css("background-color"); //get the value of a CSS property
$("p").css("background-color", "blue"); //set the value of a CSS property
$("p").addClass("some_class"); //add a CSS class to a selected element
$("p").removeClass("some_class"); //remove a CSS class from a selected element


Related Topics
  1. How to get input textbox value using jQuery
  2. Get Selected Dropdown Value on Change Event | jQuery
  3. How to submit a form using ajax in jQuery
  4. How can I get the ID of an element using jQuery
  5. Open Bootstrap modal window on Button Click Using jQuery
  6. How to select an element with its name attribute | jQuery
  7. How to get the data-id attribute using jQuery
  8. How to disable/enable submit button after clicked | jQuery
  9. How to replace innerHTML of a div using jQuery
  10. Change the selected value of a drop-down list using jQuery
  11. How to get the value of a CheckBox with jQuery
  12. How to wait 'X' seconds with jQuery?
  13. How to detect enter key press on keyboard | jQuery
  14. How to allow numbers only in a Text Box using jQuery.
  15. How to dynamically create a div in jQuery?