JQuery Selectors

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JQuery Selectors

JQuery vs JavaScript

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

After the 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″:

Example

<!DOCTYPE html>

<html>

<head>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

</head>

<body>

<h2>Finding HTML Elements by Id</h2>

<p id=”id01″>Hello World!</p>

<p id=”id02″>Hello Sweden!</p>

<p id=”id03″>Hello Japan!</p>

<p id=”demo”></p>

<script>

$(document).ready(function() {

  var myElements = $(“#id01”);

  $(“#demo”).text(“The text from the id01 paragraph is: ” + myElements[0].innerHTML);

});

</script>

</body>

</html>

Output

Finding HTML Elements by Id

Hello World!

Hello Sweden!

Hello Japan!

JavaScript

<!DOCTYPE html>

<html>

<body>

<h2>Finding HTML Elements by Id</h2>

<p id=”id01″>Hello World!</p>

<p id=”id02″>Hello Sweden!</p>

<p id=”id03″>Hello Japan!</p>

<p id=”demo”></p>

<script>

const myElement = document.getElementById(“id01”);

document.getElementById(“demo”).innerHTML = “The text from the id01 paragraph is: ” + myElement.innerHTML;

</script>

</body>

</html>

Output

Finding HTML Elements by Id

Hello World!

Hello Sweden!

Hello Japan!

Finding HTML Elements by Tag Name

Return all <p> elements:

jQuery

Example

<!DOCTYPE html>

<html>

<head>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

</head>

<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>Hello World!</p>

<p>Hello Sweden!</p>

<p>Hello Japan!</p>

<p id=”demo”></p>

<script>

$(document).ready(function() {

  var myElements = $(“p”);

  $(“#demo”).text(“The text in the first paragraph is: ” + myElements[0].innerHTML);

});

</script>

</body>

</html>

Output

Finding HTML Elements by Tag Name

Hello World!

Hello Sweden!

Hello Japan!

The text in the first paragraph is: Hello World!

JavaScript

Example

<!DOCTYPE html>

<html>

<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>Hello World!</p>

<p>Hello Sweden!</p>

<p>Hello Japan!</p>

<p id=”demo”></p>

<script>

const myElements = document.getElementsByTagName(“p”);

document.getElementById(“demo”).innerHTML = “The text in the first paragraph is: ” + myElements[0].innerHTML;

</script>

</body>

</html>

Output

Finding HTML Elements by Tag Name

Hello World!

Hello Sweden!

Hello Japan!

The text in the first paragraph is: Hello World!

Finding HTML Elements by Class Name

Return all elements with class=”intro”.

jQuery

Example

<!DOCTYPE html>

<html>

<head>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>

</head>

<body>

<h2>Finding HTML Elements by Class Name</h2>

<p class=”intro”>Hello World!</p>

<p class=”intro”>Hello Sweden!</p>

<p class=”intro”>Hello Japan!</p>

<p id=”demo”></p>

<script>

$(document).ready(function() {

  var myElements = $(“.intro”);

  $(“#demo”).text(“The first paragraph with class=’intro’ is: ” + myElements[0].innerHTML);

});

</script>

</body>

</html>

Output

Finding HTML Elements by Class Name

Hello World!

Hello Sweden!

Hello Japan!

The first paragraph with class='intro' is: Hello World!

Javascript

Example

<!DOCTYPE html>

<html>

<body>

<h2>Finding HTML Elements by Class Name</h2>

<p class=”intro”>Hello World!</p>

<p class=”intro”>Hello Sweden!</p>

<p class=”intro”>Hello Japan!</p>

<p id=”demo”></p>

<script>

const myElements = document.getElementsByClassName(“intro”);

document.getElementById(“demo”).innerHTML = “The first paragraph with class=’intro’ is: ” + myElements[0].innerHTML;

</script>

</body>

</html>

Output

Finding HTML Elements by Class Name

Hello World!

Hello Sweden!

Hello Japan!

The first paragraph with class='intro' is: Hello World!

Finding HTML Elements by CSS Selectors

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

jQuery

Example

<!DOCTYPE html>

<html>

<head>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>

</head>

<body>

<h2>Finding HTML Elements by Query Selector</h2>

<p class=”intro”>Hello World!</p>

<p class=”intro”>Hello Sweden!</p>

<p class=”intro”>Hello Japan!</p>

<p id=”demo”></p>

<script>

$(document).ready(function() {

  var myElements = $(“p.intro”);

  $(“#demo”).text(“The first paragraph with class=’intro’ is: ” + myElements[0].innerHTML);

});

</script>

</body>

</html>

Output

Finding HTML Elements by Query Selector

Hello World!

Hello Sweden!

Hello Japan!

The first paragraph with class='intro' is: Hello World!

JavaScript

Example

<!DOCTYPE html>

<html>

<body>

<h2>Finding HTML Elements by Query Selector</h2>

<p class=”intro”>Hello World!</p>

<p class=”intro”>Hello Sweden!</p>

<p class=”intro”>Hello Japan!</p>

<p id=”demo”></p>

<script>

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

document.getElementById(“demo”).innerHTML =

“The first paragraph with class=’intro’ is: ” + myElements[0].innerHTML;

</script>

</body>

</html>

Output

Finding HTML Elements by Query Selector

Hello World!

Hello Sweden!

Hello Japan!

The first paragraph with class='intro' is: Hello World!