rurtubia
6/4/2015 - 12:26 PM

JQuery Fundamentals. More at http://api.jquery.com/

JQuery Fundamentals. More at http://api.jquery.com/

stylesheet.css
content_copyfile_download
div{
  height: 60px;
  width:100px;
  border-radius:5px;
  background-color:#69D2E7;
  text-align:center;
  color:#0000FF;
  font-family: Verdana, Arial, Sans-serif;
  opacity:0.5;
}
05_.fadeTo().js
content_copyfile_download
$(document).ready(function(){
  $('div').mouseenter(function(){
    $('div').fadeTo('fast', 1);
  });
  $('div').moseleave(function(){
    $('div').fadeTo('fast', .5);
  });
});
04_.slideDown().js
content_copyfile_download
$(document).ready(function(){
    //slides a DOM object down.
    $('div').slideDown();
});
03_functions_in_jQuery.js
content_copyfile_download
$(document).ready(function(){}
  /*
      function(){
        jQuery magic;
      }
      
      Indicates that some function will be executed here.
  */
)
02_preparing_the_script.js_file.js
content_copyfile_download
$(document).ready(
  //$(document)
  //indicates that the javascript in the file will affect the 'document',
  //in this case the index.html
  
  //.ready()
  //is a function that tells that the events will happen as soon as the HTML loads.
);
01_linking_html_js_jquery.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <!--the script tag links html and javascript.-->
        <script type='text/javascript' src='script.js'> </script>
        <!--this script links to the jQuery libraries..-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <!--CSS reference-->
    		<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    </head>
    <body>
        <div></div>
    </body>
</html>