How do I import jQuery?

Hi I’m trying to convert a document from pure JavaScript into jQuery. Do I have to download something to make jQuery work? If so where do I find it?
Also how do I import it into my HTML?

Here is the code I have so far. the page is supposed to do 3 things

  1. determine what grade you are in according to age
  2. Do math, will highlight if the answer is incorrect
  3. validate that an email is correct
<!Doctype html>
<html>

<head>
	<style>
		td{
			padding-top: 5px;
			padding-bottom: 5px;
			padding-right: 20px;
			padding-left: 20px;
		}
		.wrong {
			background-color: #fa8072;
		}
 
		.right {
    		background-color: transparent;
 		}
	</style>
<title>JavaScript Assignments- Jasmine Lusty</title>

</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>


	<p id="selectedGrade"></p>
	<br>
<!-- Math Html -->
	<h4>Math!</h4>
	<p>Try to see if you can do the math</p>
		<table id="addition-table">
			<tbody>
				<tr class="Calculation">
					<td>5</td>
					<td>3</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>7</td>
					<td>6</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>5</td>
					<td>5</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>8</td>
					<td>3</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>4</td>
					<td>7</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>3</td>
					<td>9</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>8</td>
					<td>5</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>2</td>
					<td>6</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>5</td>
					<td>9</td>
					<td><input type="text"></td>
				</tr>
				<tr class="Calculation">
					<td>6</td>
					<td>6</td>
					<td><input type="text"></td>
				</tr>
			</tbody>
		</table>
	<br>
<!---- Email Html--->
	<h4>Email Validation!</h4>
	<p>Type in Your Email</p>
		<input type="email" id="email">
		<br>
		<br>
	
<!--javascript code-->
	
<script type="text/javascript">
//Age/Grade Code
		 
		function age() {
  			var x = document.getElementById("mySelect").value;
					document.getElementById("selectedGrade").innerHTML = "You selected: " + x;
		}
</script>
    <br>

<script type="text/javascript">
        //Math Code
		
		(function( math )  { 
				   'use strict';
				   var tr = math.querySelectorAll( 'tr' ), 
					   td = math.querySelectorAll( 'td' ), 
					  inp = math.querySelectorAll( 'input' ),
				   totals = [], c;
			   for ( c = 0; c < tr.length; c ++ ) {
					 totals.push( parseFloat( td[ c * 3 ].textContent ) + 
								  parseFloat( td[ c * 3 + 1 ].textContent ) );
					 inp[ c ].value = ' ';				   
					 inp[ c ].addEventListener( 'blur', check_answer( c ), false );

				}

		function check_answer( c ) {
			   inp[ c ].onblur = function() { 
				  if( inp[ c ].value == totals[ c ] ) {
					  tr[ c ].classList.add( 'right' );
					 }
						  else {
							 tr[ c ].classList.remove( 'right' );
							 tr[ c ].classList.add( 'wrong' );
							 }
						  }			   
					   }
		 }( document ) );  

</script>
<!---- Email Validation Code--->
<script type="text/javascript">

		function validateEmail(email, emailPattern){

	    emailPattern = (emailPattern instanceof RegExp) ?  emailPattern : /[\w-\.]+@([\w-]+\.)+[\w-]{2,4}/;

		return matchResults;
}		

	
			var email = document.getElementById('email')

			email.addEventListener('blur', function (event) {
			  event.target.style.backgroundColor = event.target.validity.valid
				? 'transparent'
				: 'red'
			})
	
</script>
<!---- Remove Event Listeners Code ------>
<script type="text/javascript">	
	
	window.removeEventListener("beforeunload", "mySelect", false);
	window.removeEventListener("beforeunload", check_answer( c ), false );
	window.removeEventListener("beforeunload", function (event)

</script>
</body>
</html>

The easiest way to get started is simply to go to the jQuery website at https://code.jquery.com/ and from there you can click one of the links for jQuery 3.x Core (I suggest the minified link). Once you do that, it will show you the JavaScript link tag that you can simply paste into your page (usually towards the bottom of the page just above closing body tag) and you are all done.

This is a really good way to do it because it is fast loading and will load in the library from the closest location to the user around the world. That is what CDNs (content delivery networks) are for.

Hope this helps!

1 Like

Why add the additional overhead if you already got your code working without jQuery anyway though? Usually people are more concerned with removing it from their code base, rather than the other way round. ^^ Here’s a prominent example and their reasoning:

And here an in-depth guide by @Paul_Wilkins how to do so:

6 Likes

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