What exactly is Jquery?
When Javascript was released back in 1995, it changed the face of website development for good. But after 11 years programmers decided javascript syntax was long and tedious and so Jquery was born. A faster way to write javascript, Jquery is simply a javascript library that is essentially a subset of javascript. It employs most of javascript's functionalities through its own functions and methods, effectively making it more efficient and faster to write code.
In this 10 part series, we will discuss, with hands-on examples, techniques for cutting edge web programming that you will be able to use right away in your next website project.
Alright enough talking, let's dive right into it.
This first part of the series will consist of an elaborate explanation and demonstration of the Jquery on() method.
The on() function
The on() function can be used with many different events such as click, change, dblclick, mouseover, mouseout, keyup, keypress and many more. This enables us to bind any of these events to an element in our html. Let's demonstrate this concept with some simple examples.
First and foremost we need to import the Jquery library into our head tag like so:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
Now our document is ready to deploy jquery code.
Now, say we have a button on our website which when is clicked we wish to display a success message to the screen.
index.html
<button class="btn"></button>
To accomplish this we write some jquery code:
index.js
$('.btn').on('click', function() {
alert('You have successfully clicked me.');
});
Firstly, in our html we declared a button element with class btn. Then in our jquery we used the universal $ selector to access the document (which is our index.html in our case. Then in the parameter we target the element with class btn and use the .on() method. In the .on() method we bind our btn element to the event 'click' which will execute the following function. In that function we simple display an alert tothe screen with a success message.
This will yield a pop up message with the text "You have successfully clicked me." every time the user clicks on the button.
Another useful event we can use with the on() method is the "input" event. Jquery will listen for an input event and execute some code when it receives this input action. Let's see an example.
<input class="textbox" type="text" placeholder="Name">
<p class="my-name"></p>
$('.textbox').on('input', function() {
var text = $(this).val();
$('.my-name').append(text);
});
Let's break down these 3 lines of code one by one.
Firstly, we target the element with class "textbox" and bind an input event to it. In other words we are telling jquery, whenever we type some input in the element "textbox", execute the following action. The next line of code is the action to execute. We first declare a new variable text and store inside it the value or contents of the input aka our "textbox" element. $(this) is the element which we are binding the input event to, in this case our "textbox". So if we type "Tony Stark" in our input element, then our variable "text" will contain the string "Tony Stark". In the 3rd line of code we simply print out the contents of our variable "text" (which contains the string Tony Stark) to the element with class "my-name", which is a p tag element.
The result is a real time output to a p tag of whatever we type in our input field.
For the last example, we will take the very useful mouseover/mouseout event. CSS has a similar feature called hover, but we will find out why jquery's mouseover/mouseout events are much more powerful. While CSS offers a quick and simple method of executing styles from hovering over elements, its obvious drawback is that this action can only be used if the element to be styled is a sirect sibling or child of the element we are hovering over. Often times we wish to not be constrained by this, like for example opening a side navigation menu which is often neither a child nor sibling of the menu button. With jquery we can easily accomplish this task. Let's take an example.
<div class="menubtn"></div>
...
<p class="hidden">Some hidden text</p>
Imagine we wish to reveal the text "Some hidden text" (which is styled as "display:none" in our CSS) upon hovering our mouse over "menubtn". With CSS it isn't possible. Let's do this using jquery.
$('.menubtn').on('mouseover', function() {
$('.hidden').fadeIn();
});
What the above code does is it tells jquery that when we hover over the element "menubtn" we want to display (fadeIn() removes the display:none style) the element "hidden", wherever it may be in the document. Then to get the hover effect as with CSS we can add another function to hide it when we hover out of the "menubtn". We can use the mouseout event and use .fadeOut() instead of fadeIn():
$('.menubtn').on('mouseout', function() {
$('.hidden').fadeOut();
});
Those are the basics of the very useful on() function, and that should give you a deep enough understanding of how to manipulate elements in this way.
Let me know your thoughts on this post and stay tuned for the part 2!
As always, thanks for reading and i'll be seeing you in the next one.
Uriel Bitton
Website: scorpionedge.com
Email: urielas@hotmail.com
Portfolio: urielbitton.design
Top comments (0)