jQuery Intro
jQuery is the most widely used JavaScript Library used by millions of websites. jQuery makes creating dynamic client side functionality easier than writing plain JavaScript. It makes coding JavaScript a lot easier.
These jQuery tutorials assume no prior knowledge of jQuery, that being said, you should have a basic understanding of HTML, CSS and JavaScript before moving forward.
jQuery Facts
- jQuery is an open source and cross-platform JavaScript library that helps JavaScript developers develop
faster. - jQuery was released in January 2006 by John Resig, and it’s now maintained by a group of developers.
- jQuery has become the most popular JavaScript library on the web. jQuery’s popularity is due to its ease of use,
and vast functionality. - jQuery is easy to learn
What Can You Do with jQuery?
Whatever you can do with JavaScript, you can do with jQuery, just much faster.
- HTML DOM Manipulation
- CSS Manipulation
- HTML event handling
- Animation and Effects
- and more.
How to include jQuery into your project
You can include it in your <head></head> section like so:
<head>
<script src="jquery-3.4.1.min.js"></script>
</head>
In the above example, we are assuming you already downloaded jQuery into your web project. You can also use a CDN aka Content Delivery Network like so:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
In the above example, we are linking to a Google CDN. The benefit of doing it this way is it’s likely a person visiting your website has already visited another site that also used jQuery and it’ll be cached in the browser. This will make your website load faster which is a good thing.
jQuery Code Example
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).hide();
});
});
</script>
Let’s Explain the jQuery Code Example above.
Just like JavaScript, we start off with the HTML Opening and Closing Tags <script></script>. Nested inside of those tags we have our actual jQuery Code.
The $ sign is used to define/access jQuery. the (document) is what’s being targeted and the .ready( function() { ) method makes sure the document has fully loaded.
Then we are targeting the p tag with $("p") and then the .click( function () { is an inbuilt method that is used for a click event.
Then the $(this).hide(); is the action taken when that specific p is clicked.
Finally we need to close off our code with their matching closing elements }); });.
There’s so much you can do with jQuery and throughout these tutorials, I will walk you through the process of using jQuery in your web development projects.