You’ve worked hard learning all the latest tips and tricks about HTML and CSS. You know how to markup a website and create a beautiful layouts using the styles and design skills from CSS. Then you notice that your site feels static and boring and there is nothing there to give it that “WOW!” factor. That is where Javascript comes in. Javascript is an essential component for creating a great front-end experience for the user. For awhile, Javascript used to be a daunting task to learn. Over the years though, the web community came together and developed an easier way to utilize Javascript and placed it in a manageable library. This amazing library is called jQuery and it has taken the web by storm and is used in almost every modern website. We will go over some basic principals of jQuery and apply what we learned.
The Basics of jQuery
Adding jQuery to your website is much like any Javascript file. When you want to use it in your website, you must reference that file in order to use it. Just like how you reference a CSS style sheets but instead of the <link> tag you must use the <script> tag. Here is a HTML markup using the jQuery file.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery Example</title> <script src="jquery.js"></script> </head> <body> </body> </html>
Simple enough, but what do we use jQuery for? If we use HTML to place the content, CSS to style the content, then jQuery must be used to make the content function or to alter the content with using commands. Although jQuery can animate your elements, it is easier to leave simple animations to CSS3. It is much easier to code when it is semantically organized in this way.
So what can we use jQuery for. What if we wanted to change the class of an element when an action is performed, like clicking a button? This is the best example of jQuery application, manipulating your content through commands. Let’s add some more code to the markup to include some styles.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<script src="jquery.js"></script>
<style>
.blue{
font-family:Arial, Helvetica, sans-serif;
background-color:#69F;
padding:20px;
cursor:pointer;
font-weight:bold;
}
.red{
background-color:#F33;
}
</style>
</head>
<body>
<p class="blue">
Hello World
</p>
</body>
</html>
We now added a simple paragraph with the words “Hello World” to it with a blue background. Now we want to perform an action. We want to be able to click that paragraph and change the background’s color to red. When we click it again we want to change it back to blue. You may be thinking that there is no way we can change a class by just clicking. We would have to open the document and retype the class each time.
With jQuery, there is a whole library of commands and functions that allow us to perform these kinds of actions. For this particular example, we want to be able to “toggle” between two different classes every time the paragraph is “clicked”. If you visit JQuery.com you will find the complete list of all available functions and commands you can perform. You will find to functions: .click() which is an event that lets jQuery know you want to click an object, and .toggleClass() which the type of action you want to perform.
Let’s go ahead and add more to our markup and then review the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<script src="jquery.js"></script>
<style>
.blue{
font-family:Arial, Helvetica, sans-serif;
background-color:#69F;
padding:20px;
cursor:pointer;
font-weight:bold;
}
.red{
background-color:#F33;
}
</style>
</head>
<body>
<p class="blue">
Hello World
</p>
</body>
<script>
$("p").click(function(){
$(this).toggleClass('red');
});
</script>
</html>
Look closely at the <script> tag after the <body> tag. With three simple lines of code we are able to the website that when the <p> tag is “clicked”, this element <p> will toggle between the class .red and .blue.
This may seem overwhelming but once you understand what each shorthand function means and the properties you can add to it, it will become easier to “read”. You may be asking “What does ‘
Wrapping it Up
We went through a lot of theory and and gave a brief overview of how to work with jQuery. Take some time and practice using jQuery in different ways and apply what you learned to websites that you create. Practice makes perfect and utilizing the power of jQuery takes a lot of practice.
The post Adding jQuery to your Webiste appeared first on The Web, Made Easy! | Web Tutorials, Tips, and Articles.