What is jQuery and how to use it on a server
Introduction
jQuery is a specific Javascript library, and it was designed to make Javascript usage on your web-site much easier. It has a lot of different methods, that are basically wrappers for a ton of code, you would have to write, instead of just calling the required jQuery method. Main jQuery features are: * AJAX calls * DOM/HTML manipulations * CSS manipulations * HTML event methods * Animations and effects * plugin support * cross-browser support
jQuery is used by many top-tier companies in their projects, so it has become an industry standart. If you are occupied in this area, or want to improve your skills it is worth looking into jQuery.
In this guide i will describe how to setup jQuery and will go through several interesting features, that it grants.
What is DOM
DOM or Document Object Model - is a platform and language independant program interface, that allows programs and scripts accessing HTML and some other documents ( XML, XHTML ) and change the contents, structure and design of them.
DOM treats such documents as a tree structure, where each node is an object, and by manipulating those objects visual representation of HTML/XML/etc is changed.
Basically when you open html web-page interface is created by HTML. Initially noone thought that there would be Javascript, or something else used,
and HTML was not as it is now. From the modern point of view, specifically in Javascript, web-page is an UI to the programming language.
So basically DOM is a kind of bridge between code itself and elements of the page.
Javascript is object oriented. So each object, for example <button></button>, you see in the code of the page, is a DOM object.
If you want to operate with an object using Javascript, you need to have a DOM object, that represents it. After it, you can interact with object's
properties, methods and etc.
This is actually all related to Javascript, but what does it mean for jQuery ? jQuery simplifies your web-page code a lot visually, and it is easier to navigate
through it.
HTML code has a tree based structure, so by moving through this tree, and looking at each object carefully. This is why it is important to keep your code
clean and easy to read. KISS[1] applies perfectly to using jQuery.
Setting up
Officially there are two ways of installing jQuery: 1) Getting it from Content Delivery Network[2] ( CDN ), for example https://cdnjs.com/libraries/jquery/ To get it from CDN, visit for example https://cdnjs.com/libraries/jquery/ or use microsoft, or google CDN links, by linking it in the html code. 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 big bonus of CDN version, is that if visitor of your web-site have visited another site, he may already have jQuery cached, and thus your page will load much faster.
2) Downloading from the official web-site jQuery.com There are two versions: * Development: not recommended, it is a testing version * Production: released and supported version
To download from the official site, visit http://jquery.com/download/ The jQuery library is a javascript file, and you enable it simply by adding to your html file the following section. Do not forget to place jQuery file near the html file, you are editing or creating.
> <head>
> <script src="jquery-3.2.1.min.js"></script>
> </head>
Basic usage
1) At first let's create an 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>
src attribute points to a jQuery souce, in this example i have used a Miscrosoft CDN link. If you use a local copy, store the downloaded file in the same directory as your html file, and point to it.
2) Executing the code only when page is loaded ( DOM is ready to be manipulated ). Obviously we want to run our code only when page is fully loaded, jQuery has a specific statement, called ready event[3] for this purpose. It allows you to run the code as soon as DOM is ready to be controlled, without a need to wait for banners and all images to be loaded. This statement looks like this:
> $( document ).ready(function() {
> // Write your code here
> });
For example let's display text, when it can be controlled already
> $( document ).ready(function() {
> $("p").text("DOM is loaded.");
> });
Now if you put that piece of code in your html page, so it looks like
> <!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>
You will see a message that DOM is loaded.
Selectors
Selectors are one of the most important parts of jQuery. They allow you to manipulate elements of HTML. Selectors are used to choose or "locate" HTML elements of the page, based on their identificator, class, type, attribute and others. There are some unique selectors, but many are based on CSS selectors (https://www.w3schools.com/cssref/css_selectors.asp). All jQuery selectors must start with
> $()
Here are some wide used selectors
* $("*") selects all elements
* $(this) selects current HTML element
* $("p:first") selects first paragraph element
* $("[href]") select all elements with href attribute
* $(":button") select all <button> <input> with type="button" elements
* $("tr:even") Select all even elements <tr>
* $("tr:odd") Select all uneven elements <tr>
Feel free to use this tool[4] to test different selectors.
let's hide an element with a "hideme" identificator on mouse button click
> $(document).ready(function(){
> $("button").click(function(){
> $("#hideme").hide();
> });
> });
So basically on mouse button click the element with hideme identificator will be hidden. Here is the full 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>
jQuery events
One of jQuery main goals is to reply for specific events, basically do something on the web-page, when specific event is triggered. Some of the events are: * click() - mouse event, happens when element is clicked on * dbclick() - mouse event, same but for doubleclick * keypress() - keyboard event, happends on key press * mouseenter() and mouseleave() - mouse events, happen when you cursor enters the element area, and leaves it * focus() - happens, when web form is focused
There are much more events, feel free to look at them at the official site[5] of jQuery. For example, to assign a click event to all paragraphs on the page, use:
> $("p").click();
Now you need to define what will happen on click:
> $("p").click(function(){
> // action you want
> });
Let's hide paragraph on 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 effects
jQuery also has an easy way of adding some effects to your web-page, from simple animations to complex effects. Here are some of them: * .animate() - run a specific animation with a specific CSS properties * .clearQueue() - clear queue of all not yet executed * .delay() - delay the execution of of queued items * .fadeOut() - turn element invisible, by fading it to invisible
There are a lot of different effects, feel free to have a look at them here[6]. Let's prepare a simple example of animation, effects allow us to create. In this example let's perform an animation of a div element moving left:
> $(document).ready(function(){
> $("button").click(function(){
> $("div").animate({left:'250px'});
> });
> });
As you can see, when document is ready, on button mouse click div element will move left by 250 pixels. Full 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>
Conclusion
Now you have basic knowledge of how to use jQuery. Start with simple things and move to creating complex web-pages, utilizing events, effects, selectors and other features. You already know how to enable jQuery, how to select objects, how to perform events and add special effects. It can be a good start to master all the features of jQuery.
[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/