CHAPTER 7 JQUERY

2. CHAPTER 7JQUERY

3. WHAT IS JQUERY?

4. jQuery is a script.It is written in JavaScript.

5. Once included in your page, it is used to:Select elementsDo things with the elements you selected

6. 1

7. 1 Select elements using CSS-style selectors

8. jQuery(‘li.hot’);

9. jQuery(‘li.hot’); FUNCTION

10. jQuery(‘li.hot’); CSS-STYLE SELECTOR

11. $(‘li.hot’); SHORTHAND FOR JQUERY FUNCTION

12. When you select an element or set of elements, it creates a jQuery object.

13. That object contains references to the elements.

14. Like any object, the jQuery object has properties and methods. They allow you to work with those elements.

15. A jQuery object with selected elements can be called a:jQuery selectionormatched set

16. 2

17. 1 2 Select elements using CSS-style selectors Do something using methods of the jQuery object

18. $(‘li.hot’).hide(); HIDE ALL MATCHING LIST ITEMS METHOD OF THE JQUERY OBJECT

19. With jQuery, you can:Select or find elementsUpdate their content / size / visibilitySimplify event handling

20. STORING SELECTIONS IN VARIABLES

21. When a variable holds a jQuery object, its name often begins with a $ symbol.

22. var $titles = $(‘.title’);

23. var $titles = $(‘.title’); VARIABLE NAME

24. var $titles = $(‘.title’); CSS-STYLE SELECTOR

25. CSS-STYLE SELECTORSThis variable holds a jQuery object containing the element whose id attribute has a value of author:var $author = $(‘#author’);

26. CSS-STYLE SELECTORSThis variable holds a jQuery object containing the first item from the unordered list whose id attribute has a value of list:var $first = $(‘ul#list:first-child’);

27. GETTING & SETTING INFORMATION

28. GETTING HTML CONTENTThe .html() method gets the content of the selection (including markup).It only retrieves content from the first element in the matched set.

29. GETTING HTML CONTENTThis example retrieves the content of the first list item.$(‘li’).html();

30. GETTING TEXT CONTENTThe .text() method gets the text content only of the selection (excluding markup).

31. GETTING TEXT CONTENTThis example retrieves the text content of the first list item.$(‘li’).text();

32. SETTING CONTENTNew content is added inside the parentheses after the method name.It updates all of the elements in the matched set (not just the first). This is known as implicit iteration.

33. SETTING HTML CONTENTThis example will replace the content of each list item with the word Updated in <b> tags.$(‘li’).html(‘<b>Updated</b>’);

34. SETTING TEXT CONTENTThis example will replace the text content of each list item with the word Updated.$(‘li’).text(‘Updated’);

35. CHAININGIt is possible to call multiple methods on the same selection.$(‘li’).hide().fadeIn(500);

36. CHAININGIt is possible to call multiple methods on the same selection.$(‘li’).hide().fadeIn(500); FIRST METHOD

37. CHAININGIt is possible to call multiple methods on the same selection.$(‘li’).hide().fadeIn(500); SECOND METHOD

38. CHECKING A PAGE IS READY TO WORK WITH

39. jQuery’s .ready() method checks that the page is ready for your code to work with.

40. $(document).ready(function() { // code goes here});

41. $(document).ready(function() { // code goes here}); JQUERY OBJECT Creates a jQuery object containing the entire page

42. $(document).ready(function() { // code goes here}); JQUERY METHOD Checks to see if the page has loaded before…

43. $(document).ready(function() { // code goes here}); CODE …running the code inside the parentheses

44. This is a shortcut for writing the .ready() method.

45. $(document).ready(function() { // code goes here});

46. $(function() { // code goes here});

47. MORE ABOUT UPDATING ELEMENTS

48. UPDATE ELEMENTS .html().replaceWith() .text() .remove() $(‘li#one’).remove();

49. <li>item</li> .before() INSERT ELEMENTS .after() .prepend() .append()

50. GET & SET ATTRIBUTES .attr().addClass() .removeAttr() .removeClass() $(‘a#top’).addClass(‘button’);