jQuery Selectors

jQuery vs JavaScript

jQuery was created in 2006 by John Resig to address browser incompatibilities and simplify HTML DOM manipulation, event handling, animations, and AJAX.

For over 10 years, jQuery has been the most popular JavaScript library globally. However, since the release of JavaScript Version 5 (2009), many of the utilities provided by jQuery can now be achieved with just a few lines of standard JavaScript.

Finding HTML Element by Id

Retrieve the element with the id “id01”.

jQuery

myElement = $(“#id01”);

JavaScript

myElement = document.getElementById(“id01”);

Finding HTML Elements by Tag Name

Retrieve all <p> elements.

jQuery

myElements = $(“p”);

JavaScript

myElements = document.getElementsByTagName(“p”);

Finding HTML Elements by Class Name

Retrieve all elements with the class “intro”.

jQuery

myElements = $(“.intro”);

JavaScript

myElements = document.getElementsByClassName(“intro”);

Finding HTML Elements by CSS Selectors

Retrieve a list of all <p> elements with the class “intro”.

jQuery

myElements = $(“p.intro”);

JavaScript

myElements = document.querySelectorAll(“p.intro”);