Notes on JQuery

Google Download JQuery
jquery.com

Select “Download the compressed, production jQuery 2.1.1” to go to code.jquery.com

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


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

Or use the ajax.googleapis.com via:


<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

PUTTING IT TOGETHER
Create a file named index.html.


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

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.

FINDING ELEMENTS
See api.jquery.com 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='mailto:scottizu@gmail.com'>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='http://www.google.com' class='googleClass'>www.google.com</a>

  $('tr:even').addClass('classToAdd');
  $('tr:nth-child(odd)').addClass('classToAdd');
  $('td:contains(Henry)').nextAll().andSelf().addClass('classToAdd');
  $('td:contains(Henry)').parent().children().addClass('classToAdd');
  $('li li li').addClass('classToAdd');
  $('tr').find('td:eq(2)').addClass('classToAdd');
  $('td:contains(Henry)').parent().first().addClass('classToAdd');
  $('li > a').siblings().addClass('classToAdd');
  $('a[href$="pdf"]').closest('ul').addClass('classToAdd');
}); // starts with http and contains google

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s