jQuery

jquery

Congratulations on choosing jQuery for your web development works. It is a very powerful scripting language that helps you in creating great features for your website. jQuery works with all web technologies including PHP, ASP, WordPress, Python, Java, Ruby and C#. We have provided lots of jQuery Tutorials with Codes to help you master this web language within a matter of few days time.

Before you go into the different tutorials let us discuss some of the features of jQuery one by one.

What is jQuery?

jQuery is a JavaScript Library that is very fast in execution and small in size. It simplifies coding by making the codes smaller and easier to write. It contains large number of in-built functions that make HTML manipulations, event handling, AJAX & API calls, animation effects and validations easier to use.

jQuery works on every browser available today and is the top choice of web developers.

It is very easy to learn jQuery and our tutorials are made specially for beginners and advanced coders to learn and use jQuery in their projects.

How to use jQuery

There are 2 ways to use jQuery in your web page –

  • Download jQuery in your Website and Reference it
  • Use the jQuery from the CDN to Reference it

Download jQuery

The compressed and un-compressed latest versions of jQuery can be downloaded from here.

Use the un-compressed jQuery file in your production as it is smaller in size and saves bandwidth.
Once you have downloaded the jQuery file, put it in your website folder and give its reference in the Page Head section.

jquery reference

Here I downloaded the latest version of jQuery 3.1.1, added it to my Website folder, and gave its reference in my web page head area.

jQuery CDN

If you don’t want to download the jQuery then you can use jQuery CDN, to reference it directly, in the Page head like –

jquery reference

In the above line I referenced jQuery from Google CDN.

CDN stands for Content Delivery Network, they are known for their fast speed. The jQuery file referenced from a CDN will be loaded much quickly than that placed in your website.

Note – The loading of jQuery file kept in the page head may sometime interfere with the loading of the web pages therefore jQuery Reference can also be given just before the ending body tag (</body>).

This approach is recommended by most developers.

Common jQuery CDN’s

Some common jQuery CDNs are –

My First jQuery Code

Let us make our first jQuery code. There is a text box for entering your name and a button. When you enter you name in the text box and click the button, it will show the welcome message in a div.

The Code

my first jquery code

Enter your name and click button

DOWNLOAD THIS CODE

Explanation – I referenced the jQuery just before the body end tag. All jQuery codes must be written inside the $(document).ready(function () {//code });. This makes sure that the jQuery codes are executed when the HTML document of the page is ready for code execution.

Inside it, I created the button click event like this – $(“#submit”).click(function (e) {//code });.

The code inside the button click event shows the welcome message to the user in the div with id message.

The lines $(“#name”).val() gets the value of the text box (with id ‘name’) and $(“#message”).html() shows the message inside the div (with id ‘message’).

Moving forward with jQuery

By this time you already know all the basic things regarding jQuery. You can now go on and check some of the jQuery articles.

Validations

DOM Manipulation

API Implementation

AJAX Calls