What is jQuery ?

Next ❯jQuery Syntax

It is a lightweight JavaScript library

  • Simplifies various tasks by "write less code, do more"
  • File Extension: .js, same as JavaScript
  • turned_in_notFeatures supported by jQuery
    • HTML DOM manipulation
    • CSS manipulation
    • Event methods
    • Effects
    • Animations
    • AJAX Support
Sample Code:

JavaScript Code

document.getElementById("demo").innerHTML="Hello JavaScript!";

jQuery Code

$("#demo").html("Hello jQuery!");
  • Above, both the codes do the same thing
  • Hope you understand now about "write less code, do more" 😃

Add jQuery to Web Pages

You can add jQuery via any of the below

  • Adding Locally
  • Adding CDN (Content Delivery Network)
  • turned_in_notAdd Locally
    • Download the jQuery library file from jQuery.com
    • Add the file in your Web Pages inside <head> element
    <head>
  <script src="jqueryLibraryFileName.js"></script>
</head>
  • label_outlineAdd CDN
    • Include jQuery from a CDN, like Google or Microsoft
    • Add the file link in your Web Pages inside <head> element
    Google CDN
    <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
    `Microsoft CDN
    <head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
    `
  • Tips! Use CDN, Most CDN's will served from the server closest to users, which leads to faster loading time and also, mostly it's stored on the users PC in cache, while visiting another sites which also provides faster loading time

Write Your First jQuery Script!

Below, only one way is shown to write and run jQuery in your HTML Web Page, more will come in coming section

Steps:
  • turned_in_notOpen Your Text Editor
    • Here, we are using Notepad as a text editor and Windows as an operating System
    • Option 1: Desktop Screen->Right Click->New->Select Text Document
    • Option 2: Start button->Search Notepad
    • Option 3: Press Windows Button + R -> Type Notepad-> Press Enter
    • You can try any of the above option, And for other text editors you just open the editor
  • mode_editWrite your jQuery script
    • You can write or copy the script in your text editor
    $(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","teal");
  });
});
  • descriptionSave the file
    • You save the file with extension .js
  • mode_editInsert jQuery file in HTML page
    • Below jQuery file name used is myjQueryFile.js
    <!DOCTYPE html>
<html>
  <head><title>My First HTML Page with jQuery</title>
    <!--Required jQuery Library File -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!--jQuery File Inserted syntax-->
    <script src="myjQueryFile.js"></script>
  </head>
  <body>
    <button>Click</button>
    <p>Click above button to change my color.</p>
  </body>
</html>
  • doneRun your Updated HTML file in the browser
    • Here both the HTML & jQuery Files are in the same folder
    • Now, Open the saved HTML file in your browser!
    • OUTPUT:

      Click above button to change my color.



    • Bingo! you have just write and run your first jQuery file with HTML

  • jQuery Syntax
❮ Prev Getting Started
Next ❯jQuery Syntax
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯