jQuery Examples

jQuery is a cross-browser JavaScript library introduced in January 2006 by John Resig, aimed at streamlining the scripting of HTML on the client side. It streamlines tasks such as traversing and modifying the HTML DOM tree, managing events, implementing CSS animations, and facilitating Ajax interactions. Emphasizing its querying capabilities, jQuery employs CSS selectors to retrieve a group of elements within the document, enabling efficient batch operations on the selected elements.

jQuery is fundamentally composed of JavaScript code, yet it abstracts numerous frequently-repeated tasks into methods. By doing so, it eliminates the need to rewrite these tasks for every program. This exemplifies the principles of abstraction and modularity inherent in computing, making jQuery a prime illustration of these foundational concepts.

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

jQuery help

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

Conclusion

Utilizing a JavaScript library like jQuery streamlines development by encapsulating common tasks into pre-built methods, sparing developers from repetitive coding. This abstraction enhances code efficiency and modularity, exemplifying key computing principles.



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