Tags : JavaScript Intro



Jquery

Jquery helps us write less javascript code when interacting with web elements. It is one of the most used JavaScript libraries in web development.

Installing Jquery

  • Watch the video for more detailed instructions.
  • Create a folder with the name "example". Create two folders inside of "example", one named "css" and the other named "scripts". Add a file called index.html in the main "example" folder.
  • Download Jquery uncompressed version and put in your scripts folder.

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/example.css">
  </head>
  <body>
    <h1>This is a heading</h1>
    <p class="mouse-trap">This is a paragraph</p>
    <script src="scripts/jquery-1.11.3.js"></script>
    <script src="scripts/myscript.js"></script>
  </body>  
</html>

example.css

h1 {
  background-color: yellow;
}

myscript.js

$("h1").on("click", function(){
  alert("Hello I am a heading!")
  console.log("this is going to get prionted in the console log.")
})

$(".mouse-trap").on("mouseover", function(){
  alert("I saw a mouse pass by here..");
})

Try the following:

  • Create a new web page and add the Jquery library to it. Remember it goes under the scripts folder.
  • Add your own myscripts.js file and place it on the scripts folder. Remember to link it to index.html (don't forget to link the Jquery library too).
  • Add a paragraph with some content to your site. Add a click listener that opens an alert with your own message.
  • Add another paragraph and use "mousever" to trigger another alert.