Notes on JQuery

Google Download JQuery

Select “Download the compressed, production jQuery 2.1.1” to go to

Save this code into a file named ‘jquery.js’.

  <script src="jquery.js"></script>

Or use the via:

<script src=""></script>

Create a file named index.html.

  <script src="jquery.js"></script>
  <script src="index.js"></script>
  <h1>Hello World</h1>

In the same folder, add the jquery.js file downloaded above and add a new file index.js with the following code:

$(document).ready(function() {
  console.log('...Hello World');

Open index.html in Google Chrome. Right click the heading and select “Inspect Element”. Then, click on the Console tab. This will show the message from the index.js file. This prints “…Hello World” to the console when the page is ready.

See for more details.

$(document).ready(function() {
  $('div.mydiv').addClass('classToAdd'); // <div class='mydiv classToAdd'>
  $('#myID > li').addClass('classToAdd'); // <div id='myID'><li class='classToAdd'>
  $('#myID li.myclass').addClass('classToAdd'); // <div id='myID'><li class='myclass classToAdd'>
  $('#myID li:not(.classToAdd)').addClass('classToAdd'); // <div id='myID'><li class='classToAdd'> // Adds the classToAdd class to any li tag contained within an element whose id is myID which does not currently have the classToAdd class
  $('a[href^="mailto:"]').addClass('mailto'); // <a href=''>e-mail me</a> // Adds the mailto class to any anchor whose href starts with "mailto"
  $('a[href$="pdf"]').addClass('pdflink'); // Ends with pdf
  $('a[href^="http"][href*="google"]').addClass('googleClass'); // <a href='' class='googleClass'></a>

  $('li li li').addClass('classToAdd');
  $('li > a').siblings().addClass('classToAdd');
}); // starts with http and contains google