CSS, JavaScript and XHTML Explained

XHTML Elements, their parent, children, attributes and default browser presentation November 21, 2008

Note:

1. Attributes: All elements accept the standard and internationalization attributes of id, class, title, style, dir, and lang unless otherwise noted. The attributes column lists elements specific attributes and exceptions to the core attributes. Required attributes have been emphasized.
2. Even though the type attribute is not required by the specifications, always define type because IE is stupid.
3. Inline: <a>, <br>, <span>, <bdo>, <map>, <object>, <img>, <tt>, <em>, <strong>, <dfn>, <code>, <q>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <sub>, <sup>, <input>, <select>, <textarea>, <label> and<button>
   Block:
   <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr>, <blockquote>, <address>, <fieldset>, <table>
   Flow: text < form > and all the inline and block elements
   Empty: self closing element, include a slash before the end of the opening tag to self close. Contains no children
4. Table elements: 0 or 1 optional <caption> element, 0 or more optional <col> elements OR 0 or more optional <colgroup> elements, 0 or 1 optional <thead> element, 0 or 1 optional <tfoot> element, and REQUIRED either one or more <tbody> elements OR one or more <tr> elements.

jQuery Tutorial: DOM Manipulation and sorting November 15, 2008

JQuery is a lightweight JavaScript library that helps you quickly develop events, animations, and AJAX interactions.

In this tutorial we go over the following:

• Setting up your environment
• $(’document’).ready() replaces onLoad()
• Return a DOM object or objects
• innerHTML and textNodes
• Child and Sibling nodes and appending the DOM
• Parent nodes and appending them to the DOM
• Removing DOM elements and text nodes
• Replacing and Cloning the DOM
• Effects with jQuery

Note that the test javascript files associated with each section go with the same XHTML file.

Setting up your environment for this tutorial:

• Download the JQuery library Generally you will want the minified version, but for today, download the uncompressed version so you can read some of the code if you so choose.

• Save it locally in a directory (let’s call it "js" for this tutorial)

• Create a new HTML page (Sample file)

• Link to the JQuery file - <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
  You may need to change the 1.2.6 part to whatever the current release number is.

• Create a new javascript file, and call it "myCode.js"

• Link to your javascript file - <script type="text/javascript" src="js/myCode.js"></script>

• Add some HTML to your page (this is what we’re going to manipulate).

• You can also add some CSS.

ready method in anonymous function

The first step is to create an anonymous function withing your myCode.js file to encompass all of your javascript. If you take a look at your JQuery file, you’ll note that the entire file is in an anonymous function:

(function(){
 // code here

})();

All of your the code that you create should be included in it’s own anonymous function. This ensures that the jQuery variables are local: your variable declarations will not break the jQuery library, and the jQuery library will not overwrite your variables, methods and properties.

For our own javascript, we are going to encapsulate all our code in an anonymous function. However, since we are accessing elements of the DOM, we need to ensure that the DOM is loaded. We can’t use the parenthesis at the end as in the code above, which executes the anonymous function immediately, since our DOM isn’t loaded yet. We should only execute our anonymous function once we have the DOM. Without jQuery, and without much Javascript skill, the usual route is to include a document.onLoad event. Instead of using onLoad, which makes us wait until all the images are loaded, we’re going to use jQuery’s ready function — $(document).ready() — which executes when the DOM is ready.

The $(document).ready() function has advantages over other load time event handlers. Everything inside it will load as soon as the DOM is loaded, without having to wait for the page contents to be completely loaded. Ready is fired as soon as the DOM is registered by the browser, which allows for hiding and showing effects and other effects as soon as the user sees the page elements. Unlike the onLoad method, which is limited to only one function, the jQuery ready method allows for multiple functions to be loaded within it.

$(document).ready(function() {
 // code here
 });

Add the code above to your myCode.js file.jQuery

Targeting elements in the DOM with CSS and XPath

jQuery enables selecting elements with the same syntax that you would use to target that element with CSS. For example, we can target the first <h2> in our html file these two ways among others: (test js)

• $("h2:first")
• $("#mainContent > h2")

Take a look at the official jQuery Selectors page to get a better understanding of how you can use CSS syntax to target elements.

DOM Manipulation

The following are explanations and examples of the DOM manipulation methods provided by the jQuery core. The jQuery domentation for the DOM manipulation methods can be found at http://docs.jquery.com/Manipulation

jQuery’s version of innerHTML and textNodes

jQuery replaces innerHTML with the html() method to both return and set innerHTML with (and without) HTML elements. To return or set text, similar to retrieving and setting textNodes, use jQuery’s text() method. The main difference between the two involves the returning and rendering of HTML elements. (test js)

• html()
  returns the HTML content of an element. This is directly equivalent to the innerHTML property commonly used by JavaScripters.
  var myHTMLContent = $("#mainContent").html(); // "<h2>My jQuery te…. (to) …functionality</p>
• html(myString)
  Sets the innerHTML for an element to myString.
  $("h2:first").html(’This is new <em>header</em> content’); // changes the h2, and adds some emphasis
• text()
  returns the text content, or text nodes, of an element without any markup as one string
var myTextContent = $("#mainContent").text(); // returns same as html(), but without tags;
• text(myString)
  Resets the text node value for an element to myString.
$("h2:first").text(’Ugly <em>header</em>); // escapes ‘>’ and ‘<’ instead of rendering italics

Child & Sibling nodes

append() and prepend() methods: similar to appendChild, except jQuery accepts a string, a DOM element, or a jQuery object as valid arguments. jQuery converts the argument into a text node or element depending on what is passed. (test js)

1. $("#leftNav ul").append("<li>after the last &lt;li&gt;</li>"); // adds <li> at the end of <ul>
2. $("#leftNav ul").prepend("<li>before the first &lt;li&gt;</li>"); // adds <li> at the start of <ul>
3. $("#leftNav ul").append($("#mainContent h2")); // moves headers from the mainContent to the leftNav
4. 
$("#leftNav ul").append($("#mainContent h2").html()); //copies text of the first h2, adds it to leftNav

There are two similar methods — appendTo() and prependTo() — which are basically inververted verstions of append() and prepend(). A.append(B) is about equal to B.appendTo(A)

Note: As shown in example 3, if you try to append an element that already exists in the DOM, that element will first be removed from DOM before being reinserted, or appended, in the new location.

before() and after() methods: similar to insertBefore() method (and the non-existant, but found in many javascript libraries, includeing this one, insertAfter()). The after() method inserts a node after a selected one. The before() method inserts a node before a selected one, like the javascript standard method of insertBefore().

1. $("#leftNav ul").before("<h2>Left Navigation</h2>"); // adds header before the <ul>
2. $("#leftNav ul").after("<h4>New Header</h4>"); // adds header after the <ul>
3. $("#leftNav h4").before($("#mainContent h2").html()); //copies text of the first h2, adds it to leftNav before our new <h4>

There are two similar methods — insertBefore() and insertAfter() — which are basically inververted versions of before() and after(). A.before(B) is about equal to B.insertBefore(A)

Parent nodes

wrap(), wrapAll() and wrapInner() methods: wrap selected element or elements in another element. The argument can be an XHTML or DOM element as a string. If the element has child nodes, the element being wrapped will be put in the deepest child node of the first element. (test js)

1. 
$("#leftNav ul").wrap("<div class=\"red\"></div>"); // the <ul> gets wrapped in a <div>
2. $("#mainContent h2").wrap("<blockquote class=\"blue\"></blockquote>"); // the 2 <h2>’s get wrapped in a two separate <blockquote>s
3. $("#mainContent h2").wrapAll("<blockquote class=\"blue\"></blockquote>"); // the 2 <h2>’s get wrapped in a single <blockquote>, moving the second <h2> up to be the nextSibling to the first <h2>
4. $("#mainContent h2").wrap(’<div class="shell"><div class="blue"></div><ul class="red"><li></li></ul></div>’); // puts the H2s in two "blue" divs, the LIs will be empty.
5. $("#mainContent h2").wrapAll(’<div class="shell"><div class="blue"></div><ul class="red"><li></li></ul></div>’); // puts the H2s in ONE "blue" div, the LI will be empty.
6. $("#mainContent p").wrapInner("<a href=\"#\"></a>"); // puts an <a> between the <p> and the <p>’s first child.
7. $("#mainContent").wrapInner("<blockquote class=\"blue\"></blockquote>"); // wraps all the children of #mainContent into one parent <blockquote>

remove() and empty()

remove(), empty() and replace() methods: similar to the native javascript removeChild() method, use remove() to remove element(s) from the DOM. Use the empty() method to keep the element, but remove the element’s children.
Note that remove() can take a parameter, but empty() does not. (test js)

1. $("#leftNav li:first").remove(); // removes the first LI
2. $("#leftNav li").remove(); // removes all the LIs from the #leftNav

3. $("#leftNav li").remove(":contains('Second')"); //remove the LI containing the term.
   Note that the string is case-sensitive
4. $("#mainContent h2:first").empty(); //removes the text in the first H2, but the h2 is not removed from the DOM
5. $("#mainContent h2:contains('second')").empty(); //removes the text node child of the H2 containing the letters "second"

replaceWith(), replaceAll() and ncloe()

replaceWith() and clone() methods: Cloning creates copies of the DOM elements copied, including the new elements in the DOM, but does not append them to the page. To append the clone to the page, use one of the methods above.

1. $("#leftNav li:first").replaceWith("<li>new first <em>LI</em></li>"); //text changed, LI is emphasized
2. 
$("#leftNav li:first").text().replaceWith("new first <em>LI</em>");// grabs text, and replaces it. No <li> needed
3. var navCopy = $("#leftNav").clone(); //copies it
$("#mainContent").append(navCopy); //apends it
   The problem with cloning is that IDs are copied too, and ID’s need to be unique!

Effects with JQuery

The above was an overview of all the DOM manipulation functions. If you’re doing a simple site, those are likely all the javascript helpers you need. But, if that was all you could do with JavaScript, then you really wouldn’t need javascript libraries. The power of the libraries is in everything else they do for you. With jQuery you can create drag and drop, autocomplete, sorting, etc., the is unobtrusive and works cross browser in less than 10 lines of javscript. Proof? Here are two examples:

Sorting a table with javascript:

1. Create a table in plain old XHTML, and populate that table with data. Give your data table the class of sort with: (sampleFile)

   <table class="sort">

2. Download the jquery libary and the jquery.tablesorter.js file.

3. Attach the two jQuery files and your own JavaScript file to your XHTML file by including the following in the header of your XHTML file:

   <script type="text/javascript" src="jquery-1.2.6.js"></script>
   <script type="text/javascript" src="jquery.tablesorter.js"></script>
   <script type="text/javascript" src="myTableCode.js"></script>

4. In your JavaScript file (called myTableCode.js above) include the simple script:

   $(document).ready(function() {
       $("table.sort").tablesorter();
    });

5. Literally, the previous step is all there is to sorting tables bu column content in However, that just sorts it based on the content of the HTML. So, if you have an <em> or <p> in one table cell and not in another, it may not sort the way you want. To sort based on a portion of your code inside a cell, use the textExtraction utility provided by jQuery:

   $(document).ready(function() {
   
    $("table.sort").tablesorter({
           // define a custom text extraction function
          textExtraction: function(node) {
               // if there is a link, return the content of the link
   		if(node.getElementsByTagName('a')[0]){
   				return node.getElementsByTagName(’a')[0].innerHTML;
       			}
           return node.innerHTML;
           }
       });
    });

See my example

Making a list sortable

Similar to the sortable table, you can make a make a list that is sortable by dragging list items around. (example)

1. Create a list, give it the class of "sortable".

   <ul class="sortable">
     <li>This is my first list item</li>
     <li>second list item</li>
     <li>Brief 3</li>
     <li>Long 4</li>
   </ul>

2. Go to the jQuery Download Builder and select “sortable”. You’ll note that the other required library elements are automatically selected.

3. Attach the three javascript files downloaded from the builder, and your own javascript file, to your page with the list.

   $(document).ready(function() {
        $("ul.sortable").sortable();
      });

Userful Links

• Visual GUI showing all the features of jQuery
• Download the components you need
• Download the JQuery library
• This jQuery Tutorial permalink