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!