jQuery Getting started


JQuery installation

You can use the following methods to add jQuery to your web pages:

  1. Download the jQuery library from jquery.com
  2. Load jQuery from the CDN (content distribution network).

Download from jquery.com

The jQuery library is a JavaScript file that you can reference using HTML's <script> tag:

Tip: put the downloaded file in the same directory with the current HTML page, then you can use jQuery.

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

Load from CDN

If you do not want to download and store the jQuery files, refer it through the CDN.

Google CDN example :

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>

Best installation method

<body>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='jquery-3.1.1.min.js'></script>") </script>
</body>

If failed to load jQuery when using the CDN, local jQuery file will be loaded to ensure correct jQuery installation.


First Example

The following example demonstrates the jQuery hide() function, which hides all the <p> elements in the HTML when the button is clicked.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h4>jQuery hide() function demo</h4>
    <p>I will be hidden!</p>
    <p>Me too!</p>
    <input type="button" id="btn" value="Click me" />
    
    <script src="http://libs.baidu.com/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#btn').click(function () {
                $('p').hide();
            });
        });
    </script>
</body>
</html>

jQuery hide() function

I will be hidden!

Me too!




Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.
TwitterGoogle+Facebook