| jQuery Selector Table | ||||
|---|---|---|---|---|
| Write JavaScript pseudo code for setting selected element(s) to red foreground. | CSS |
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; |
Child of ID #testingArea > span |
Select first 3 span tags, second two are grandchildren |
|
| 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 |
||
| 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 |
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 ) |
tr:odd td:nth-child(2n), tr:even td:nth-child( 2n+1); |
Checker Board just use invert (note comma) |
|