Link to a jQuery library <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>. Note the latest is Version 2.1 but ealrier ones almost ccertainly will work unless you do anything involved.
and jQuery UI library (sort of standard practice) <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> and a CSS theme:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
The links here are the Google API versions.
1) Build the basic statement on your Cheat Sheet to dynamically change your <h1>. Note that if using the Console you don't need the semi-colons. If you don't have a console, you build a <script> element. e.g.
<script type="text/javascript">
$(document).ready(function(){
$('selector').function();
});
</script>
See this example that hides a sublist.
So: Start with this Starter file. It has a place to write an embedded <script> but needs links to the Google API jQuery library (or a copy that you downloaded). Typically, you would also link to the jQueryUI as well.
Then try some more selectors in the Console—it will display the results in the next line. Q: How would you select the fifth item in the list below? If you make errors, you can use the arrow keys to back to earlier lines.
2) Manipulating the DOM: Changing text as we did above is technically part of DOM manipulation. Content inside HTML elements (tag sets) is called "nodes" in JavaScript, so we manipulated anode in the DOM. But generally this refers to changing, or creating a tag, or attribute. For now let's use the append method to add the word "List" to the items below, which all have class="item". Note that you can have multiple classes on the same element in HTML, separated by spaces. So if the method is .append() how would you do that, based on what we did above?
Now add an item to the list ("New List Item") using .prepend(), which does what it says, but we want to add that to the bullet list below. If we just prepend the text node, we don't make it part of the unordered list. So how would you do that? (Hint: prepend it to the <ul> element, and include the required HTML in the argument that you pass it.)
3) Events are things like "click" or "mouseout" that we saw before (JavaScript calls the HTML attributes "event handlers" (<a href="#" onClick="function();">).
Using the class
of "item" and the .click() event, run this function that changes the text to the word "clicked" : function(){jQuery(this).text('clicked');}
4) Effects include things such as hiding, showing, fading (we'll look at that in a jQuery tutorial). for now, run the .hide() method on the <h3> element. Then bring it back with fadeIn()
5) Adding CSS classes and attributes. Add CSS classes and call them .one and .two and change the background-color. In two lines (use the Command Entry panel to enter, then hit "Run") make items with class of "a" add the class "one" and those with "b" add the class "two". Use the addClass() method. Remember if there is more than one line, you'll need the semi-colon.
Change those with class="two" to "one" using the attr(attribute, value) method (e.g. to add a title attribute of "Hello" we would use attr('title', 'Hello')