4 . Introduction to jQuery

1. 4. Introduction to jQuery

2. What is jQuery? • Popular JavaScript library that helps you accomplish a lot of JavaScript functionality without having to reinvent the wheel. • Cross browser compatible so that it will work in all major browsers. • Web Designer friendly by taking advantage of CSS syntax. • Special functions for animation, web form validation, AJAX, and much more.

3. Accessing the Library • Accessing the live library lets you always have the latest version. As an alternative you can download to your directory and link from there. • Link to the live jQuery library in the head before calling any other JS/JQ code: <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> [The current version as of 23 December is 1.10.1]

4. Adding Custom Code on Document Load <script> $(document).ready(function(){ // JQ code to run after page is loaded }); </script> Similar to: document.onload = function(){ // JS code } Shortcut: $function() { // same thing as above }

5. Selecting Elements in JQuery • In jQuery you select elements in the same way you do with css. • To select elements you use the function $() which is short for jquery() and put quotes around what we’re selecting: • ID: $(“#name”) • Tag: $(“name”) • Class: $(“.name”)

6. Selecting Elements by Tag Name • If we had a set of paragraph tags we can access them ALL as: $(“p”) • And perform operations like this without writing a loop: $(“p”).size() -> to say how many there are

7. Selecting Elements by Class • Just like in css you put a ‘.’ before the class name that you want to access $(“.className) Or if it’s in a paragraph you can do $(“p.className) //just like in css

8. Advanced Selectors • Descendent Selectors $(‘#navbar a’) Selects all the anchor tags within the navbar id. • Child Selectors $(‘body > p’) Selects all p tags that are children of the body tag. • Attribute Selectors $(‘img[alt]’) Selects all image tags that contain the alt attribute

9. Filters • Even/odd • First/last • Not • Has • Items in a set • Ex. $(“p”)[0] • Contains • Ex. $(“p:contains(‘hello’)”) Let’s go to the testbed page and try some!

10. Add, Remove, Replace Content • .html() • Reads or replaces markup of selected element • .text() • Does NOT accept tags • .append() • Adds child tag at the end • .prepend() • Add child tag at the beginning Let’s try it!!!!

11. Read, Set, Remove Attributes • .addClass() • .removeClass() • .css() • .attr()

12. Special JQuery Features • Automatic Loops • Hide ALL images without writing a loop • $(‘img’).hide() • Chaining Functions • Set the height and width on ALL images • $(‘img’).width(300).height(300)

13. Manual Looping: each, this $( "li" ).each(function( index ) { console.log( index + ": " + $( this ).text() ); });

14. Introduction to jQuery Modifying Elements

15. Selecting Elements by class Example

16. Selecting elements by their text • You can use contains(“text”) to select an element. • E.g. $(“p:contains(‘hello’)”)

17. Show and Hide Elements • Use .hide() and .show() to show and hide your elements E.g. $(“p:first”).hide()

18. Ex. Creating New HTML Elements • You can insert an element using the insertAfter function: • E.g. $(“<p>my new paragraph</p>”).insertAfter(“#last”);

19. Ex. Re-writing html • You can override elements html using the .html() function. • If you wanted to change an elements html you can go: $(“#elemId”).html(“<p>Hi Everyone</p>”);

20. Ex. Re-writing Text • You can change an elements text using: .text(“text I want to replace with”);

21. Ex. Appending Text • You can append text to the end of an html element using .append(“…”); e.g. you have an element <p id=“age”>Today you are</p> You can append (It will go inside the <p> tag): $(“#age”).append(“5 years old”);

22. Ex. Accessing Checkboxes • You can get a list of checked, check boxes by: $(“input:checked”) • You can get the number of checked items by: $(“input:checked”).length

23. Ex. Check Box Example

24. Ex. Selected dropdown • You can figure out which item in a select box was picked by using the selected property. $(“select option:selected”).length

25. Ex. Dropdown Example

26. Events • Events in javascript and jQuery are the triggers that you want to invoke an action: • E.g. mouse click, mouse hover…

27. Binding an Event • Binding an event to a function means that when the event is triggered the function that was bound to it will be executed. $(“img”).bind(event, data, handler)

28. Let’s bind a function Now everytime a click is executed functionName was exectued. $(function() { $(“#target”).bind(“click”, functionName); });

29. Binding Example

30. Binding Multiple Event Handlers • You can tie more than one event handler to the same event!

31. Shorthand • The shorthands for .bind(click,…) are: • For Click: .click(functionName) • For Hover: .hover(functionName) • For Key Up: .keyup(functionName)

32. KeyUp Event (This program displays text user entered)

33. Hover Events • With hover events you can specify both the entry and exit events. .hover(over, out)

34. Hover Events Example