JS HTML DOMLesson #286

jQuery DOM Selectors

[jQuery](/jquery/default.asp) was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Anima...

jQuery vs JavaScript

jQuery was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.

For more than 10 years, jQuery has been the most popular JavaScript library in the world.

However, after JavaScript Version 5 (2009), most of the jQuery utilities can be solved with a few lines of standard JavaScript:


Share

Finding HTML Element by Id

Return the element with id="id01":

jQuery

Example Code

javascript
Try it Yourself
myElement = $("#id01");

JavaScript

Example Code

javascript
Try it Yourself
myElement = document.getElementById("id01");

Finding HTML Elements by Tag Name

Return all elements:

jQuery

Example Code

javascript
Try it Yourself
myElements = $("p");

JavaScript

Example Code

javascript
Try it Yourself
myElements = document.getElementsByTagName("p");

Finding HTML Elements by Class Name

Return all elements with class="intro".

jQuery

Example Code

javascript
Try it Yourself
myElements = $(".intro");

JavaScript

Example Code

javascript
Try it Yourself
myElements = document.getElementsByClassName("intro");

Finding HTML Elements by CSS Selectors

Return a list of all elements with class="intro".

jQuery

Example Code

javascript
Try it Yourself
myElements = $("p.intro");

JavaScript

Example Code

javascript
Try it Yourself
myElements = document.querySelectorAll("p.intro");

Interactive Code Examples

jQuery

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
myElement = $("#id01");

JavaScript

javascript
Try it Yourself
Interactive runnable JavaScript example from EA Academy.
Live Output Preview:

jQuery

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
myElements = $("p");

JavaScript

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
myElements = document.getElementsByTagName("p");

jQuery

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
myElements = $(".intro");

JavaScript

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
myElements = document.getElementsByClassName("intro");