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 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?
- Rapid development.
- Lightweight.
- A lot of browser incompatibility worries are alleviated.
- Plugins - cool stuff and features you need are already written.
jQuery Features
- HTML element selections
- HTML element manipulation
- HTML event functions
- HTML DOM traversal and modification
- CSS manipulation
- JavaScript Effects and animations
- AJAX
- Utilities
$(selector).action()
- A $ sign to define/access jQuery
- A (selector) to "query (or find)" HTML elements
- 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
- :first
- :last
- :header
- :hidden
- :contains
- :radio
- :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 |
$(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
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- Open Bootstrap modal window on Button Click Using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?