jQuery,
a concept that was created out of a "less is more" philosophy. It's a way for developers to manipulate the DOM tree in a webpage without having to write complex functions for every little... well.. function! jQuery is simply a JavaScript library that houses many methods and features that can help one traverse or change elements in your HTML file, or CSS file. This allows the user to access shorter syntax to achieve different goals within their program. jQuery was created by a man named John Resig, in January 2006, and it has become a huge part of designing webpages since then.
Let's get into it
The syntax for selecting elements via jQuery so you can chain the libraries methods onto them is as follows (for id's and classes respectfully):
$('#my-id') // wraps an element in jQuery via it's given id
$('.my-class') // wraps an element in jQuery via it's given class
As you can see we start the "wrapping" process with the use of the dollar sign, or 'bling' symbol, followed by parenthesis, then which ever element (either it's id or class) encased in quotations. You can then chain methods onto these elements based off of what you're trying to do. You can also save these wrapped elements into variables if you need to. You can append or prepend elements to another element within your DOM tree, you can animate already existing elements, create elements that don't exist, or simply style your elements with the methods built into the jQuery library. In this post I will be briefly going over some of those methods.
Appending or Prepending
Let's say you want to create an element and attach it to another (either before or after) element in your DOM tree. You can do so with utilizing the .append() or .prepend() jQuery methods. You can also select one or multiple elements (if they have the same class) to append or prepend to.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>// this is the link that gives the dev access to the jQuery library
</head>
<body>
<p>Slow down there now !: </p>
<script>
$( "p" ).append( "<strong>You're goin too fast!</strong>" ); // append method in action right here!
</script>
</body>
</html>
Here we can see that the this will 'append' the bit of text that's wrapped in the "strong" tags, to the paragraph elements in your HTML. The strong tags will simply make the text bold. So you simply wrap your desired element/elements in jQuery syntax and the append method can be simply chained and then you can pass in your desired element that you'd like to attach, as an argument for the append method.
Prepending will behave similarly except that instead of attaching your new elements after your desired element, It will attach the new elements BEFORE your desired element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prepend demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>there, fellow tarnished!</p>
<script>
$( "p" ).prepend( "<b>You </b>" ); //you can see the prepending method in action here!
</script>
</body>
</html>
As you can see above in the script tags, the prepend method will attach the desired text before the paragraph elements in the HTML's body tags.
Styling with jQuery
The .css() method in the jQuery library will allow us to add... you guessed it... CSS! to the desired elements in the DOM. The syntax is generally the same in that it starts with selecting your element and then chaining the method, and then the arguments are going to be whichever styling you want for that element, passed in (in quotations of course). This allows the user to not even have to navigate to your CSS file, or, even have a CSS file at all!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>You there, fellow tarnished!</p>
<script>
$( "p" ).css('background-color', 'yellow');
</script>
</body>
</html>
As you can see here within the script tag, the css method is selecting the the paragraph element, and will make it's background color yellow! Not so easy on the eyes, but will stick out!
C L I CK
No not the well renowned major motion picture featuring Adam Sandler, no no, this version of 'click' is the thing you did to read this post in the first place! The jQuery click method will allow you give functionality to your clickable elements. Now that I think about it, I wonder if Morty (the scientist who invented the remote in "Click" the movie) used jQuery??
There are a few 'clickable' methods that are a part of a bigger category of methods called 'event listeners'. As far as the click of your mouse is concerned, the two that I'll focus on are .click() and .on(), which both behave similarly but one leaves room for more options.
Before I show an example it's important to note that there are three steps that these methods implement for event handling. The first is selecting the element (or node) that you want the following code to respond to. The second is to indicate which event on that particular element will activate a response. The third will be to declare the code that you want to run when the event begins.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "purple");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">I wish to be purple</p>
<p style="background-color:#00ff00">I don't wanna be purple</p>
<p style="background-color:#0000ff">Idc dude</p>
<p>These paragraphs can't seem to agree on anything smh</p>
<button>Turn them purple!</button>
</body>
</html>
As you can see the click function has selected the button element and takes in a callback function that will run when the button is clicked. In this case it will change all of the paragraph elements backgrounds to purple from their original colors (whether they like it or not).
Now the .on() method will behave similarly but instead of simply taking in a callback function, it will first take in a keyword (like 'click' or 'hover') to determine the second step of the event handler.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on('click', function(){
$("p").css("background-color", "purple");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">I wish to be purple</p>
<p style="background-color:#00ff00">I don't wanna be purple</p>
<p style="background-color:#0000ff">Idc dude</p>
<p>These paragraphs can't seem to agree on anything smh</p>
<button>Turn them purple!</button>
</body>
</html>
As you can see above the code isn't any different in regards to it's functionality, but with the .on() methods syntax, you can see how there are more options for the events that you may want in your program.
jQuery and it's different syntax can be confusing at first, but once you get used to it, it will save you many lines of code in the long run. Especially once you get into functionalities that involve things such as animating elements, or navigating the DOM to manipulate many elements at once. Whether you need re-organize the DOM tree, add styles, or other functionalities for your program, jQuery is a convenient and often necessary tool for your development.
sources: --https://api.jquery.com/
--JavaScript and jQuery interactive front-end web development by Jon Duckett
--https://www.w3schools.com/jquery/default.asp
Top comments (0)