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) |