Jquery Tutorial home

admin admin Aug 12, 2020 2955 2

Jquery Tutorial home

Jquery Tutorial HOME:

Jquery is a library of JavaScript. This has made JavaScript programming much easier.

Jquery is also very easy to learn. Through our JQuery tutorial, we have tried to present the JQuery Library in a very simple way so that you too can understand.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Jquery example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
</head>
<body>

    <h2>This is a heading.</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click</button>

</body>
</html>

 

Output: 

 

Jquery example:

Learn JQuery through examples! Because an example is better than a thousand words. You will find numerous examples in our JQuery tutorials, through which you can easily learn JQuery.

The main purpose of JQuery is to make it easy to use JavaScript on any website.

What do you need to know before starting the Jquery Tutorial?

What do you need to know before you start learning it?

yes  HTML: Provides web page content.

yes  CSS: Creates the design of web pages.

yes  JavaScript: Determines the style or behavior of web pages.

You can learn the above by visiting the self-link.

 

What is jQuery?

JQuery is a JavaScript library in the category "Very simple and less talk, more work". The main purpose of this is to make the use of JavaScript easier on your website.

The work that is done by writing multiple lines of code in JavaScript can be done by writing only one line of code in JQuery.

Because we already know that JQuery is a library of JavaScript. In this library called JQuery for performing various tasks, the relevant codes are recorded through different methods.

You can easily solve the related tasks by using those methods as a reference according to your needs.

JQuery has also made difficult issues like Ajax and DOM of JavaScript very easy.

The following features exist in the Jquery Library:

1. DOM method

2. CSS method

3. HTML Event Method

4. Animation method

5. Ajax method

6. Utility method

Tip: In addition to the above features, you can use the JQuery plugin to do the necessary work.

 

Why use Jquery?

JavaScript has numerous libraries / frameworks. But Jquery is very popular. Because it is a perfect library of JavaScript.

Many large companies also use jQuery. E.g.

yes Google

yes Microsoft

yes IBM

yes Netflix

JQuery browser support:

The JQuery developer team knows cross-browser issues very well and they have applied that knowledge to the JQuery library. That's why JQuery is very well supported in all browsers including IE version-6.

Adding JQuery to web pages

There are two ways you can add a JQuery library to a web page. The ways are given below:

1. Download the jQuery library from jQuery.com and add it via the <script> tag.

2. Connecting to the Content Delivery Network (CDN) via the <script> tag.

Jquery download:

There are two versions of Jquery. If you wish, you can download both versions:

yes Production version - usually used for live websites because it is a minified and compressed file.

yes Development Version - Usually used for website development and testing. Because this file is very easy to read and edit.

You can download the above two versions from jQuery.com.

Since the JQuery library is a single JavaScript file. So you can add the scr attribute of the <script> element in the <head> section to connect the JQuery library to the HTML document.

<head>
<script src="jquery-3.1.1.min.js"></script>
</head>

 

Caution: Place the page in which you will use the Jquery Library and the Jquery Library in the same directory. That is, follow exactly the same rules as the CSS and JavaScript external files are linked to the HTML document.

Are you surprised! Why not use type="text/javascript" in the <script> element?

It is not mandatory to use it in HTML (5). This is because HTML (5) and most browsers have JavaScript by default.

JQuery CDN:

If you do not want to download and host the JQuery, you can connect the JQuery Library to your website via the Content Delivery Network (CDN). In this case, the library will work as if it is stored in a directory on your site.

Both Google and Microsoft host Jquery. If you want to take Jquery hosting from them, follow any one of the following rules:

Google CDN:

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Jquery example</title>
  5.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  6.     <script>
  7.     $(document).ready(function(){
  8.       $("button").click(function(){
  9.         $("p").hide();
  10.       });
  11.     });
  12.     </script>
  13. </head>
  14. <body>
  15.     <h2>This is a heading.</h2>
  16.     <p>This is a paragraph.</p>
  17.     <p>This is another paragraph.</p>
  18.     <button>Click</button>
  19. </body>
  20. </html>

 

Output:

 

Microsoft CDN:

Example:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Jquery example</title>
  5.     <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
  6.     <script>
  7.     $(document).ready(function(){
  8.       $("button").click(function(){
  9.         $("p").hide();
  10.       });
  11.     });
  12.     </script>
  13. </head>
  14. <body>
  15.     <h2>This is a heading.</h2>
  16.     <p>This is a paragraph.</p>
  17.     <p>This is another paragraph.</p>
  18.     <button>Click</button>
  19. </body>
  20. </html>

 

Output:

 

Thank You............

Tags: