Bugl — code interview practice that feels like a game

Loading lesson path

Flash cards

Review the key moves

1/4

Core idea

What is the main idea behind JavaScript / jQuery DOM Selectors?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

___ = $("#id01");

3Order

Put the learning moves in the order that makes the concept easiest to apply.

Finding HTML Elements by Tag Name

Finding HTML Element by Id

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.

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

Finding HTML Element by Id

Return the element with id="id01":

myElement = $("#id01");

JavaScript

myElement = document.getElementById("id01");

Finding HTML Elements by Tag Name

Return all <p> elements:

myElements = $("p");

JavaScript

myElements = document.getElementsByTagName("p");

Finding HTML Elements by Class Name

Return all elements with class="intro".

myElements = $(".intro");

JavaScript

myElements = document.getElementsByClassName("intro");

Finding HTML Elements by CSS Selectors

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

myElements = $("p.intro");

JavaScript

myElements = document.querySelectorAll("p.intro");