Why jQuery? I mean, Javascript is already supported by HTML, why use jQuery instead? Well, jQuery is a simplified version of Javascript so you can save time writing code rather than taking forever to type something simple. Overall, jQuery is Javascript but simple.
Make sure to have your main.js linked to your HTML page and also your jQuery insert script.
The first thing you do is to print "Hello World!" into the console. So let's do that now!
First things first, to open the console. Within the browser you are using, right click anywhere and look for the inspect option. This will open your HTML that is currently open within the browser. Now at the top of this window that has now appeared, you are going to click console and it will reveal, well the console...
Now in another window we are going to open our main.js code. Again, make sure it is linked properly(shown above). Within main.js type the following console.log("Hello World!");
Reload the page and check if your code has worked. If it has, you'll see your message in console.
Quick Note: If you are using VS Code, I would HIGHLY recommend you install the jQuery snippets extension, it is a HUGE time saver plus saves my butt everytime I forget a small bit of code :D
Sadly this isn't show and tell but with jQuery, we can hide and show things at will. First we will type a $ followed by () with "" inside, within the "" will be the target of choice and similar to CSS we can target a tag, class, or ID. after we enter that, we will type a . and then hide or show(your choice) after the ()'s. After the hide/show(again, your choice), you will type again () followed by a semi-colan. (the jQuery commands are cap-sensitive so it should all be lowercase right now except for the tag you're using)
Sorry if that was poorly explained but it should look something like the following.
$(".banana").show();
You can also use toggle to just make it toggle everytime this code is ran.
Ok, so now everytime your code is first ran, you will have something hidden or revealed. Cool I guess? Now let's make it be able to be ran while our code is active.
What we're going to need to do is setup a click event so that when something is clicked it will react to it. I'd recommend having some HTML to set with this.
This is an example of the toggle in action
First we need to select the button that will cause the event. $("Target") following this up we are going to add the .click event followed by the () and within these () you are going to type function() {} and within the {} you will add your code. Should look like the following.
$("Target").click(function(){
$("Target").toggle();
});
Alright, now that we have a simple script working, let's make it more advanced.
First things first, we have hide and show, but let's say we wanted to make it animated so it's not an instant cut, we have two options. We have slide and fade. Both of these work nearly the exact same as hide and show, in face if you were to swap in slideDown or fadeIn for a show, it would work. Do note, you can set the duration of this transition within the () next to the effect(example below).
$("Target").slideDown(0.4s);
show = slideDown
show = fadeIn
hide = slideUp
hide = fadeOut
toggle = slideToggle
toggle = fadeToggle
You can also make the mouse interaction more advance by adding things like mouseover or mouseleave. This can be used to replace the click command and when the mouse goes over the element or rather leaves the element, it will run the code. Great for menus that expand when your cursor is over it and retract when your cursor leaves.
Finally, we have toggleClass, this is a very useful but annoying to work with tag. In theory it is quite simple, when ran it will apply, remove, or toggle the class from the element, meaning this class must be defined in your CSS before it can be applied. Do note, that the class this is being added does not have a . before it because jQuery knows it is and will be a class.
$("Target").addClass("Class");
$("Target").removeClass("Class");
$("Target").toggleClass("Class");