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:


  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)


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).


jQuery and CSS

You can use jQuery to return the value of a CSS property or set the value of a CSS property. (C) 2023    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.
SiteMap  | Terms  | About