Jquery Interfaces

1
WEB INTERFACE CHAPTER 4

DESIGN
Interactive
HIGHER EDUCATION TRAINING CYCLE Content
WEB APPLICATIONS DEVELOPMENT
2023-2024
CLIL: Content and Language Integrated Learning Teacher: María Ángeles García Escrig
WID - Unit 4. Interactive Content
Interactive Content
Outline to get started
According to the RAE, interaction is defined as the action reciprocally
exerted between two or more objects, agents, forces, functions, etc.
From the point of view of web design and development, an interactive
website is essentially an Internet page that uses different kinds of
software to create a rich, interactive experience for the user.
In this topic we will focus on the interaction of web objects with jQuery,
inevitably using HTML5 and CSS3.
Its motto is
‘Write less do more’
WID - Unit 4. Interactive Content 2
Objectives
1. Identify current needs for interactive content.

2. Add interactivity to web designs.
3. Add interactive animations to a web page.
4. Develop and add animations for different browsers.
5. Verify the functioning of animations in different browsers.
6. Verify the functioning of multimedia contents in different browsers.

Content Index
1. Introduction to JQUERY.
2. Event management. Introduction.
3. Some interesting methods.
4. Execution of sequence of functions.
5. Behavior of visual elements. Effects.
6. Interactive behaviors.
7. Reproduction of sound, video and animation.
8. Conclusions.
9. Documentation, bibliography and links of interest.

Related topics to research
• CLIL • User experience design. UX

• Interactivity advantatges. • Information at a glance
• jQuery last version

1.INTRODUCTION TO jQuery
BASIC INTERACTIVE ELEMENTS AND ADVANCED
1.1. Advantages of using jQuery

1.2. Basic document jQuery
1.3. Change of css properties
1.4. Selectors jQuery
1.5. jQuery filters

1.1. Advantages of using jQuery
✓ jQuery is widely used ✓ Animations and cool effects

✓ Promotes simplicity ✓ Highly extensible. Plugins
✓ Cross-browser compatibility ✓ Pages load faster
✓ Clean and beautiful syntax ✓ SEO-friendly
✓ Lightweight and lean ✓ Utility features
✓ Open source library
https://tekslate.com/11-benefits-jquery-every-web-designers-know
7
En castellano. Artículo de opinión: https://openwebinars.net/blog/diferencias-javascript-jquery/

1.INTRODUCTION TO jQuery. Basic document.

1. Include ALL the style sheets to be used to ensure that when the DOM
has finished loading, all the styles are already applied.
2. Link to the latest version of the jQuery library. As the jQuery
framework is actually a JavaScript script, we will include it in our
applications in the same way we include other scripts.
https://jquery.com/download/
Local: <script src="script/jquery-3.7.1.js"></script>
From server:
<script src="http://code.jquery.com/jquery-3.7.1.js"> </script>
8
3. Include the jQuery file/s: <script src="script/my-jquery-file.js"></script>
1.INTRODUCTION TO jQuery. Basic document.

All jQuery instructions must be contained within the following code:
$(document).ready(function() {. . .});
Code of Examples
You have the example code of "basic document" in the file
jQuerySelectors-2023.zip
The files of the examples in this section are:
✓ 01 documentoBasico1.html
✓ 02 documentoBasico2.html 9

1.INTRODUCTION TO jQuery. Basic document. II
This ready() function indicates that the jQuery code will be executed
when the HTML code has been fully loaded and the DOM tree has been
generated. This must be so because jQuery works with the elements on the
page, referenced through the DOM. If the objects have not been loaded, the
jQuery code cannot be executed, and an error will be launched.
Code of Examples
✓ 03 documentReady.html
✓ 04 documentReadySimplificado.html 10

Before we begin: let’s introduce the css() jQuery function.
The css() function allows us to know and change the properties of the
elements (properties defined mainly with CSS).
Basically, this function can be used for three purposes:
Purpose syntax example
Know the value of some CSS css("propertyname"); $("div").css("color"));
property
Set a value for a CSS css("propertyname", $("div").css("color", "blue") );
"value");
property
Set the value of several CSS css({"propertyname":"value", $("div").css({ "color": "blue",
"propertyname":"value",...}); "background-color": "yellow", "font-
properties at the same time 11
size": "200%"});

Code of Examples
You have the example code of “on()" and off() event handlers in
Topic4-1-2023.zip
✓ Seccion_4_1_3-css-cambio_valor_prop.html
12

1.INTRODUCTION TO jQuery. Selectors.
1.4. Selectors jQuery
The most used function in jQuery is $(). This function is used to select an
element from the DOM tree through any kind of CSS selector.
$("a");
$("#myIdentifier");
$(".MyClass");
Download and review the following files
$("#myIdentifier2, div, .MyClass2"); in moodle:
$("section div, p+h2, article > h3"); ✓ T1.1 filtros jQuery.2023.pdf
$("a[rel]");
//With a certain attribute ✓ T1.2 métodos de filtrado jQuery.2023.pdf
$("input[@type=radio]"); ✓ T1.3 Selectores por atributos.2023.pdf
//With a value for an attribute
$("/html/body//p"); //Using XPath
13

1.INTRODUCTION TO jQuery. Selectors. II
Code of Examples
✓ 05 selectorUniversal.html ✓ 11 selectorDescendientes.html
✓ 06 selectorEtiqueta.html ✓ 12 selectoresAgrupados.html
✓ 07 selectorId.html ✓ 13 selectorAdyacente.html
✓ 08 selectorClase.html ✓ 19 selectorAtributos1.html
✓ 09 selectoresCombinados.html ✓ 20 selectorAtributos2.html
✓ 10 selectorHijosDirectos.html
14

1.INTRODUCTION TO jQuery. Selectors. III
1.5. jQuery filters

The jQuery filters allow us to refine the elements we are selecting.
A filter is defined with a colon ":" and then the word that defines the type of
filter we want to apply.
For example: :header, :empty, :parent
On the platform you have a table with the jQuery filters in the file
T1.1. filtros jQuery.2023.pdf
Some of these filters are available from the appearance of the corresponding
pseudo-class in CSS 3.
To see the percentage of compatibility with CSS 3 of the browser we use, we
can go to the page http://css3test.com 15

1.INTRODUCTION TO jQuery. Selectors. IV
Code of Examples
17 filtroEmpty.html Select empty items.

18 filtroContains.html Select items based on the text they contain.
16

2. EVENT MANAGEMENT. Introduction.
2.1. .click() Deprecated

2.2. .on()
17

2. EVENT MANAGEMENT. Introduction.
jQuery has a complete event model that makes easy to schedule
interactions between the user and the objects on the web page.
jQuery has as many functions as standard JavaScript events.
javaScript event JQuery function
XXX
OnXXX
on(XXX, function(){ …})
For each event available there are two driving possibilities:
•You can pass a function that determines your behavior.
•It is not passed function, then the element's JavaScript event is executed.
Visit: https://api.jquery.com/category/events/
18
https://www.w3schools.com/jquery/jquery_events.asp
2. EVENT MANAGEMENT. click(). Deprecated
jQuery click() runs each time an item in the DOM is clicked.
This API is deprecated. It is explained just in case you find this way in any code file.
In previous versions, it was used these possibilities:
Syntax:
$("selector"). click(function(){
event click on the item selected by the "selector". function() is optional });
•You can pass a function that determines your behavior.

$("p").click(function(){alert($(this).text() );});
• None function is passed, then the element's JavaScript event is executed.

$("a"). click();
In this case, the click default function() associated with the onclick event is executed. 19

2. EVENT MANAGEMENT. click(). Deprecated
This API is deprecated.

Visit: https://api.jquery.com/click-shorthand/
https://api.jquery.com/click/
Instead of… Use
.click( handler ) .on( "click", handler )
.click( eventData, handler ) .on( "click", eventData, handler )
.click() .trigger( "click" ).
Current correct syntax:

$("selector").on("click", function(){
event click on the item selected by the "selector"});
20
$("p").on("click", function(){alert($(this).text()); });
2. EVENT MANAGEMENT. on() / off().
Visit … https://api.jquery.com/on/
.on() method attaches an event handler function for one or more events to
the selected elements.
$("p").on("click mouseenter mouseleave", function(e){
/* anonymous function */
/* event handler: actions to execute */
})
.off() method removes event handlers that were attached with .on().
$("p").off();
$("p").off("mouseenter"); 21

The "actions to be executed" defined through the anonymous function

function(e), could also have been defined through a function assigned to
a variable.
var drivingFunction = function(){
/* function assigned to a variable */
/* event handler: actions to execute */
}
$("p").on("click mouseenter mouseleave", drivingFunction)
And we could also do:

$("p").off("click", drivingFunction)
22

Code of Examples
You have the example code of “on()" and “off()” event handlers in
Topic4-1-2023.zip
✓ Seccion_4_2_on.html
✓ Seccion_4_2_on_off.html
23

3. SOME INTERESTING METHODS.
3.1. .toggle()
3.2. Adding new elements:
.append() and .prepend()
3.3. Adding text:.text()
3.4. Other methods
24

3.1. .toggle() Displays or hides the matched elements.

https://api.jquery.com/toggle/ https://www.w3schools.com/jquery/eff_toggle.asp
Alternatively, hides and displays the element on which you interact

(by clicking "click" on it)
✓ Referred property: visibility
✓ Referred functions:
1. hide() sets visibility: hidden;
2. show() sets visibility: visible;
Syntax:
$(selector).toggle(speed, easing, callback)
25

3.2. Adding new elements: .append() and .prepend()

.append() allows you to insert content such as the last child (DOM tree) of each element of
the selected collection.
https://api.jquery.com/append/ https://www.w3schools.com/jquery/html_append.asp
.prepend() allows you to insert content such as the first child, in the same way.
https://api.jquery.com/prepend/ https://www.w3schools.com/jquery/html_prepend.asp
Code of Examples
You have the example code of “append()" and “prepend()” functions in
Topic4-1-2023.zip
✓ Seccion_4_3_2_append-1.html ✓ Seccion_4_3_2_append-3.html
26
✓ Seccion_4_3_2_append-2.html ✓ Seccion_4_3_2_append-4.html

3.3. Adding text:.text()

.text() allows you to obtain or add a text to a particular element (allowing text). It can
be used in both HTML and XML:
In the form .text() you get the text of an element
(not valid for elements of forms such as <input> as it is used for it .val()).
In the form .text(text_string) write that text in the element that invokes him.
Code of Examples
You have the example code of “append()" and “prepend()” functions in
Topic4-1-2023.zip
✓ Seccion_4_3_3_text.html ✓ Seccion_4_3_3_text_vs_append-2.html
27
✓ Seccion_4_3_3_text_vs_append-1.html ✓ Seccion_4_3_3_text_vs_append-3.html

3.4. Other methods

.width() and .height(): for an element returns its internal dimensions (width and
height, respectively) excluding both, the padding and the edge (border).
.innerWidth() and .innerHeight(): for an element returns its internal dimensions
(width and height, respectively) including the padding of the element but not the
edge.
.outerWidth() and .outerHeight(): returns the external dimensions (width and
height, respectively) of the element including the padding of the element and its
edge.
.offset(): indicates the position of the real element, considering the margins of the
element. Returns an object with two, top and left, properties.
.position(): Get the current coordinates of the first element in the set of matched elements,
relative to the offset parent. Returns an object containing the properties top and left. 28

3.4. Other methods
Code of Examples
You have the examples code in
Topic4-1-2023.zip
✓Seccion_4_3_4_position-offset.html
✓Seccion_4_3_4_position-offset-1.html
✓Seccion_4_3_4_position-offset-2.html
29

4. jQuery FUNCTIONS.
4.1. Execution of function sequence

4.2. Traversal methods of the DOM
4.2.1. Filtering methods
4.2.2. Traversing methods
4.2.3. Other cross-cutting methods
30

jQuery allows you to work in four different ways to implement a sequence of

functions on the same element:
1. Traditional instruction sequence. The least optimal form.
2. Chaining: sequence of instructions separated by dot "." Improves the
performance of a script.
3. internal callback with anonymous function.
4. external callback with function assigned to a variable. The most optimal
and elegant form, as well as reusable.
31


1. Traditional instruction sequence. The least optimal form.
$("#misdivs").hide(4000);
$("#misdivs").css({"background": "#A6B0C2", "color": "#fff"});
$("#misdivs").show(4000);
2. Chaining: sequence of instructions separated by dot "." Improves the

performance of a script.
$("#misdivs1").hide(4000).css({"background": "#A6B0C2", "color": "#fff"}).show(4000);
32


3. internal callback with anonymous function.
$("#misdivs2").hide(4000, function(){
$(this). css({background: "#A6B0C2", "color": "#fff"}).show(4000);
});
4. external callback with function assigned to a variable. The most optimal

and elegant form, as well as reusable.
var show=function(){
$("#misdivs3"). css({background:"#A6B0C2","color“:"#fff"}).show(4000);
};
$("#misdivs3"). hide(4000, show);

33

Code of Examples
Topic4-1-2023.zip
✓Seccion_4_4_1_secuencia-show-hide-4000.html
✓Seccion_4_4_1_secuencia-show-hide.html
34

jQuery offers three types of traversal methods:

1. Filtering methods. They are used to filter the set of elements returned by a
selector.
2. DOM tree traversal methods. We use them to move through the nodes of the
DOM tree.
3. Other methods. They help us to perform other tasks.
Consider deprecated methods everytime version changes. Check API documentation.

35


4.2.1. Filtering methods
Please, visit URL https://api.jquery.com/category/traversing/filtering/

Code of Examples
You have some examples code in Topic4-2-2023.zip
01 metodoHas.html 02 metodoIs.html
01.1 metodoHas.html 03 metodoMap.html
01.2 metodosOddEven.html 04 metodoNot.html
36
01.3 metodosFirstLast.html


4.2.2. Traversing methods
Please, visit URL https://api.jquery.com/category/traversing/
Code of Examples
✓ 05 metodoFind.html
✓ 06 metodoNextUntil.html
✓ 07 metodoParent.html
37


4.2.3. Other cross-cutting methods
Finally, we will see other methods that cannot be classified in any of the
above types, for instance: .add(), .addBack(), .end()
Please, visit URL
https://api.jquery.com/category/traversing/miscellaneous-traversal/
Code of Examples
✓ 08 metodoAddBack.html
38
✓ 09 metodoEnd.html
5. BEHAVIOUR OF VISUAL ELEMENTS..EFFECTS
5.1. Basic effects. show() and hide()

5.2. Fading effects. Opacity/transparency of
elements
5.3. Sliding effects. Displacements
5.4. Other effects
5.4.1. .animate() method
5.4.2. .delay() method
5.4.3. .stop() method
39

5.1. Basic effects. show() and hide()

.show() Displays an element that was hidden (usually with a CSS property).
.hide() Hides an element that was visible (usually with a CSS property).
.show([duration] [, easing] [, callback]) .hide([duration] [, easing] [, callback])
$("span").show(500); $("span:last-child").hide("fast");
Code of Examples <span> is used to hide, with hide(), word by word a

phrase that will then be shown with show().
You have the examples code in I suggest you to modify the jQuery code that is executed
when you click on the "Show" button so that the phrase
Topic4-1-2023.zip appears word by word, from the first to the last, in the
The file of the example in this section is:

same way as it does when it disappears (which disappears
from the last word to the first). ** This example is based on
one of those shown in the jQuery API.
✓Seccion_4_5_1_show_hide.html http://api.jquery.com/show/
40

5.2. Fading effects. Opacity/transparency of elements
✓ .fadeIn ([duration] [, easing] [, callback]) shows an element with gradual

opacity (up to 1).
✓ .fadeOut ([duration] [, easing] [, callback]) hides an element with gradual
opacity ( up to 0).
✓ .fadeToggle ([duration] [, easing] [, callback]) like Toggle, alternates the
process of appearing and fading as you click on the element several times.
✓. fadeTo (duration, opacity [, easing] [, callback]) places the element at a
given opacity in a set time (duration number indicating milliseconds, fast or
slow). The opacity takes as value a value between 0 and 1. Both duration and
opacity are mandatory parameters in this method.
41

5.2. Fading effects. Opacity/transparency of elements
✓Fading effects only affect the opacity of the element
Code of Examples The example in this section shows the use of

fadeOut(). A text searches for words that are
adjectives:
You have the examples code in a) When the adjectives are placed on top of them, a
Topic4-1-2023.zip "hilite" class is added, which highlights them with a
yellow background.
The file of the example in this section is: b) When the adjectives come out, the class is taken
✓ Seccion_4_5_2_Fade.html away from them, and they return to their original
state.
c) When you click on them, they disappear, and a
message is displayed in a < div> (initially empty).
Recommended Activity: Activity 4.1 The code is commented. 42
Likewise, in CSS, the corresponding code is in

WID - Unit 4. Interactive Content /*4_4_2*/
5.3. Sliding effects. Movements.
Sliding allows for folding and unfolding effects

.slideUp ([duration] [, easing] [, callback]) picks up the elements in height
gradually until they disappear.
.slideDown ([duration] [, easing] [, callback]) displays the elements in
height gradually so that they appear.
.slideToggle ([duration] [, easing] [, callback]) like Toggle, alternates
the process of folding and unfolding in height as you click on the element an
odd or even number of times.
Sliding effects only affect the height of the element 43

5.3. Sliding effects. Movements. The example in this section shows the use of
slideDown().
There are four elements < div> that unfold
Code of Examples downwards. Three of them have text inside and one
has a button. When you click on the text “Click
You have the examples code in anywhere in the body of the page! “ < div> is
Topic4-1-2023.zip displayed. To do again, they contract again (with
The file of the example in this section is: hide("slow")).
In addition, the use of flexible boxes has already
✓ Section_4_5_3_slide.html been introduced. In CSS we have:
/* 4_4_3 */
See annex Annex I-the property display-SM.pdf

Recommended Activity: Activity 4.2
** code inspired by API jQuery examples: 44
http://api.jquery.com/slideDown/

5.4. Other effects. 5.4.1. .animate() method
.animate (properties, [duration] [, easing] [, callback])
is similar to using the .css() method except that the range of

possibilities in .animate() is much smaller: the CSS properties
used must have numeric values, those that are not numeric cannot
be animated. For example, width or height receive numeric values and
can be animated, however, background cannot be animated if given a
non-numeric value. Measurement values are treated in pixels (px)
unless otherwise indicated (em or %).
It is interesting to note that the value of the properties may be
45
relative to the value it currently has. For this, "+=" or "-=" is used.
5.4. Other effects. 5.4.1. .animate() method
Code of Examples
Topic4-1-2023.zip The example in this section shows the use of animate().
It uses a <div> that:
The file of the example in this section is: a) moves to the right and left using the ">>" and "<<"
✓ Section_4_5_4_animate.html buttons,
b) changes font size and increases font size (by clicking
on it)
** code inspired by API jQuery examples:
http://api.jquery.com/animate/
46

5.4. Other effects 5.4.2. .delay() method

.delay( duration [, QueueName] )
This method delays a specified time (duration) the animation of the

elements that are in a queue (QueueName), waiting to be animated.
Code of Examples ** For more information on effects in general
and on queue and its methods (clearQueue(),
You have the examples code in doQueue(), etc.) in particular, see:
Topic4-1-2023.zip http://api.jquery.com/category/effects/
✓ Section_4_5_4_delay.html
47

5.4. Other effects 5.4.3. .stop() method
This method is used to stop the jQuery animations or effects currently running on the
selected elements before it completes.
$(selector).stop(stopAll,goToEnd)
Code of Examples
Topic4-1-2023.zip
✓ Section_4_5_4_stop.html
48

6. INTERACTIVE BEHAVIOURS.
6.1. Mouse Events

6.2. Keyboard Events
6.3. Window events
jQuery Event Methods. W3schools documentation.

Category: Mouse Events. API jQuery documentation. 49

6. INTERACTIVE BEHAVIOURS. Mouse (I)
6.1. Mouse Events.
Category: Mouse Events. API jQuery documentation.
Mouse events are triggered when the user serves the mouse pointer over a particular
HTML element.
The basic structure of all events is:
$("elements").event(function (handler){ actions_to_execute });
Where:
• element(s): selected html element(s)
• event: type of mouse event to manage
• function (handler). Event management function
50

6. INTERACTIVE BEHAVIOURS. Mouse (I)
6.1. Mouse Events. Availables:
.click(). An event click is triggered when the user, placed on an
element press the left mouse button and lift it, all inside the same object.
Any HTML element can receive this event.
Other mouse events: (Check them in w3schools)
.dblclick(), .mousedown(), .mouseup(), .mouseenter(), .mouseleave(),
.mousemove(), .mouseover(), .mouseout(), .hover()
An interesting method is:

hover(input_function (handler), output_function (handler));
$("li#localizacion").hover(
Example function () {$("span#opcion_loc").show();},
function () {$("span#opcion_loc").hide();}); 51

6. INTERACTIVE BEHAVIOURS. Mouse (III)
6.1. Mouse Events
Code of Examples
Topic4-1-2023.zip
✓ Seccion_4_6_1_focus1.html
✓ Seccion_4_6_1_hover.html
✓ Seccion_4_6_1_mouseover.html
52

6. INTERACTIVE BEHAVIOURS. Keyboard (I) .
6.2. Keyboard Events
Element.Event( function (handler));
.focusin(), .focusout(), .keydown(), .keyup(), .keypress()
Code of Examples
Topic4-1-2023.zip
✓ Seccion_4_6_2_keypress.html
53

6. INTERACTIVE BEHAVIOURS.
6.3. Window events
Code of Examples
Topic4-1-2023.zip
✓ Seccion_4_6_3_resize.html
✓ Seccion_4_6_3_scroll.html
54

7. MULTIMEDIA.
REPRODUCTION OF SOUND,
VIDEO AND ANIMATION
55

7. MULTIMEDIA.
REPRODUCTION OF SOUND, VIDEO AND ANIMATION

✓ <audio> and <video> HTML5
✓ Other alternatives based on jQuery
❑ Acorn Media Player:

❑ Video JS:
❑ jPlayer:
❑ Flare Video:
❑ Media Element:
❑ Simple Player: 56

8. Conclusion and Proposals for extending
In this chapter we have made an introduction to jQuery from the point of view of the
design and creation of user interfaces. Mouse, keyboard and window events, effects
and animations have been the main points that have been treated. Most of the functionality
has been illustrated with example codes, which helps not only to understand interface
aspects, but also how the code is included in a web page.
✓ Plenty of code made by the jQuery community that offers quite complete interface
developments: buttons, menus, animations.
✓ jQuery offers alternatives related to conditions, loops, data access, etc.
✓ JavaScript in general and jQuery in particular is the language with which AJAX
(Asynchronous JavaScript And XML) technology is implemented, which makes this
language even more extensive and complete.
The topic is not intended to show everything related to jQuery, however, it does try to give
us a sample of what it allows to do and how, approaching it in a practical way to the use of 57
this technology related to the development of user interfaces.
9. Documentation, bibliography and links of interest.
❑ Web Interface Design. RA-MA Ed.

More information:
• w3school jQuery Tutorial

• jQuery API documentation
• The jQuery documentation (http://jquery.com/) is very complete in English
and includes many examples. There are also some useful resources in Spanish
for learning the basics.
58

59
WEB INTERFACE
DESIGN CHAPTER 4
Interactive
HIGHER EDUCATION TRAINING CYCLE
Content
WEB APPLICATIONS DEVELOPMENT
2023-2024
CLIL: Content and Language Integrated Learning Teacher: María Ángeles García Escrig

Jquery Interfaces

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Jquery Interfaces

Uploaded by

Copyright:

Available Formats

1

WEB INTERFACE CHAPTER 4

1. Identify current needs for interactive content.

WID - Unit 4. Interactive Content 3

WID - Unit 4. Interactive Content 4

• CLIL • User experience design. UX

WID - Unit 4. Interactive Content 5

BASIC INTERACTIVE ELEMENTS AND ADVANCED

1.1. Advantages of using jQuery

WID - Unit 4. Interactive Content

1.1. Advantages of using jQuery

✓ jQuery is widely used ✓ Animations and cool effects

WID - Unit 4. Interactive Content

1.2. Basic document jQuery

1.2. Basic document jQuery

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

1.5. jQuery filters

WID - Unit 4. Interactive Content

17 filtroEmpty.html Select empty items.

WID - Unit 4. Interactive Content

2.1. .click() Deprecated

WID - Unit 4. Interactive Content

•You can pass a function that determines your behavior.

• None function is passed, then the element's JavaScript event is executed.

WID - Unit 4. Interactive Content

This API is deprecated.

Current correct syntax:

WID - Unit 4. Interactive Content

The "actions to be executed" defined through the anonymous function

$("p").on("click mouseenter mouseleave", drivingFunction)

And we could also do:

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

WID - Unit 4. Interactive Content

3.1. .toggle() Displays or hides the matched elements.

Alternatively, hides and displays the element on which you interact

WID - Unit 4. Interactive Content

3.2. Adding new elements: .append() and .prepend()

WID - Unit 4. Interactive Content

3.3. Adding text:.text()

WID - Unit 4. Interactive Content

3.4. Other methods

WID - Unit 4. Interactive Content

3.4. Other methods

WID - Unit 4. Interactive Content

4.1. Execution of function sequence

WID - Unit 4. Interactive Content

4.1. Execution of function sequence

jQuery allows you to work in four different ways to implement a sequence of

WID - Unit 4. Interactive Content

4.1. Execution of function sequence

2. Chaining: sequence of instructions separated by dot "." Improves the

WID - Unit 4. Interactive Content

4.1. Execution of function sequence

4. external callback with function assigned to a variable. The most optimal

$("#misdivs3"). hide(4000, show);

WID - Unit 4. Interactive Content

4.1. Execution of function sequence

WID - Unit 4. Interactive Content