jQuery - what can it do?

 

It can collect items for you to do something with

  1. Take a simple page with a bunch of list items - such as this one shown below
  2. Let's say you want to do something will all the list items.
  3. Add a reference to the jQuery library in your header:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  4. Add this code just before the end of the body - after all the html statements:

    $('<br /><p class="commentary>Page contains ' + $('li').length + ' &lt;li&gt; elements!</p>')
    .css("background-color", "#FF0") .css("border", "3px solid red")
    .appendTo('body');

  5. See the result

 

 

It can modify your existing page in a dynamic way

 

  1. Take a simple page with a bunch of list items - such as this one shown below
  2. Let's say you want to indicate with a graphic which items are pdfs - and you want it to be dynamic so that no matter how many items or what types are added, the correct ones will still have the graphic indicators.
  3. Add a reference to the jQuery library in your header (as in the previous example):
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  4. Add this code just before the end of the body - after all the html statements:

    $("li a[href$=.pdf]").before("<img src='small_pdf_icon.gif' align='absbottom' />");

  5. See the result