How To Use Jquery In Javascript File

How to Employ a JavaScript Library: jQuery

Acquire how to dynamically alter a website with the jQuery library

Read the article or sentry the video!

JQuery is a library that contains lots of methods which make it much easier to manipulate HTML documents, add together animation, along with a bunch of other things. Since JQuery is a library, information technology has an API that we can utilize to access its functionality.

API stands for Application Programming Interface and it basically states the methods or functions nosotros can telephone call inside our code if we import the library.

Let's click on .addClass() method and see what it does.

Say nosotros had a grade named blue that made its elements have blue text. We could use the .addClass() method and add the blue class to all of the p elements with something similar to this where nosotros'd have $("p").addClass("blue"). This may be disruptive right now, but don't worry, we'll figure it out.

To start, we first need to create an index.html and a script.js file. We'll also put the script.js file in a folder named js and then link our script.js file in our alphabetize.html file. This should look pretty familiar since we've done it in other tutorials.

Simply like nosotros imported bootstrap in the bootstrap tutorial, we need to import jQuery in this mail service. Nosotros tin can either download it from the Internet and link information technology locally or we tin link information technology from the Internet. We'll do the 2d and afterwards searching for the jQuery CDN, we'll add it to our code.

Make sure to add information technology higher up the our script.js link because we will need to use jQuery in this file. With our jQuery in place, we'll add one line of HTML code, a header. We'll add together some styling that puts it in the centre of the page and gives it a white text colour. We tin can also give it the id hidden and the header will say "I was subconscious!".

At present, when we refresh the page, we'll run across that the header text is there, only we can't meet information technology unless nosotros highlight it.

With jQuery and CSS, we could make information technology so that when we hover over it, the text of the header becomes blackness. To do this, we'll go into our script.js file and write some lawmaking.

Here, the prepare office makes sure that the DOM (for now, our HTML elements) have loaded. Once they are loaded, nosotros select our chemical element with the subconscious id and call the hover role on it. This ways when we over hover the element, the function on lines 2–4 will exist run. The function will select "this" element (the element with the id subconscious) and in the element's CSS, the colour belongings will exist set to the value blackness. You could do this for any element, ID, or class and set any property to whatsoever value. Next, nosotros have the callback function on lines 5–six and this is something y'all have to write out even if you don't use it. Nosotros volition leave information technology empty for now and come back to it later.

At present, when we refresh the folio and hover over the header, the text turns black. However, when we finish hovering over the header, the text remains black. What if we desire to "re-hide" our message after hovering over it? Going back to the lawmaking we can implement our callback function. This volition exist called once nosotros "leave" or stop hovering over our header, the element with the ID subconscious. Let'due south add together some more code.

Here, we select "this" element again, which is the chemical element with the ID subconscious, and hide it from the viewer. This function as with the .css, .hover, and .gear up function are congenital into the jQuery library so we don't demand to worry about how they are implemented. We merely need to know the end event. Here, the hide function hides "this" element on the webpages. Essentially, this just sets the brandish belongings of "this" chemical element to none, but using .hibernate() makes the code a bit more than curtailed. Let's run into what happens when we refresh the page.

We hover over the header and leave it. After, the header chemical element is gone — even when we endeavor highlighting it, information technology cannot exist plant. With this program, we hid a bulletin in plain sight, displayed the message while the mouse was pointed on it, and then made it disappear when the mouse left it.

For some other quick example, we'll add a push button back in our HTML and make it so an alert shows up on the page when we click the button.

At present, we'll write the JavaScript using the jQuery library to brand the button interactive.

Hither, nosotros select all the buttons on the folio and when i is clicked, we run the function. The role uses the alert method (built into HTML) to alert the user on screen with the message "I'thou alerting yous!". Going back to our webpage, nosotros'll refresh and meet what our alert looks like.

And there's our alert! Could we have washed this with evidently vanilla JavaScript? Yes, only using the jQuery library makes a lot of this much easier to code and easier to read later on. Next week, nosotros'll talk most angular.js, which is a structural JavaScript framework that helps you build dynamic spider web apps. For the showtime fourth dimension in the series, nosotros won't be hard-coding our content — but we volition be getting it from somewhere else. I hope you learned something in this week's post and I'll see you next time.

Things to Remember:

          <!-- How to Import jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>          <!-- How to Utilise a jQuery Method -->
            $("button").click(role() {
            // what you want to practice when button clicked
});          <!-- How to Create a Callback Office -->
$(document).ready(function(){
            $("#idName").hover(function(){
            // do this when nosotros hover over the element with id idName
            },
            function(){ //            
            // body of a callback function
            // exercise this when we stop hovering over the element with id idName
            });
});          <!-- How to Dynamically Fix CSS in jQuery -->
$(p).css("font-style", "italic");
$(#hidden).css("display", "none");

Plus a Petty Extra:

          <!-- How to Select a Form in jQuery -->
$(".className").fadeIn();          <!-- How to Animate Text -->
$("p").animate({left: '250px'});
// this uses animation to motion all of the p elements left past 250px          <!-- Reveal Text Afterward Some Time -->
            $("p").prove(thousand);          <!-- Modify Input Fields -->
$("input").focus(function(){
            // do this when user clicks the input field
});
$("input").blur(function(){
            // practice this when input field is not clicked
});

Code from this blog postal service