The document is a presentation about web design and development using jQuery. It introduces jQuery and why it is useful, how to include jQuery, and describes 21 helpful jQuery methods such as addClass(), removeClass(), attr(), val(), html(), click(), append(), and more. Each method is explained in 1-2 paragraphs with examples of how to use the method and its parameters. The document concludes with references to the jQuery API documentation for each method.

1. Web Design
and
Development
By: Shahrzad Peyman
Session 6
November-2017
shahrzad.peymaan@gmail.com
1

2. 2
Today’s Presentation
• Why JQuery
• Including JQuery
• 21 Helpful JQuery Methods

3. Why JQuery?
3
With jQuery, not only do you get a very high level of cross-
browser compatibility (yes, even including Internet
Explorer), you also have quick and easy access to HTML
and DOM manipulation, special functions to interact directly
with CSS, the ability to control events, powerful tools to
create professional effects and animations, and functions
for conducting Ajax communications with the web server.
jQuery is also the base for a wide range of plugins and
other utilities too.
One important thing to know is that jQuery is just
a JavaScript library.

4. Including JQuery
4
There are two ways you can include jQuery in your web
pages.
You can go to the jQuery website, choose the version
you need, download it to your website, and serve it up
from there.
Or, you can take advantage of a free content delivery
network (CDN) and simply link to the version you
require.

5. 5
.addClass()

6. .addClass()
6
Description: Adds the specified class(es) to each
element in the set of matched elements.
It's important to note that this method does not
replace a class.
It simply adds the class, appending it to any
which may already be assigned to the elements.

7. .addClass()
7
.addClass( className):
className :
Type: String
One or more space-separated classes to be added to the
class attribute of each matched element.

8. .addClass()
8
.addClass( function):
function :
Type: Function(Integer index, String currentClassName) => String
A function returning one or more space-separated class names to be
added to the existing class name(s). Receives the index position of
the element in the set and the existing class name(s) as arguments.
Within the function, this refers to the current element in the set.

9. 9
.removeClass()

10. .removeClass()
10
Description: Remove a single class, multiple classes,
or all classes from each element in the set of matched
elements.
If a class name is included as a parameter, then only
that class will be removed from the set of matched
elements.
If no class names are specified in the parameter, all
classes will be removed.

11. .removeClass()
11
.removeClass( [className]):
className :
Type: String
One or more space-separated classes to be removed from
the class attribute of each matched element.

12. .removeClass()
12
.addClass( function):
function :
Type: Function(Integer index, String ClassName) => String
A function returning one or more space-separated class names
to be removed. Receives the index position of the element in the
set and the old class value as arguments.

13. 13
.attr()

14. .attr()
14
Description: Get the value of an attribute for the first element in the set
of matched elements.
To get the value for each element individually, use a looping construct
such as jQuery’s .each() or .map() method.
Using jQuery's .attr() method to get the value of an element's
attribute has two main benefits:
1.Convenience: It can be called directly on a jQuery object and chained
to other jQuery methods.
2.Cross-browser consistency: The values of some attributes are
reported inconsistently across browsers, and even across versions of
a single browser. The .attr() method reduces such inconsistencies.

15. .attr()
15
Attribute vs Properties:
The difference between attributes and properties can
be important in specific situations.
.attr() changes attributes for that HTML tag.
.prop() changes properties for that HTML tag as
per the DOM tree.

16. .attr()
16
Concerning boolean attributes, consider a DOM
element defined by the HTML markup <input
type="checkbox" checked="checked"/>, and
assume it is in a JavaScript variable named elem:

17. .attr()
17
.attr( attributeName):
attributeName :
Type: String
The name of the attribute to get.

18. .attr()
18
.attr( attributeName, value):
attributeName :
Type: String
The name of the attribute to set.
value :
Type: String or Number or Null
A value to set for the attribute. If null, the specified attribute will be removed (as
in .removeAttr()).

19. .attr()
19
.each() method to getting the value for each element
individually:

20. 20
.removeAttr()

21. .removeAttr()
21
Description: Remove an attribute from each element in the set of
matched elements.
To get the value for each element individually, use a looping construct
such as jQuery’s .each() or .map() method.
Using jQuery's .attr() method to get the value of an element's
attribute has two main benefits:
1.Convenience: It can be called directly on a jQuery object and chained
to other jQuery methods.
2.Cross-browser consistency: The values of some attributes are
reported inconsistently across browsers, and even across versions of
a single browser. The .attr() method reduces such inconsistencies.

22. .removeAttr()
22
.removeAttr( attributeName):
attributeName :
Type: String
An attribute to remove; as of version 1.7, it can be a space-
separated list of attributes.

23. 23
.val()

24. .val()
24
Description: Get the current value of the first element in the set
of matched elements or set the value of every matched element.
The .val() method is primarily used to get the values of form
elements such as input, select and textarea. When called
on an empty collection, it returns undefined.
When the first element in the collection is a select-multiple
(i.e., a select element with the multiple attribute
set), .val() returns an array containing the value of each
selected option.
This method does not accept any arguments.

25. .val()
25
.val( value):
value :
Type: String or Number or Array
A string of text, a number, or an array of strings corresponding to
the value of each matched element to set as selected/checked.

26. .val()
26
.val(function):
function :
Type: Function(Integer index, String attr) => String
A function returning the value to set. this is the
current element. Receives the index position of the
element in the set and the old value as arguments.

27. .val()
27
.val(function):
function :
Type: Function(Integer index, String attr) => String
A function returning the value to set. this is the
current element. Receives the index position of the
element in the set and the old value as arguments.

28. 28
.html()

29. .html()
29
Description: Get the HTML contents of the first
element in the set of matched elements or set the
HTML contents of every matched element.
This method does not accept any arguments.

30. .html()
30

31. 31
.change()

32. .change()
32
Description: Bind an event handler to the "change" JavaScript
event, or trigger that event on an element.
This method is a shortcut for .on("change", handler) in the
first two variations.
The change event is sent to an element when its value changes.
This event is limited to <input> elements, <textarea> boxes
and <select> elements. For select boxes, checkboxes, and
radio buttons, the event is fired immediately when the user
makes a selection with the mouse, but for the other element
types the event is deferred until the element loses focus.

33. .change()
33
.change(handler):
handler :
Type: Function(Event eventObject)
A function to execute each time the event is
triggered.

34. .change()
34

35. 35
.select()

36. .select()
36
Description: Bind an event handler to the "select"
JavaScript event, or trigger that event on an element.
This method is a shortcut for .on("select", handler) in
the first two variations.
The select event is sent to an element when the user
makes a text selection inside it. This event is limited
to <input type="text"> fields and <textarea> boxes.

37. .select()
37
.select(handler):
handler :
Type: Function(Event eventObject)
A function to execute each time the event is
triggered.

38. .select()
38

39. 39
.submit()

40. .submit()
40
Description: Bind an event handler to the "submit" JavaScript event,
or trigger that event on an element.
This method is a shortcut for .on(“submit", handler) in the first
variation.
The submit event is sent to an element when the user is attempting
to submit a form.
It can only be attached to <form> elements. Forms can be submitted
either by clicking an explicit <input type="submit">, or <button
type="submit">, or by pressing Enter when certain form elements
have focus.

41. .submit()
41
.submit(handler):
handler :
Type: Function(Event eventObject)
A function to execute each time the event is
triggered.

42. .submit()
42
Now when the form is submitted, the message is alerted. This
happens prior to the actual submission, so we can cancel the
submit action by calling .preventDefault() on the event
object or by returning false from our handler. We can
trigger the event manually when another element is clicked.

43. 43
.click()

44. .click()
44
Description: Bind an event handler to the "submit"
JavaScript event, or trigger that event on an element.
This method is a shortcut for .on(“click",
handler) in in the first two variations.
The click event is sent to an element when the mouse
pointer is over the element, and the mouse button is
pressed and released. Any HTML element can receive
this event.

45. .click()
45
.click(handler):
handler :
Type: Function(Event eventObject)
A function to execute each time the event is
triggered.

46. .click()
46

47. 47
.append()

48. .append()
48
Description: Insert content, specified by the
parameter, to the end of each element in the set
of matched elements.
The .append() method inserts the specified
content as the last child of each element in the
jQuery collection (To insert it as the first child,
use .prepend()).

49. .append()
49
.append(content, [content]):
content :
Type: htmlString or Element or Text or Array or jQuery.
content :
Type: htmlString or Element or Text or Array or jQuery.

50. .append()
50
.append(function):
function :
Type: Function(Integer index, String attr) =>
htmlString or Element or Text or Array or jQuery.

51. .append()
51

52. 52
.prepend()

53. .prepend()
53
Description: Insert content, specified by the
parameter, to the beginning of each element in
the set of matched elements.
The .prepend() method inserts the specified
content as the first child of each element in the
jQuery collection (To insert it as the last child,
use .append()).

54. .prepend()
54
.prepend(content, [content]):
content :
Type: htmlString or Element or Text or Array or jQuery.
content :
Type: htmlString or Element or Text or Array or jQuery.

55. .prepend()
55
.prepend(function):
function :
Type: Function(Integer index, String attr) =>
htmlString or Element or Text or Array or jQuery.

56. .prepend()
56

57. 57
.after()

58. .after()
58
Description: Insert content, specified by the
parameter, after each element in the set of
matched elements.

59. .after()
59
.after(content, [content]):
content :
Type: htmlString or Element or Text or Array or jQuery.
content :
Type: htmlString or Element or Text or Array or jQuery.

60. .after()
60
.after(function):
function :
Ty p e : F u n c t i o n ( I n t e g e r i n d e x ) = >
htmlString or Element or Text or jQuery.

61. .after()
61

62. 62
.before()

63. .before()
63
Description: Insert content, specified by the
parameter, before each element in the set of
matched elements.

64. .before()
64
.before(content, [content]):
content :
Type: htmlString or Element or Text or Array or jQuery.
content :
Type: htmlString or Element or Text or Array or jQuery.

65. .before()
65
.before(function):
function :
Ty p e : F u n c t i o n ( I n t e g e r i n d e x ) = >
htmlString or Element or Text or jQuery.

66. .before()
66

67. 67
.remove()

68. .remove()
68
Description: Remove the set of matched elements
from the DOM.
Use .remove() when you want to remove the
element itself, as well as everything inside it. In
addition to the elements themselves, all bound
events and jQuery data associated with the
elements are removed.

69. .remove()
69
.remove([selector]):
selector :
Type: String
A selector expression that filters the set of
matched elements to be removed.

70. .remove()
70

71. 71
.height()

72. .height()
72
Description: Get the current computed height for
the first element in the set of matched elements.
This method is also able to find the height of the
window and document.

73. .height()
73
Note that .height() will always return the
content height, regardless of the value of the
CSS box-sizing property.

74. .height()
74
.height():
This method does not accept any arguments.

75. .height()
75
.height(value):
value :
Type: String or Number
An integer representing the number of pixels, or an
integer with an optional unit of measure appended (as a
string).

76. 76
.width()

77. .width()
77
Description: Get the current computed width for
the first element in the set of matched elements.
This method is also able to find the width of the
window and document.

78. .width()
78
Note that .width() will always return the content
width, regardless of the value of the CSS box-
sizing property.

79. .width()
79
.width():
This method does not accept any arguments.

80. .width()
80
.width(value):
value :
Type: String or Number
An integer representing the number of pixels, or an
integer with an optional unit of measure appended (as a
string).

81. 81
.eq()

82. .eq()
82
Description: Reduce the set of matched elements
to the one at the specified index.

83. .eq()
83
.eq(index):
index :
Type: Integer
An integer indicating the 0-based position of
the element.

84. .eq()
84
.val(index):
index :
Type: Integer
An integer indicating the 0-based position of
the element.

85. .eq()
85

86. 86
.filter()

87. .filter()
87
Description: Reduce the set of matched elements
to those that match the selector or pass the
function's test.

88. .filter()
88
.filter(selector):
seletor :
Type: selector
A string containing a selector expression to
match the current set of elements against.

89. .filter()
89
.filter(function):
function :
Type: Function(Integer index, Element element)
=> Boolean
A function used as a test for each element in the
set. this is the current DOM element.

90. .filter()
90

91. 91
.has()

92. .has()
92
Description: Reduce the set of matched elements
to those that have a descendant that matches the
selector or DOM element.

93. .has()
93
.has(selector):
seletor :
Type: string
A string containing a selector expression to
match elements against.

94. .has()
94

95. 95
.parent()

96. .parent()
96
Description: Get the parent of each element in the
current set of matched elements, optionally
filtered by a selector.

97. .parent()
97
.parent([selector]):
seletor :
Type: Selector
A string containing a selector expression to
match elements against.

98. .parent()
98

99. References:
99
1- http://api.jquery.com/addClass/
2- http://api.jquery.com/removeClass/
3- http://api.jquery.com/attr/
4- http://api.jquery.com/removeAttr/
5- http://api.jquery.com/val/
6- http://api.jquery.com/html/
7- http://api.jquery.com/change/
8- http://api.jquery.com/select/
9- http://api.jquery.com/submit/
10- http://api.jquery.com/click/

100. References:
100
11- http://api.jquery.com/append/
12- http://api.jquery.com/prepend/
13- http://api.jquery.com/after/
14- http://api.jquery.com/before/
15- http://api.jquery.com/remove/
16- http://api.jquery.com/height/
17- http://api.jquery.com/width/
18- http://api.jquery.com/eq/
19- http://api.jquery.com/filter/
20- http://api.jquery.com/has/
21- http://api.jquery.com/parent/