1. Introduction to JQuery COGS 187A – Fall 2014

2. JQuery jQuery is a JavaScript library, and allows us to manipulate HTML and CSS after the page has been loaded. It makes the pages dynamic and respond to user interaction. You can write your own code using JQuery API: http://api.jquery.com/ http://api.jquery.com/ You can use the code of other people: http://plugins.jquery.com/ http://plugins.jquery.com/

3. Tutorials and Text editors Tutorials http://www.w3schools.com/jquery/ http://www.codecademy.com/en/tracks/jquery Text editors Sublime text: http://www.sublimetext.com/http://www.sublimetext.com/ Webstorm: http://www.jetbrains.com/webstorm/http://www.jetbrains.com/webstorm/ Here is a review on JavaScript IDEs.http://www.javaworld.com/article/2094847/enterprise- java/review-10-javascript-editors-and-ides-put-to-the- test.htmlhttp://www.javaworld.com/article/2094847/enterprise- java/review-10-javascript-editors-and-ides-put-to-the- test.html

4. Adding jQuery to your webpages 1. Download jQuery library from jQuery.com It is a single Java Script file. Reference it with the HTML tag as follows:

5. Adding jQuery to your webpages 2. Alternatively, you can include the jQuery library from a CDN (Content Delivery Network) such as Google or Microsoft. GOOGLE: MICROSOFT:

6. jQuery Syntax The syntax is designed to select some HTML elements and perform some action on the elements. Basic syntax is: $(selector). action() $ sign: define/access jQuery. A (selector) to find (query) HTML elements. A jQuery action() to be performed on the element(s).

7. Examples $(this).hide() - hides the current element $("p").hide() - hides all elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test".

8. Document Ready Event In general, all jQuery methods are located inside a document ready event as follows: $(document).ready(function(){ // jQuery methods go here... }); This is to prevent any jQuery code from running before the document is finished loading (is ready).

9. jQuery Selectors jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more. All selectors in jQuery start with the dollar sign and parentheses: $().

10. The element selector The jQuery element selector selects elements based on the element name For example, you can select all elements on a page like this: $("p") See example from this link:http://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_hide_phttp://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_hide_p

11. The #id selector The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. To find an element with a specific id, write a hash character, followed by the id of the HTML element: $("#test") See example from this link:http://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_hide_idhttp://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_hide_id

12. The.class selector The jQuery class selector finds elements with a specific class. To find elements with a specific class, write a period character, followed by the name of the class: $(".test") See example from this link:http://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_hide_classhttp://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_hide_class

13. Go and test different selectors yourself in this link: http://www.w3schools.com/jquery/trysel.asphttp://www.w3schools.com/jquery/trysel.asp For all jQuery selectors, see the API: http://api.jquery.com/category/selectors/http://api.jquery.com/category/selectors/

14. jQuery Event Methods A visitor’s actions that a web page can respond to are called events. An event represents the precise moment when something happens. Examples: – moving a mouse over an element – selecting a radio button – clicking on an element

15. jQuery Syntax For Event Methods Example: To assign a click event to all paragraphs on a page, you can do this: $("p").click(); The next step is to define what should happen when the event fires. You must pass a function to the event: $("p").click(function(){ // action goes here!! });

16. Commonly Used jQuery Event Methods click() The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element. The following example says: When a click event fires on a element; hide the current element: $("p").click(function(){ $(this).hide(); }); Try it from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_c lick http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_c lick

17. Commonly Used jQuery Event Methods mouseenter() The mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element. $("#p1").mouseenter(function(){ alert("You entered p1!"); }); Try it from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_mousee nter http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_mousee nter

18. For a full list of jQuery events, see the API: http://api.jquery.com/category/events/

19. jQuery Effects With jQuery, you can do the following effects: Hide, Show, Toggle, Slide, Fade, and Animate

20. jQuery hide() and show() $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide _show http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide _show

21. You can also control the speed of the hiding by providing a parameter: $("button").click(function(){ $("p").hide(1000); }); See an example in this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery _hide_slow

22. jQuery Sliding Methods With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: – slideDown() – slideUp() – slideToggle() See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_slide_down http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_slide_down

23. jQuery Animations - The animate() Method Example: The following example demonstrates a simple use of the animate() method; it moves a element to the right, until it has reached a left property of 250px: $("button").click(function(){ $("div").animate({left:'250px'}); }); Try it in this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_anim ation1 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_anim ation1

24. jQuery Animations - The animate() Method Multiple properties can be animated at the same time: $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); Try it in this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1 _multicss http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1 _multicss

25. For a list of jQuery effects, see the API: http://api.jquery.com/category/effects/

26. jQuery – Get content and attributes jQuery contains powerful methods for changing and manipulating HTML elements and attributes. Get Content - text(), html(), and val() : Three simple, but useful, jQuery methods to get content are: text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields

27. The following example demonstrates how to get content with the jQuery text() and html() methods: $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_d om_html_get http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_d om_html_get

28. The following example demonstrates how to get the value of an input field with the jQuery val() method: $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery _dom_val_get http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery _dom_val_get

29. jQuery - Set Content and Attributes We can use the same three methods to set content: – text() - Sets or returns the text content of selected elements – html() - Sets or returns the content of selected elements (including HTML markup) – val() - Sets or returns the value of form fields The following example demonstrates how to set content with the jQuery text(), html(), and val() methods:http://www.w3schools.com/jquery/tryit.asp?filena me=tryjquery_dom_html_sethttp://www.w3schools.com/jquery/tryit.asp?filena me=tryjquery_dom_html_set

30. jQuery - Add and Remove Elements jQuery append() The jQuery append() method inserts content AT THE END of the selected HTML elements. $("p").append("Some appended text."); See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery _html_append http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery _html_append

31. jQuery prepend() The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements. $("p").prepend("Some prepended text."); See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_html_prepend http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_html_prepend

32. You can also add multiple elements at once: function appendText() { var txt1 = " Text. "; // Create element with HTML var txt2 = $(" ").text("Text."); // Create with jQuery var txt3 = document.createElement("p"); // Create with DOM txt3.innerHTML = "Text."; $("p").append(txt1, txt2, txt3); // Append the new elements } See the example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append2

33. jQuery remove() The jQuery remove() method removes the selected element(s) and its child elements. $("#div1").remove(); See the example from this link:http://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_dom_removehttp://www.w3schools.com/jquery/tryit.asp?filename=tr yjquery_dom_remove

34. jQuery – Manipulating CSS elements jQuery has several methods for CSS manipulation. – addClass() - Adds one or more classes to the selected elements – removeClass() - Removes one or more classes from the selected elements

35. The following stylesheet will be used for all the examples below:.important { font-weight:bold; font-size:xx-large; }.blue { color:blue; }

36. jQuery addClass() The following example shows how to add class attributes to different elements. $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); See the example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_dom_addclass http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_dom_addclass

37. jQuery removeClass() The following example shows how to remove a specific class attribute from different elements $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); See an example from this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_dom_removeclass http://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_dom_removeclass

38. jQuery css() The css() method sets or returns one or more style properties for the selected elements. To return the value of a specified CSS property, use the following syntax: css("propertyname"); The following example will return the background-color value of the FIRST matched element: $("p").css("background-color"); See the example below: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_getc olor http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_getc olor

39. jQuery css() To set a specified CSS property, use the following syntax: css("propertyname","value"); The following example will set the background-color value for ALL matched elements: $("p").css("background-color","yellow"); See the example in this link: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_cs s_setcolor http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_cs s_setcolor

40. jQuery - Traversing jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

41. Traversing The image below illustrates a family tree. With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree, starting from the selected (current) element. This movement is called traversing

42. Ancestors An ancestor is a parent, grandparent, great-grandparent, and so on. With jQuery you can traverse up the DOM tree to find ancestors of an element. Three useful jQuery methods for traversing up the tree are: – parent() – parents() – parentsUntil()

43. The parent() method returns the direct parent element of the selected element. This method only traverse a single level up the tree. The following example returns the direct parent element of each elements: $(document).ready(function(){ $("span").parent(); }); See the example here: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_pare nt http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_pare nt

44. The parents() method returns all ancestor elements of the selected element, all the way up to the document's root element ( ). The following example returns all ancestors of all elements: $(document).ready(function(){ $("span").parents(); }); See the example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_pare nts http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_pare nts

45. The parentsUntil() method returns all ancestor elements between two given arguments. The following example returns all ancestor elements between a and a element: $(document).ready(function(){ $("span").parentsUntil("div"); }); See the example here: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_pare ntsuntil http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_pare ntsuntil

46. Descendants and Siblings Two useful jQuery methods for traversing down the tree are: – children() – find() There are many useful jQuery methods for traversing sideways in the tree: – siblings() – next() – nextAll() – nextUntil() – prev() – prevAll() – prevUntil()

47. Reminder You can write your own code using JQuery API: http://api.jquery.com/ http://api.jquery.com/ You can use the code of other people: http://plugins.jquery.com/ http://plugins.jquery.com/