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
javascriptmyElement = $("#id01");JavaScript
Example Code
javascriptmyElement = document.getElementById("id01");Finding HTML Elements by Tag Name
Return all elements:
jQuery
Example Code
javascriptmyElements = $("p");JavaScript
Example Code
javascriptmyElements = document.getElementsByTagName("p");Finding HTML Elements by Class Name
Return all elements with class="intro".
jQuery
Example Code
javascriptmyElements = $(".intro");JavaScript
Example Code
javascriptmyElements = document.getElementsByClassName("intro");Finding HTML Elements by CSS Selectors
Return a list of all elements with class="intro".
jQuery
Example Code
javascriptmyElements = $("p.intro");JavaScript
Example Code
javascriptmyElements = document.querySelectorAll("p.intro");Interactive Code Examples
jQuery
javascriptJavaScript syntax and algorithm demonstration.
myElement = $("#id01");JavaScript
javascriptInteractive runnable JavaScript example from EA Academy.
Live Output Preview:
JavaScript
javascriptJavaScript syntax and algorithm demonstration.
myElements = document.getElementsByTagName("p");jQuery
javascriptJavaScript syntax and algorithm demonstration.
myElements = $(".intro");JavaScript
javascriptJavaScript syntax and algorithm demonstration.
myElements = document.getElementsByClassName("intro");