jQuery curriculum

jQuery practice

Short exercises. Try them first, open the hint if you are stuck, and the solution last.

Exercise 1
Toggle a message
Clicking the button should toggle the paragraph's visibility.
Your solutionjQuery
Editable code<button id="btn">Toggle</button> <p id="msg">Now you see me</p> <script> $(function () { // your code }); </script>
Ctrl+Enter to run
Exercise 2
Add list items
Clicking Add should append a new list item that says Item N, where N is the new count.
Your solutionjQuery
Editable code<button id="add">Add</button> <ul id="list"></ul> <script> $(function () { // your code }); </script>
Ctrl+Enter to run
Exercise 3
Highlight on hover
Make each list item turn yellow while the mouse is over it.
Your solutionjQuery
Editable code<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <script> $(function () { // your code }); </script>
Ctrl+Enter to run