|
| 1 | +--- |
| 2 | +chapter : jqfundamentals |
| 3 | +section : 7 |
| 4 | +title : Exercises |
| 5 | +attribution: jQuery Fundamentals |
| 6 | +--- |
| 7 | +## Exercises |
| 8 | + |
| 9 | +### Selecting |
| 10 | + |
| 11 | +Open the file `/exercises/index.html` in your browser. |
| 12 | +Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following: |
| 13 | + |
| 14 | +1. Select all of the div elements that have a class of "module". |
| 15 | + |
| 16 | +2. Come up with three selectors that you could use to get the third item in the #myList unordered list. Which is the best to use? Why? |
| 17 | + |
| 18 | +3. Select the label for the search input using an attribute selector. |
| 19 | + |
| 20 | +4. Figure out how many elements on the page are hidden (hint: .length). |
| 21 | + |
| 22 | +5. Figure out how many image elements on the page have an alt attribute. |
| 23 | + |
| 24 | +6. Select all of the odd table rows in the table body. |
| 25 | + |
| 26 | +### Traversing |
| 27 | + |
| 28 | +Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following: |
| 29 | + |
| 30 | +1. Select all of the image elements on the page; log each image's alt attribute. |
| 31 | + |
| 32 | +2. Select the search input text box, then traverse up to the form and add a class to the form. |
| 33 | + |
| 34 | +3. Select the list item inside `#myList` that has a class of "current" and remove that class from it; add a class of "current" to the next list item. |
| 35 | + |
| 36 | +4. Select the select element inside `#specials`; traverse your way to the submit button. |
| 37 | + |
| 38 | +5. Select the first list item in the #slideshow element; add the class "current" to it, and then add a class of "disabled" to its sibling elements. |
| 39 | + |
| 40 | +### Manipulating |
| 41 | + |
| 42 | +Open the file `/exercises/index.html` in your browser. Use the file `/exercises/js/sandbox.js` or work in Firebug to accomplish the following: |
| 43 | + |
| 44 | +1. Add five new list items to the end of the unordered list `#myList`. Hint: |
| 45 | + |
| 46 | + for (var i = 0; i<5; i++) { ... } |
| 47 | + |
| 48 | +2. Remove the odd list items |
| 49 | + |
| 50 | +3. Add another h2 and another paragraph to the last div.module |
| 51 | + |
| 52 | +4. Add another option to the select element; give the option the value "Wednesday" |
| 53 | + |
| 54 | +5. Add a new div.module to the page after the last one; put a copy of one of the existing images inside of it. |
0 commit comments