jQuery Selector Table
Testing Area
jQuery has become the most popular JavaScript framework. A framework is an enhanced/mature JavaScript library, that simplifies the most used JavaScript tasks.

For example, jQuery uses the sizzle engine to simplify the selection of DOM elements. In standard, JavaScript a programmer uses either getElementById or getElementByTabName, but with jQuery the programmer has simpler selection mechanism. They simply use the jQuery object $, followed by a CSS selector in parenthesis, for example to select the element with ID of story1, one just uses $("#story1"). Not only does sizzle simplify JavaScript tag selection, but with the method css, one can set CSS properties rather than having to use the JavaScript style object. Full jsFiddle1 Version - of entire assignment,

  Write JavaScript pseudo code for setting selected element(s) to red foreground.

CSS
Selector

Button w onclick function call Description
1 selectID = function( id ) {return document.getElementById( id );}
selectID( "story1" ).style.color = 'red';
ID #story1 Find Content w id="story1"
2 selectID( "testingArea").getElementsByTagName( "span" ).color = 'red'; ID Descendant
#testingArea span
  will select all JavaScript span elements areas in #testingArea
3
myChildNodes = function( element, childTag, color ) {
    var x = element.childNodes;
//nodeName return upper case tag names
childTag = childTag.toUpperCase(); if( color == undefined ) color = 'red';
for( i=0; i < x.length; ++i ) if( x[i].nodeType == "1" && x[i].nodeName == childTag ) x[i].style.color = color;
} //jsFiddle3 for JavaScript Pseudo Code.
Child of ID
#testingArea > span
 

Select first 3 span tags, second two are grandchildren

jsFiddle2 for selection help

4 Complete table, fill in all 4 columns, you can test all selectors using the exisitng functions: myInvert, myHighlight, halloween, notHalloween. You have to write one more holiday theme button, you can use halloween as a template.

Grandchildren of ID
#testingArea * > span

 
5 A sibling is a tag right after another tag, so in the #testingArea we have three span siblings of span, two in the first paragraph and one in the second paragraph. - jsFiddle3 for JavaScript pseudo code help. Tag Sibling
#testingArea span + span
  Select only sibling span tags in #testingArea
6 jsFiddle4, simplified table, for testing table selectors. For a table tag, direct descendants are generally tr, and caption.
Tag Desccendant span
table tr td > span
  span element is a child of #querySelectors, not just any descendant.
7
 x = document.getElmentsByTagName( "input" );
 for( i=0; i < x.length ; i++ )
     x[i].style.backgroundColor = "blue";
Specific Input type
input[type='button']
  jQuery input:button
8 Just write code for selecting td.cssColumn tag class attribute
td.cssColumn
3rd column has class= cssColumn, You can also use the nth child selector
9 Just try to write a JavaScript pseudo function, not you can use tr:first as jQuery selector first child of tag
tr:first-child
  Apply to only the first column, (aa first child of tr td).
10
function oddChildren( arg1 ) {
         x = document.getElementsByTagName( arg1 );
         y  = Array( );
         for( i=0; i < x.length; i += 2 )
              	y[ i/2 ] = x[ i ];
         return y; //this is an array of odd arg1 elements
} oddChildren( "tr" ).foreach( function( e ) { e.style.color = "red"; } ):
odd children
tr:nth-child( odd )
  Invert odd rows using the odd rows selectors
11 Write function evenChildren( arg1 ) tr:nth-child( even)    
12 var tbl = document.getElementByTagName( "table")[0];
tbl.style.color = "orange"; tbl.style.backgroundColor = "black";
tbl.style.boxShadow ="5px 6px 5px 5px #aaa";
table select tags: table, fieldset and legend
13 Add your own selector example, You can use this page as a guide.
You also have to add another holiday theme.
     
14
trOdd = oddChildren( "tr" ); //using function on line 8;
for( i=0; i < trOdd.length; ++i )
     Line9Function( trOdd[i] ).foreach( function( e )
{ MyInvert( e ); } );
tr:odd td:nth-child(2n),
tr:even td:nth-child( 2n+1);
  Checker Board just use invert
(note comma)