JavaScript jQuery DOM Selectors
jQuery vs JavaScript
In 2006, John Resig made jQuery to fix browser differences and make working with HTML easier. jQuery helps with changing HTML, dealing with events, creating animations, and using Ajax. You can learn more about it at the jQuery link.
For over a decade, jQuery has been the most widely used JavaScript library globally.
After JavaScript Version 5 (2009), many jQuery functions can be accomplished using just a few lines of regular JavaScript code.
Finding HTML Element by Id
Retrieve the element with the identifier "id01":
Finding HTML Elements by Tag Name
Retrieve all <p> elements:
Finding HTML Elements by Class Name
Retrieve all elements that have the class "intro."
Finding HTML Elements by CSS Selectors
Retrieve a list containing all paragraphs (<p> elements) with the class attribute set to "intro".
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.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>
<!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>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/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>
<!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>
HTML
CSS
Javascript
Jquery
PHP
MySQL