What is JQuery and How can a Server Use It
Overview
jQuery is a specialized JavaScript library designed to simplify web development. It offers a multitude of methods that act as convenient wrappers for extensive code, streamlining tasks compared to writing raw JavaScript. Key features of jQuery include:
- AJAX calls
- DOM/HTML manipulations
- CSS manipulations
- HTML event methods
- Animations and effects
- Plugin support
- Cross-browser support
Widely adopted by leading companies, jQuery has become an industry standard. If you’re involved in web development or looking to enhance your skills, exploring jQuery is highly beneficial.
In this guide, I’ll walk you through setting up jQuery and delve into several interesting features it provides.
Describe DOM
Installation
Officially, there are two ways to install jQuery:
- Content Delivery Network (CDN)[2]: You can obtain jQuery from a Content Delivery Network (CDN) such as https://cdnjs.com/libraries/jquery/. To use a CDN, you can link directly to the jQuery library in your HTML code. For instance, you can use Microsoft or Google CDN links. For Google:
<head>
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
Microsoft:
> <head>
> <script>src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
> </head>
A significant advantage of using the CDN version is that if a visitor has previously visited another site utilizing the same CDN for jQuery, they may already have the jQuery library cached. This can lead to faster loading times for your page, contributing to an improved user experience.
2. Downloading from the official website jQuery.com: There are two versions available for download:
- Development: This is a testing version and is not recommended for production use.
- Production: This is the released and supported version.
To download from the official site, visit http://jquery.com/download/. The jQuery library is a JavaScript file, and you can enable it by adding the following section to your HTML file. Ensure that the jQuery file is placed near the HTML file you are editing or creating.
> <head>
> <script src="jquery-3.2.1.min.js"></script>
> </head>Basic Applications
1) Let’s start by creating a simple HTML page.
> <!doctype html>
> <html>
> <head>
> <title>jQuery demo</title>
> </head>
> <body>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
> <script>
>
> // Write your code here
>
> </script>
> </body>
> </html>
When using a CDN, the src attribute in the script tag points to the jQuery source. In the example, a Microsoft CDN link is used. If you prefer a local copy, ensure the downloaded file is stored in the same directory as your HTML file and adjust the src attribute accordingly.
2) Executing code only when the page is fully loaded and the DOM is ready for manipulation is crucial. jQuery provides a specific statement called the ready event for this purpose. This event allows you to run code as soon as the DOM is ready to be controlled, eliminating the need to wait for banners and all images to finish loading. The syntax for this statement is as follows:
> $( document ).ready(function() {
> // Write your code here
> });
As an example, let’s display text when the DOM is ready and can be manipulated.
> $( document ).ready(function() {
> $("p").text("DOM is loaded.");
> });
Now, if you insert that piece of code into your HTML page, it should look like this:
> <!doctype html>
> <html lang="en">
> <head>
> <title>jQuery demo</title>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
> <script>
> $(document).ready(function () {
> $("p").text("DOM is loaded.");
> });
> </script>
> </head>
> <body>
> <p>DOM is not loaded</p>
> </body>
> </html>
Selectors
Selectors are a pivotal component of jQuery, enabling the manipulation of HTML elements. They serve to choose or “locate” HTML elements on the page based on identifiers, classes, types, attributes, and more. While there are unique selectors in jQuery, many are grounded in CSS selectors (https://www.w3schools.com/cssref/css_selectors.asp). It’s important to note that all jQuery selectors must commence with
> $()
Here are some widely used selectors:
$("*")selects all elements$(this)selects the current HTML element$("p:first")selects the first paragraph element$("[href]")selects all elements with an href attribute$(":button")selects all<button>and<input>elements withtype="button"$("tr:even")selects all even<tr>elements$("tr:odd")selects all odd<tr>elements
Feel free to use this tool[4] to test different selectors.
Now, let’s hide an element with a “hideme” identifier on a mouse button click.
> $(document).ready(function(){
> $("button").click(function(){
> $("#hideme").hide();
> });
> });
Absolutely, so essentially, on a mouse button click, the element with the “hideme” identifier will be hidden. Here is the complete example:
> <!DOCTYPE html>
> <html>
> <head>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
> </script>
> <script>
> $(document).ready(function(){
> $("button").click(function(){
> $("#hideme").hide();
> });
> });
> </script>
> </head>
>
> <body>
> <h2>Header</h2>
> <p>text</p>
> <button>Hide</button>
> <div style="background-color:tomato;height:50px;width:50px;position:absolute;"
> id="hideme"></div>
> </body>
>
> </html>Events for JQuery
One of jQuery’s primary objectives is to respond to specific events, essentially performing actions on the web page when a particular event is triggered. Some notable events include:
click()– a mouse event occurring when an element is clicked ondblclick()– a mouse event for double-clickingkeypress()– a keyboard event that happens on key pressmouseenter()andmouseleave()– mouse events that occur when the cursor enters and leaves an element areafocus()– an event that happens when a web form is focused
There are many more events; you can explore them on the official jQuery site[5]. For example, to assign a click event to all paragraphs on the page, you can use:
> $("p").click();
Now, you must specify the actions that will take place upon a click event:
> $("p").click(function(){
> // action you want
> });
Let’s hide a paragraph on a mouse click:
> <!DOCTYPE html>
> <html>
> <head>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
> </script>
> <script>
> $(document).ready(function(){
> $("p").click(function(){
> $(this).hide();
> });
> });
> </script>
> </head>
> <body>
>
> <p>click on me to hide</p>
> <p>this will also be hidden after click</p>
>
> </body>
> </html>JQuery Features
jQuery also provides a straightforward way to add effects to your web page, ranging from simple animations to more complex effects. Here are some examples:
.animate()– runs a specific animation with specific CSS properties.clearQueue()– clears the queue of all not yet executed items.delay()– delays the execution of queued items.fadeOut()– turns an element invisible by fading it out
There are many more effects; you can explore them here[6]. Let’s create a simple example of an animation using the .animate() method. In this example, we’ll animate a <div> element moving to the left:
> $(document).ready(function(){
> $("button").click(function(){
> $("div").animate({left:'250px'});
> });
> });
As you can see, when the document is ready, on a button mouse click, the <div> element will move left by 250 pixels. The complete example looks like this:
> <!DOCTYPE html>
> <html>
> <head>
> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
> </script>
> <script>
> $(document).ready(function(){
> $("button").click(function(){
> $("div").animate({left:'250px'});
> });
> });
> </script>
> </head>
>
> <body>
> <button>move the element</button>
> <div style="background-color:tomato;height:50px;width:50px;position:absolute;">
> </div>
>
> </body>
> </html>In Summary
Now that you have a basic understanding of how to use jQuery, you can start with simple tasks and gradually move on to creating more complex web pages. Utilize events, effects, selectors, and other features to enhance your projects. You’ve learned how to enable jQuery, select objects, perform events, and add special effects—these are solid foundations to explore and master all the features that jQuery has to offer. Happy coding!
[1]: https://en.wikipedia.org/wiki/KISS_principle
[2]: https://en.wikipedia.org/wiki/Content_delivery_network
[3]: https://api.jquery.com/ready/
[4]: https://www.w3schools.com/jquery/trysel.asp
[5]: https://api.jquery.com/category/events/
[6]: https://api.jquery.com/category/effects/