1. Web technologies
Tehnologii web

2. Course 11 JavaScript - jQuery
lect. eng. Rajmond JÁNÓ, PhD
fb.com/janorajmond
Room E05

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
$("*")
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
$("tr:odd")
Selects all odd <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() click()
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 HTML element, and the second function is executed when the mouse leaves the HTML element
focus()
The function is executed when the form field gets focus
blur()
The function is executed when the form field loses focus

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
not() – returns all elements that do not match the criteria

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 (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

81. Courses
Available online at: Information for Students -> Courses -> Web Technologies