How do I convert from JavaScript to jQuery?

JavaScript
1

Hi I need to change this script to jQuery. Im not sure where to start?
Heres the HTML code I have:

<!Doctype html>
<html>

<head>
<link rel="stylesheet" href="assignment-Jasmine.css">
<title>JavaScript Assignments- Jasmine Lusty</title>
<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous">
</script>
</head>

<body>

    <h2>JavaScript Assignment 5 - Jasmine Lusty</h2>
<!-- Grade Html -->
	<h4>Grades!</h4>
	
	<p>Select your age from the list.</p>

		<select id="mySelect" onchange="age()">
			<option value="Grade">Age</option>
			<option value="Grade 1">6</option>
			<option value="Grade 2">7</option>
			<option value="Grade 3">8</option>
			<option value="Grade 4">9</option>
			<option value="Grade 5">10</option>
			<option value="Grade 6">11</option>
		</select>

<script type="text/javascript" src="age.js"></script>
	<p id="selectedGrade"></p>
</body>
</html>

Here is the JavaScript Code I have so Far:

		function age() {
  			var x = document.getElementById("mySelect").value;
					document.getElementById("selectedGrade").innerHTML = "You selected: " + x;
		};
2

You page will be much slower with jQuery. Is it that important to use it?

Nevertheless, here is jQuery.

		function age() {
  			var x = $("#mySelect").val();
			$("#selectedGrade").html("You selected: " + x);
		};
1 Like
3

As a follow up on jQuery performance, I tested two simple pages with the above code, and measured the page loading and function running time.

Page loading (ms)
JavaScript: 33, 35, 26, 37, 36, 31. Average 33
jQuery: 75, 67, 70, 67, 70, 76. Average 71

Run function
JavaScript: .29, .07, .14, .20, .14, .11 Average 0.16
jQuery: 1.65, 2.79, 1.90, 2.51, 3.29, 1.35 Average 2.25

With jQuery, loading the page is more than twice as slow, and running even this simple function is 14 times slower.

Now even though a few milliseconds isn’t much individually, what these numbers mean is that vanilla JavaScript achieves things 14 times faster, letting you do much more in the same time that it takes jQuery to do things once.

jQuery was useful about 20 years ago, but over the last 10 years the need for it has been declining to the point where there is less pain using vanilla JavaScript instead.

4 Likes
4

not sure i entirely agree on the ‘less pain’ part when it comes to all aspects of jquery vs javascript (the AJAX implementation still leaves much to be desired, as an example imo), but it’s certainly come a long way - mostly a case of javascript actually listening to what people use external frameworks for and incorporating the frameworks’ ideas, which is good.

If you’re going for a fully jQuery-esque translation, you would probably also add the event bind to the javascript, rather than using the html attribute association.

5

About ajax, have you done much exploring of the fetch API? This article gives a good breakdown of the old way to do Ajax, and the better way to use fetch.

2 Likes
6

I have not… but I now have something to read…

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.