This document provides an overview of a course on JavaScript and jQuery. The course covers jQuery introduction and syntax, selectors, events and methods, getting and setting content, DOM traversing and manipulation, animations, AJAX with jQuery, and templating engines. It describes how to add jQuery to web pages, jQuery syntax, selectors, events, methods for content manipulation, DOM traversing, dimensions, animations, AJAX functionality, and examples. It also discusses templating engines like Mustache.js for cleaner code. The course aims to simplify HTML DOM tree traversal, manipulation, event handling and more using jQuery.

2. COURSE 11
JAVASCRIPT -
JQUERY
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

4. C11 – JQUERY
• jQuery introduction
• Syntax
• Selectors
• Events & Methods
• Getting & setting content
• DOM traversing & manipulation
• Animations
• AJAX with jQuery
• Examples
• Templating engines

5. JQUERY
• jQuery is a JavaScript library designed to
simplify HTML DOM tree traversal and
manipulation, as well as event handling, CSS
animation, and Ajax
• It is a free, open-source library
• As of May 2019, jQuery is used by 73% of the
10 million most popular websites
• Web analysis indicates that it is the most widely
deployed JavaScript library by a large margin, having
3 to 4 times more usage than any other JavaScript
library

6. JQUERY
• jQuery's syntax is designed to make it easier to navigate
a document, select DOM elements, create animations,
handle events, and develop Ajax applications
• The modular approach to the jQuery library allows the
creation of powerful dynamic web pages and web
applications
• The set of jQuery core features – DOM element
selections, traversal and manipulation – enabled by its
selector engine (named "Sizzle" from v1.3), created a
new "programming style", fusing algorithms and DOM
data structures

7. ADDING JQUERY TO YOUR WEB
PAGES
There are several ways to start using jQuery on
your web site. You can:
• Download the jQuery library from jQuery.com
• Production version - this is for your live website
because it has been minified and compressed
• Development version - this is for testing and
development (uncompressed and readable code)
• Include jQuery from a CDN, like Google

8. ADDING JQUERY TO YOUR WEB
PAGES

9. ADDING JQUERY TO YOUR WEB
PAGES
Advantages of using the hosted jQuery from Google or
Microsoft
• Many users already have downloaded jQuery from
Google or Microsoft when visiting another site. As a
result, it will be loaded from cache when they visit
your site, which leads to faster loading time
• Most CDNs will make sure that once a user requests a
file from it, it will be served from the server closest to
them, which also leads to faster loading time

10. JQUERY SYNTAX
• With jQuery you select (query) HTML elements and
perform "actions" on them
• The jQuery syntax is tailor-made for selecting
HTML elements and performing some action on the
element(s)
• Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

11. JQUERY SYNTAX

12. 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 name, id, classes, types,
attributes, values of attributes and much more
• It's based on the existing CSS Selectors, and in
addition, it has some own custom selectors
• All selectors in jQuery start with the dollar sign and
parentheses: $()

13. JQUERY SELECTORS
The element Selector
• The jQuery element selector selects elements
based on the element name
HTML JavaScript

14. JQUERY SELECTORS
The element Selector
• The jQuery element selector selects elements
based on the element name

15. JQUERY SELECTORS
The id Selector
• The jQuery #id selector uses the id attribute
of an HTML tag to find the specific element
• An id should be unique within a page, so you
should use the #id selector when you want to
find a single, unique element
JavaScript

16. JQUERY SELECTORS
The class Selector
• The jQuery .class selector finds elements
with a specific class

17. JQUERY SELECTORS
Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']")
Selects all <a> elements with a target attribute value equal
to "_blank"
$("a[target!='_blank']")
Selects all <a> elements with a target attribute value NOT
equal to "_blank"
$(":button")
Selects all <button> elements and <input> elements of
type="button"
$("tr:even") Selects all even <tr> elements

18. EQUIVALENT JAVASCRIPT
Hide all <p> elements on a
page
Change the text inside of a <button>
element

19. JQUERY DOCUMENT READY
EVENT
• The document ready event fires off when the
document has been fully loaded
• All jQuery should be executed after the
document is loaded
• Therefore all jQuery code should be nested
inside a document ready event
Full syntax Shorthand

20. JQUERY EVENTS
• All the different visitors' 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

21. JQUERY SYNTAX FOR EVENT
METHODS
• In jQuery, most DOM events have an equivalent
jQuery method
• To define what should happen when the event
fires you must pass a callback function to the
event

22. COMMON JQUERY METHODS
Method Description
$(document).ready() Allows us to execute a function when the document is fully
loaded
click() The function is executed when the user clicks on the HTML
element.
dblclick() The function is executed when the user double-clicks on the
HTML element.
mouseenter() The function is executed when the mouse pointer enters the
HTML element
mouseleave() The function is executed when the mouse pointer leaves the
HTML element
mousedown() The function is executed, when the left, middle or right mouse
button is pressed down, while the mouse is over the HTML
element
mouseup() The function is executed, when the left, middle or right mouse
button is released, while the mouse is over the HTML element
hover() The first function is executed when the mouse enters the

23. JQUERY SYNTAX FOR EVENT
METHODS
The on() method
• The on() method attaches one or more event
handlers for the selected elements
• Attach a click event to a <p> element

24. JQUERY SYNTAX FOR EVENT
METHODS
The on() method
• The on() method attaches one or more event
handlers for the selected elements
• Attach multiple event handlers to a <p>
element

25. EQUIVALENT JAVASCRIPT
Hide the <p> element that was clicked on
the page

26. EQUIVALENT JAVASCRIPT
Change a <div> color to blue when the mouse is
over it

27. JQUERY – GET CONTENT AND
ATTRIBUTES
• jQuery comes with a bunch of DOM related
methods that make it easy to access and
manipulate elements and attributes
• Three simple, but useful, jQuery methods for DOM
manipulation 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

28. JQUERY – GET CONTENT AND
ATTRIBUTES

29. JQUERY – GET CONTENT AND
ATTRIBUTES
• The jQuery attr() method is used to get
attribute values

30. JQUERY – SET CONTENT AND
ATTRIBUTES
• The same jQuery methods (text(), html(),
val(), attr()) can also be used to set content
and attributes
• These also come with callback functions that can
be used
• The callback function has two parameters: the index of
the current element in the list of elements selected
and the original (old) value

31. JQUERY – ADD ELEMENTS
Add New HTML Content
• append() – Inserts content at the end of the
selected elements
• prepend() – Inserts content at the beginning of the
selected elements
• after() – Inserts content after the selected
elements
• before() – Inserts content before the selected
elements

32. JQUERY – REMOVE ELEMENTS
To remove elements and content, there are mainly
two jQuery methods:
• remove() – Removes the selected element (and its child
elements)
• empty() – Removes the child elements from the selected
element

33. JQUERY – GET AND SET CSS
CLASSES
• 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
• toggleClass() – Toggles between
adding/removing classes from the selected elements
• css() – Sets or returns the style attribute

34. JQUERY – GET AND SET CSS
CLASSES
What’s with the dollar
sign in the name of a
variable?

35. JQUERY – GET AND SET CSS
CLASSES

36. JQUERY – GET AND SET CSS
CLASSES
• Using the css() method to get an attribute
• Using the css() method to set attributes

37. JQUERY – DIMENSIONS
• jQuery has several important methods for
working with dimensions:
• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

38. JQUERY TRAVERSING
• jQuery traversing (which means “to 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
• jQuery provides a variety of methods that allow
us to traverse the DOM

39. JQUERY TRAVERSING
Three useful jQuery methods for traversing up
the DOM tree are:
• parent() – returns the direct parent element of the
selected element
• parents() – returns all ancestor elements of the
selected element, all the way up to the document's
root element (<html>)
• parentsUntil() – returns all ancestor elements
between two given arguments

40. JQUERY TRAVERSING
Two useful jQuery methods for traversing down
the DOM tree are:
• children() – returns all direct children of the
selected element
• find() – returns descendant elements of the
selected element, all the way down to the last
descendant

41. JQUERY TRAVERSING
There are many useful jQuery methods for traversing
sideways in the DOM tree:
• siblings() – returns all sibling elements of the selected element
• next() – returns the next sibling element of the selected element
• nextAll() – returns all next sibling elements of the selected
element
• nextUntil() – returns all next sibling elements between two
given arguments
• prev() – returns the previous sibling element of the selected
element
• prevAll() – returns all previous sibling elements of the selected
element
• prevUntil() – returns all previous sibling elements between two
given

42. JQUERY TRAVERSING –
FILTERING
There are several methods to filter your data
using jQuery:
• first() – returns the first element of the specified
elements
• last() – returns the last element of the specified
elements
• eq() – returns an element with a specific index
number of the selected elements
• filter() – lets you specify a criteria: elements that
do not match the criteria are removed from the
selection, and those that match will be returned

43. JQUERY ANIMATIONS
There are several methods to animate elements
in jQuery:
• hide(), show(), toggle()
• fadeIn(), fadeOut(), fadeToggle(), fadeTo()
• slideDown(), slideUp(), slideToggle()
• animate()
• stop()

44. JQUERY ANIMATIONS

45. JQUERY ANIMATIONS

46. JQUERY ANIMATIONS

47. JQUERY ANIMATIONS

48. JQUERY ANIMATIONS

49. JQUERY – CHAINING
• Chaining, allows you to run multiple jQuery
commands, one after the other, on the same
element(s)
• To chain an action, you simply append the
action to the previous action

50. JQUERY – AJAX
• jQuery provides several methods for AJAX
functionality
• With the jQuery AJAX methods, you can
request text, HTML, XML, or JSON from a
remote server using both HTTP Get and HTTP
Post
• You can load the external data directly into the
selected HTML elements of your web page

51. JQUERY – AJAX
The jQuery load() Method
• The jQuery load() method is a simple, but
powerful AJAX method
• The load() method loads data from a server
and puts the returned data into the selected
element

52. JQUERY – AJAX
The jQuery $.get() and $.getJSON() methods
• The $.get() and $.getJSON() methods
request data from the server with an HTTP GET
request

53. JQUERY – AJAX
The jQuery $.post() method
• The $.post() method requests data from the
server using an HTTP POST request

54. JQUERY – AJAX
The jQuery $.ajax() method
• The $.ajax() method can pe used to GET or
POST data from/to the server

55. JQUERY – EXAMPLE 01
• Dynamically generate a table that imports data
from http://www.filltext.com/ (First Name,
Last Name and E-mail address)
• Implement a filter that is able to search for
data in the table and hides rows which to not
match the search criteria

56. JQUERY – EXAMPLE 01

57. JQUERY – EXAMPLE 01

58. JQUERY – EXAMPLE 01
We need
some
style,
man!

59. JQUERY – EXAMPLE 01

60. JQUERY – EXAMPLE 01

61. JQUERY – EXAMPLE 01

62. JQUERY – EXAMPLE 01

63. JQUERY – EXAMPLE 01

64. JQUERY – EXAMPLE 01

65. JQUERY – EXAMPLE 01
Homework:
• Add infinite scroll to the table

66. TEMPLATING ENGINES
• Templating engines can be used to generate
code templates (duuuh), to avoid having to
create “messy” HTML strings in our
JavaScript/jQuery code
• One of the most popular templating engines is
“Mustache.js”

67. TEMPLATING ENGINES

68. TEMPLATING ENGINES
• Include “Mustache.js”

69. TEMPLATING ENGINES
• Create the HTML template

70. TEMPLATING ENGINES
• Call the Mustache rendering engine with the
appropriate data

71. TEMPLATING ENGINES
• The result is exactly the same, but the code is
now much cleaner

72. TEMPLATING ENGINES
When you think the class ends at
slide 71…

73. TEMPLATING ENGINES
• An even cleaner way to create your template is
to use the <template> tag directly in your
HTML document to define a template for your
data layout

74. TEMPLATING ENGINES
Visual Studio
2017 be like

75. TEMPLATING ENGINES
• Grab the template with jQuery and render the
data using Mustache

76. TEMPLATING ENGINES
• Again, the result will be exactly the same as
previously, however, the code is much cleaner,
easier to read and maintain

78. FINAL EXAM AND LABORATORY
TEST
• Final exam – Sat, 11 January 2020, room 41
• 08:00 – ENG
• 10:00 – RO
• Laboratory test
• Those who came to LT01 with their personal laptops
are asked to also come with their laptops to LT02
also (+ 1-2 people from each group, if possible)
• The time/day planning is the same as for LT01
(everyone should respect the planning)

79. IF YOU’D LIKE TO MEET AGAIN…
• 4th year, 2nd semester – choose Elements of
Automated Testing (Elemente de Testare
Automata – ETA)

80. BIBLIOGRAPHY
• https://www.w3schools.com/jquery/default.asp
• https://www.w3schools.com/jquery/jquery_dom
_get.asp
• https://www.w3schools.com/jquery/jquery_trav
ersing.asp
• https://www.w3schools.com/jquery/jquery_ajax
_intro.asp
• https://www.w3schools.com/jquery/trysel.asp
• http://www.filltext.com/

81. COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies