jQuery in Visualforce

VF+jQuery (using CDN)

<apex:page standardStylesheets="false" doctype="html-5.0">
  <head lang="en">
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <style>
          ⌗sampleDiv{border:2px solid black;}
          .red{background-color:red;color:white;}
      </style>
  </head>
  <body>
      <div id="sampleDiv">
          click anywhere in this div
      </div>
      <br/><br/>
      <apex:form >
          <apex:inputText id="output" html-placeholder="Click here"/>
      </apex:form>
      <script>
          $(document).ready(function(){
              alert('Hello, jQuery');
              /*
                  Notice the difference in the way element's Id have been referenced in jquery.
                  for pure html tag use -> $('⌗idName')
                  for VF tags use -> $('[id$=idName]')
                  And for Classes
                  pure html tag - > $('.className')
                  VF tags -> $('[class$=className]')
              */
              $('⌗sampleDiv').click(function(){
                  $(this).toggleClass('red');
              });
              $('[id$=output]').click(function(){
                  alert('InputText clicked');
              });
          });
      </script>
  </body>
</apex:page>