1. Selectors & Events

2. What do Selectors do? What do Selectors do? Selectors allow you to manipulate DOM elements as a group or as a single node. This allows you to manipulate single HTML elements or groups of elements.

3. jQuery uses CSS selectors to select HTML elements. $("p") selects all elements. $("p.intro") selects all elements with class="intro". $("p#demo") selects the first element with id="demo".

4. You can also select elements with with given attributes. $("[href]") select all elements with an href attribute. $("[href='#']") select all elements with an href value equal to "#". $("[href!='#']") select all elements with an href attribute NOT equal to "#". $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

5. Selectors can be used to change the CSS of HTML elements. $("p").css("background-color","yellow");

6. What are Events? What are Events? Events allow your application to respond to a user action.

7. Inline Events Attaches directly to an element:

8. Add an Event to the Object Property Assign an Event directly to a property: var clickableImage = document.getElementById(“blah”); clickableImage.onclick = myFunction; function = myFunction() { thePic = document.getElementByID(“blah”); //do something! }

9. Event Listeners Can add more than 1 event to a property myPicture = document.getElementByID(“blah”); myPicture.addEventListener(‘onclick’,myFunction); myPicture.addEventListener(‘onload’,mySecondFunction);

10. Some Common Events click: Fired when the user clicks on the element dblclick: Fired when the user double-clicks on the element mouseover: used when the user moves their mouse over an element load: used when the element — like an image — has fully downloaded submit: used when a form is submitted (only for form elements)

11. Some Fancy Examples of Common Events Some Fancy Examples of Common Events