Ways To Add jQuery

Next ❯jQuery Selectors

It provides a batter way to write your jQuery code for your webpage

  • turned_in_notThis can be done in two ways
    • External jQuery
    • Internal jQuery

External jQuery

  • Declare jQuery codes in a separate .js file
  • Then include that file in your HTML document using <script> tag
  • <script> element goes inside the <head> or <body> section
  • Mainly used to run common jQuery Codes for your whole web pages
Example:
  • turned_in_notExternal jQuery
    <!DOCTYPE html>
<html>
<head>
<title>HTML External jQuery Example</title>
<!--Required jQuery Library File -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="myJqueryScript.js"></script>>
</head>
<body>
  <button>Button</button>
  <p id="blue">Click button to set text color red</p>
</body>
</html>
    "myJqueryScript.js" file
    $(document).ready(function(){
  $("button").click(function(){
    $("#blue").css("color","blue");
  });
})
    • Note! Both the files are in the same folder
    OUTPUT

    Click button to set text color blue

Internal jQuery

  • You can declare jQuery codes in <head> or <body> section of the HTML document using <script> tag
  • Mainly used to add specific jQuery codes, like specific jQuery codes for your specific page
  • Alert! If declaring jQuery codes in <head> then write your codes inside ready event
Example:
  • turned_in_notInternal jQuery (Inside <head>)
    <!DOCTYPE html>
<html>
<head>
<title>HTML Internal jQuery Example</title>
<!--Required jQuery Library File -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".red").css("color","red");
  });
});
</script>
</head>
<body>
  <button>Button</button>
  <p class="red">Click button to set text color red</p>
</body>
</html>
    OUTPUT:

    Click button to set text color red

  • label_outlineInternal jQuery (Inside <body>)
    <!DOCTYPE html>
<html>
<head>
<title>HTML Internal jQuery Example</title>
<!--Required jQuery Library File -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <button>Button</button>
  <p class="red">Click button to set text color red</p>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".red").css("color","red");
  });
});
</script>
</body>
</html>
    OUTPUT:

    Click button to set text color red

  • Tips! Write your jQuery codes inside ready event and declare it either inside <body> or<head>
  • Benefits! All your codes can be written in one script if declared inside ready event and you are free to place your jQuery code at any position (start or mid or end) inside <head> or <body>
  • Note! If declaring jQuery codes in <body> and not declaring codes inside ready event then write your codes below your all selectors used in your <script> code, See below example:
  • turned_in_notRight Way
    <!DOCTYPE html>
<html>
<head>
<title>Without using Ready Event</title>
<!--Required jQuery Library File -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <button>Button</button>
  <p class="red">Click button to set text color red</p>
  <!--Below we are using ".red" & "button" as selector then you must declare
  your script after all button element and all elements having className="red"-->
  <script>
    $("button").click(function(){
      $(".red").css("color","red");
    });
  </script>
</body>
</html>
    OUTPUT:

    Click button to set text color red


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

TryOut Editor

receipt
❯