Google News
logo
jQuery Get Started

Downloading jQuery

There are several ways to start using jQuery on your web site. You can :
Download the jQuery library from jQuery.com.  
Include jQuery from a CDN (Content Delivery Network), like Google and Microsoft.

There are two versions of jQuery available for downloading :
Production version : this is for your live website because it has been minified and compressed
Development version : this is for testing and development (uncompressed and readable code).

First download a  jQuery and include in your document.

How It Works
The jQuery() or $() function is used for selecting a part of the document. It accepts any CSS selector expression and zero or more DOM nodes. It returns all the matched elements, which allows us to manipulate them to change their appearance.

Some examples :
$('p') : Accesses all the paragraph elements in your document.
$('div') : Accesses all the div elements in your document.
$('#A') : Accesses your document  with id=A
$('.b') : Accesses your document with class=b
jQuery Basic Syntaxes :
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>
Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Basic Syntax</title>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
     $("div").hide();
     });
  });
</script>
<style type="text/css">
.my_font{ 
color:#F90; 
font-size:24px; 
padding:5px 20px; 
font-style:italic; 
font-weight:bold;
}
.padding{ padding:6px 15px; margin:0px 20px;}
</style>
 
</head>
 
<body>
 
<div class="my_font"> Hello, World! </div>
<button class="padding">Click Here !</button>
 
</body>
</html> 
Output :
Google CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Google CDN</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
     $("div").hide();
     });
  });
</script>
<style type="text/css">
.my_font{ 
color:#F90; 
font-size:24px; 
padding:5px 20px; 
font-style:italic; 
font-weight:bold;
}
.padding{ padding:6px 15px; margin:0px 20px;}
</style>
 
</head>
 
<body>
 
<div class="my_font"> Hello, World! </div>
<button class="padding">Click Here !</button>
 
</body>
</html> 
Output :
Microsoft CDN :
<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Microsoft CDN</title>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
     $("div").hide();
     });
  });
</script>
<style type="text/css">
.my_font{ 
color:#F90; 
font-size:24px; 
padding:5px 20px; 
font-style:italic; 
font-weight:bold;
}
.padding{ padding:6px 15px; margin:0px 20px;}
</style>
 
</head>
 
<body>
 
<div class="my_font"> Hello, World! </div>
<button class="padding">Click Here !</button>
 
</body>
</html> 
Output :