jdm_javascript_dom_manipulator
Version:
framework javascript
11,090 lines • 176 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Jdm - Documentation</title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
<div class="navicon"></div>
</label>
<label for="nav-trigger" class="overlay"></label>
<nav>
<li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="AnimationOption.html">AnimationOption</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Jdm.html">Jdm</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_addClassList">jdm_addClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_addEventListener">jdm_addEventListener</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_addId">jdm_addId</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_append">jdm_append</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_appendAfter">jdm_appendAfter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_appendBefore">jdm_appendBefore</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_binding">jdm_binding</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_bounce">jdm_bounce</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_clearAnimations">jdm_clearAnimations</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_destroy">jdm_destroy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_empty">jdm_empty</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_extendChildNode">jdm_extendChildNode</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_extendNode">jdm_extendNode</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeIn">jdm_fadeIn</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInDown">jdm_fadeInDown</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInLeft">jdm_fadeInLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInRight">jdm_fadeInRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeInUp">jdm_fadeInUp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOut">jdm_fadeOut</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutDown">jdm_fadeOutDown</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutLeft">jdm_fadeOutLeft</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutRight">jdm_fadeOutRight</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_fadeOutUp">jdm_fadeOutUp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_findClassList">jdm_findClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_genEvent">jdm_genEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_getAttribute">jdm_getAttribute</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_getValue">jdm_getValue</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_innerHTML">jdm_innerHTML</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onChange">jdm_onChange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onClick">jdm_onClick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onDebounce">jdm_onDebounce</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onDoubleClick">jdm_onDoubleClick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onError">jdm_onError</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onInput">jdm_onInput</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onInvalid">jdm_onInvalid</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onLoad">jdm_onLoad</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onRightClick">jdm_onRightClick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onSelect">jdm_onSelect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_onSubmit">jdm_onSubmit</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_prepend">jdm_prepend</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_removeAttribute">jdm_removeAttribute</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_removeClassList">jdm_removeClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_removeEventListener">jdm_removeEventListener</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_rotation">jdm_rotation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_setAttribute">jdm_setAttribute</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_setStyle">jdm_setStyle</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_setValue">jdm_setValue</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_tada">jdm_tada</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_toggleClassList">jdm_toggleClassList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_validate">jdm_validate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_zoomIn">jdm_zoomIn</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Jdm.html#jdm_zoomOut">jdm_zoomOut</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Proto.html">Proto</a></span></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#_animation.">_animation.</a></span></li>
</nav>
<div id="main">
<h1 class="page-title">Jdm</h1>
<section>
<header>
<h2>
Jdm
</h2>
<div class="class-description">Classe Jdm che fornisce un framework per la manipolazione del DOM.
Permette di creare un elemento DOM, aggiungerlo a un genitore, assegnargli delle classi
e manipolarlo in modo ricorsivo, se richiesto.
I metodi della classe sono concatenabili per facilitare le operazioni sul DOM.
# INSTALLAZIONE:
NPM
```bash
npm install jdm_javascript_dom_manipulator
```
Esempio di utilizzo classico (da inserire prima degli script che usano JDM):
```html
<script src="./dist/jdm.js"></script>
```
Esempio di utilizzo di un modulo ES6 (NB: usa jdm.es.js):
```javascript
import './dist/jdm.es.js';
```
# USO
```javascript
JDM('div', container, ['fooClass','barClass'])
```
# COMPARAZIONE:
## jQuery:
```javascript
const $div = $('<div>', { class: 'foo bar' });
const $ul = $('<ul>');
const $li1 = $('<li>').text('Elemento 1');
const $li2 = $('<li>').text('Elemento 2');
const $li3 = $('<li>').text('Elemento 3');
const $li4 = $('<li>').text('Elemento 4');
const $li5 = $('<li>').text('Elemento 5');
$ul.append($li1, $li2, $li3, $li4, $li5);
$div.append($ul);
$('body').append($div);
```
## JavaScript puro:
```javascript
const div = 'div';
div.classList.add('foo', 'bar');
const ul = document.createElement('ul');
const li1 = document.createElement('li');
li1.textContent = 'Elemento 1';
const li2 = document.createElement('li');
li2.textContent = 'Elemento 2';
const li3 = document.createElement('li');
li3.textContent = 'Elemento 3';
const li4 = document.createElement('li');
li4.textContent = 'Elemento 4';
const li5 = document.createElement('li');
li5.textContent = 'Elemento 5';
ul.append(li1, li2, li3, li4, li5);
div.appendChild(ul);
document.body.appendChild(div);
```
## Jdm:
```javascript
const domString = `
<div class="foo bar">
<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
<li> Elemento 4 </li>
<li> Elemento 5 </li>
</ul>
</div>`;
const div = JDM(domString, document.body);
```</div>
</header>
<article>
<div class="container-overview">
<div class="section-method">
<h2>Constructor</h2>
<h4 class="name" id="Jdm"><span class="type-signature"></span>new Jdm<span class="signature">(element<span class="signature-attributes">opt</span>, parent<span class="signature-attributes">opt</span>, classList<span class="signature-attributes">opt</span>, deep<span class="signature-attributes">opt</span>, …args<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Crea una nuova istanza della classe Jdm e manipola l'elemento DOM.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line143">line 143</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>element</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>null</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">
L'elemento DOM da manipolare. Se non specificato, verrà creato un nuovo nodo.
</td>
</tr>
<tr>
<td class="name"><code>parent</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>null</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">
Il genitore dell'elemento. Se specificato, l'elemento verrà aggiunto come figlio del genitore.
</td>
</tr>
<tr>
<td class="name"><code>classList</code></td>
<td class="type">
<span class="param-type"><code>Array.<string></code></span>
|
<span class="param-type"><code>null</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">
Una lista di classi da aggiungere all'elemento. Se specificato, verranno aggiunte le classi all'elemento.
</td>
</tr>
<tr>
<td class="name"><code>deep</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
Se impostato su `true`, i figli dell'elemento verranno manipolati ricorsivamente.
</td>
</tr>
<tr>
<td class="name"><code>args</code></td>
<td class="type">
<span class="param-type"><code>*</code></span>
</td>
<td class="attributes">
<optional><br>
<repeatable><br>
</td>
<td class="default">
</td>
<td class="description last">
Altri argomenti opzionali che possono essere passati per la manipolazione del nodo.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo appena creato o manipolato.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body, ['my-class'], true);
// Crea un nuovo div con la classe 'my-class' e lo aggiunge al body
//language=html
const domString = `
<div class="my-class">
<p> paragraph </p>
</div>
`;
JDM(domString, document.body)
// Crea un nuovo div con la classe 'my-class', un paragrafo child e lo aggiunge tutto al body</code></pre>
</div>
</div>
</div>
<h3 class="subsection-title">Methods</h3>
<div class="section-method">
<h4 class="name" id="jdm_addClassList"><span class="type-signature"></span>jdm_addClassList<span class="signature">(classList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge una o più classi CSS all'elemento DOM.
Se viene fornito un array di classi, tutte le classi vengono aggiunte all'elemento.
Se viene fornita una singola classe, questa viene aggiunta come unica classe.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line464">line 464</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>classList</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Array.<string></code></span>
</td>
<td class="description last">
Una singola classe CSS o un array di classi CSS da aggiungere all'elemento DOM.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui le classi sono state aggiunte, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_addClassList('myClass'); // Aggiunge la classe "myClass" all'elemento div.
const div2 = JDM('<div>lorem ipsum</div>', document.body)
.jdm_addClassList(['class1', 'class2']); // Aggiunge "class1" e "class2" all'elemento div2.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_addEventListener"><span class="type-signature"></span>jdm_addEventListener<span class="signature">(name, fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per un evento specificato sull'elemento DOM associato.
Consente di eseguire una funzione di callback quando l'evento si verifica.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1048">line 1048</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Il nome dell'evento per cui aggiungere il listener (es. "click", "input", ecc.).
</td>
</tr>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback che viene eseguita quando l'evento si verifica. Il valore predefinito è una funzione vuota.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui è stato aggiunto l'evento, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const element = JDM('<div>Click me</div>', document.body)
.jdm_addEventListener('click', () => {
console.log('Click!');
})
.jdm_addEventListener('contextmenu', () => {
console.log('Right Click!');
})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_addId"><span class="type-signature"></span>jdm_addId<span class="signature">(id)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un attributo `id` all'elemento DOM specificato.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line443">line 443</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
Il valore dell'attributo `id` da impostare sull'elemento DOM.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato impostato l'attributo `id`, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_addId('myDiv'); // Imposta l'attributo id="myDiv" sull'elemento div.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_append"><span class="type-signature"></span>jdm_append<span class="signature">(elementList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge uno o più elementi figli a un elemento DOM.
Se viene fornita una lista di elementi, tutti gli elementi vengono aggiunti all'elemento DOM.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line360">line 360</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>elementList</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>Array.<HTMLElement></code></span>
</td>
<td class="description last">
Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const p1 = JDM('<p>paragrafo 1</p>');
const p2 = JDM('<p>paragrafo 2</p>');
const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_append([p1, p2]); // Aggiunge entrambi i paragrafi come figli del div.
const span = JDM('span');
div.jdm_append(span); // Aggiunge il singolo elemento span come figlio del div.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_appendAfter"><span class="type-signature"></span>jdm_appendAfter<span class="signature">(elementList, elementTarget)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line428">line 428</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>elementList</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>Array.<HTMLElement></code></span>
</td>
<td class="description last">
Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
</td>
</tr>
<tr>
<td class="name"><code>elementTarget</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
</td>
<td class="description last">
gli elementi di element list verranno inseriti dopo questo elemento
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM dietro il quale sono stati inseriti gli elementList, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div></div>', document.body);
const span1 = JDM('<span>foo</span>',div);
const span2 = JDM('<span>bar</span>');
const span3 = JDM('<span>test</span>');
span1.jdm_appendAfter([span2, span3]);
// Risultato
<div>
<span>foo</span>
<span>bar</span>
<span>test</span>
</div></code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_appendBefore"><span class="type-signature"></span>jdm_appendBefore<span class="signature">(elementList, elementTarget)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line406">line 406</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>elementList</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>Array.<HTMLElement></code></span>
</td>
<td class="description last">
Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
</td>
</tr>
<tr>
<td class="name"><code>elementTarget</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
</td>
<td class="description last">
gli elementi di element list verranno inseriti prima di questo elemento
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM davanti al quale sono stati inseriti gli elementList, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div></div>', document.body);
const span1 = JDM('<span>foo</span>',div);
const span2 = JDM('<span>bar</span>');
const span3 = JDM('<span>test</span>');
span1.jdm_appendBefore([span2, span3]);
// Risultato
<div>
<span>bar</span>
<span>test</span>
<span>foo</span>
</div></code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_binding"><span class="type-signature"></span>jdm_binding<span class="signature">(el, event<span class="signature-attributes">opt</span>, twoWayDataBinding<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Imposta un binding di dati tra l'elemento corrente e un altro o più elementi.
Questo metodo consente di sincronizzare i valori tra gli elementi DOM, abilitando il data binding unidirezionale o bidirezionale.
Se un valore cambia nell'elemento sorgente (ad esempio un `input`), il valore dell'elemento di destinazione (ad esempio un altro `input` o `div`) viene aggiornato.
Se il binding bidirezionale è abilitato, i cambiamenti sono sincronizzati in entrambe le direzioni.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line678">line 678</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>el</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>Array.<HTMLElement></code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
L'elemento o la lista di elementi con cui si desidera stabilire il binding.
</td>
</tr>
<tr>
<td class="name"><code>event</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
"input"
</td>
<td class="description last">
Il tipo di evento da ascoltare per attivare il binding. Default è "input".
</td>
</tr>
<tr>
<td class="name"><code>twoWayDataBinding</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
Se `true`, attiva il binding bidirezionale. Se `false`, il binding sarà unidirezionale.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato applicato il binding, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const input = JDM('input', document.body);
const output = JDM('input', document.body);
input.jdm_binding(output, "input", true);
// Crea un binding unidirezionale tra l'input e l'output, che si attiva sull'evento 'change'.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_bounce"><span class="type-signature"></span>jdm_bounce<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione tipo bounce al nodo (come in animate.css).
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1278">line 1278</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> Bounce </div>`, document.body)
.jdm_bounce(() => console.log('Bounce completato!'), { duration: 1000 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_clearAnimations"><span class="type-signature"></span>jdm_clearAnimations<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Rimuove tutte le animazioni attive sul nodo e ripristina lo stile iniziale.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1110">line 1110</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo animated"> Test </div>`, document.body)
.jdm_clearAnimations();</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_destroy"><span class="type-signature"></span>jdm_destroy<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Rimuove l'elemento DOM dal documento e genera un evento di distruzione.
Questo metodo elimina l'elemento DOM rappresentato da `this.node` dalla struttura del documento.
Inoltre, viene generato un evento personalizzato chiamato "destroy".
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line566">line 566</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM che è stato rimosso, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_destroy(); // Rimuove l'elemento div dal documento e genera un evento "destroy".</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_empty"><span class="type-signature"></span>jdm_empty<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Svuota il contenuto dell'elemento DOM.
A seconda del tipo di elemento, il comportamento di "svuotamento" varia:
- Per gli elementi `input` di tipo `checkbox` o `radio`, deseleziona l'elemento (imposta `checked` a `false`).
- Per gli altri elementi `input` o `textarea`, imposta il valore a `null` (svuotando il campo di testo).
- Per un elemento `form`, esegue il reset del modulo (ripristina tutti i campi al loro stato iniziale).
- Per altri tipi di elementi, rimuove il contenuto HTML dell'elemento (imposta `innerHTML` a una stringa vuota).
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line549">line 549</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato effettuato lo svuotamento, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const inputText = JDM('input', document.body)
.jdm_empty(); // Imposta il valore dell'input text a null.
const checkbox = JDM('input', document.body)
.jdm_setAttribute('type', 'checkbox')
.jdm_empty(); // Deseleziona la checkbox.
const form = JDM('form').jdm_empty(); // Esegue il reset del modulo.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_extendChildNode"><span class="type-signature"></span>jdm_extendChildNode<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Estende l'elemento corrente con i nodi figli definiti in `jdm_childNode`.
Se l'elemento ha nodi figli associati a `jdm_childNode`, questi vengono aggiunti come proprietà dell'elemento stesso.
### NB:questo metodo NON funziona sui form
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1096">line 1096</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const domString = `
<div class="foo">
<div data-name="element1"> Element 1</div>
<div data-name="element2"> Element 2</div>
<div data-name="element3"> Element 3</div>
</div>`;
const div = JDM(domString, document.body)
.jdm_extendChildNode();
console.log(div.element1);
console.log(div.element2);
console.log(div.element3);</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_extendNode"><span class="type-signature"></span>jdm_extendNode<span class="signature">(name, object<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Estende l'elemento DOM aggiungendo una proprietà personalizzata.
Questo metodo assegna un oggetto o un valore alla proprietà `name` dell'elemento DOM rappresentato da `this.node`.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line637">line 637</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Il nome della proprietà da aggiungere all'elemento DOM.
</td>
</tr>
<tr>
<td class="name"><code>object</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
|
<span class="param-type"><code>null</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">
L'oggetto o il valore da associare alla proprietà. Può essere qualsiasi tipo di valore, incluso `null`.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stata aggiunta la proprietà personalizzata, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_extendNode('customData', { id: 123, name: 'My Div' });
// Aggiunge la proprietà 'customData' all'elemento div con un oggetto come valore.
console.log(div.customData); // { id: 123, name: 'My Div' }</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeIn"><span class="type-signature"></span>jdm_fadeIn<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di fade-in sul nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1132">line 1132</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeIn </div>`, document.body)
.jdm_fadeIn(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeInDown"><span class="type-signature"></span>jdm_fadeInDown<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione tipo fadeInDown al nodo .
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1146">line 1146</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeInDown </div>`, document.body)
.jdm_fadeInDown(() => console.log('done'), { duration: 1000, easing: 'ease-out' });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeInLeft"><span class="type-signature"></span>jdm_fadeInLeft<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione tipo fadeInLeft al nodo .
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1174">line 1174</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeInLeft </div>`, document.body)
.jdm_fadeInLeft(() => console.log('Fade in left concluso'), { duration: 800 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeInRight"><span class="type-signature"></span>jdm_fadeInRight<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione tipo fadeInRight al nodo .
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1187">line 1187</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeInRight </div>`, document.body)
.jdm_fadeInRight(() => console.log('Fade in right concluso'), { duration: 800 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeInUp"><span class="type-signature"></span>jdm_fadeInUp<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione tipo fadeInUp al nodo .
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1160">line 1160</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeInUp </div>`, document.body)
.jdm_fadeInUp(() => console.log('Fade in up concluso'), { duration: 800 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeOut"><span class="type-signature"></span>jdm_fadeOut<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di fade-out sul nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1203">line 1203</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeOut </div>`, document.body)
.jdm_fadeOut(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeOutDown"><span class="type-signature"></span>jdm_fadeOutDown<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di fade out down sul nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1249">line 1249</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeOutDown </div>`, document.body)
.jdm_fadeOutDown(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeOutLeft"><span class="type-signature"></span>jdm_fadeOutLeft<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di fade out left sul nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1264">line 1264</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeOutLeft </div>`, document.body)
.jdm_fadeOutLeft(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeOutRight"><span class="type-signature"></span>jdm_fadeOutRight<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di fade out right sul nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1219">line 1219</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeOutRight </div>`, document.body)
.jdm_fadeOutRight(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_fadeOutUp"><span class="type-signature"></span>jdm_fadeOutUp<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di fade out up sul nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1234">line 1234</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> FadeOutUp </div>`, document.body)
.jdm_fadeOutUp(()=> {console.log('test')}, {duration: 2000, direction: 'alternate', iterations:'Infinity'})</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_findClassList"><span class="type-signature"></span>jdm_findClassList<span class="signature">(classList, some<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
Permette di cercare una stringa o un array di stringhe all'interno della classe dell'elemento.
Normalmente ritorna true se tutti gli elementi di classList sono presenti nella classe dell'elemento
Se "some" è impostato a true cerca se sono presenti alcune classi
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line523">line 523</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>classList</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Array.<string></code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Una singola classe CSS o un array di classi CSS da cercare.
</td>
</tr>
<tr>
<td class="name"><code>some</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last">
Parametro che permette di scegliere se la ricerca è in AND o OR
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>boolean</code></span>
</dd>
</dl>
<div class="param-desc">
- ritorna true o false in base alla ricerca AND o OR
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div class="bar foo test" >lorem ipsum</div>', document.body)
.jdm_findClassList(["bar", "foo"]) // ritorna true perchè tutte le classi sono presenti
const div = JDM('<div class="bar foo test" >lorem ipsum</div>', document.body)
.jdm_findClassList(["bar", "var"], true) // ritorna true perchè bar è presente nelle classi</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_genEvent"><span class="type-signature"></span>jdm_genEvent<span class="signature">(name, data<span class="signature-attributes">opt</span>, propagateToParents<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Genera un evento personalizzato per l'elemento DOM associato, utilizzando il metodo di generazione evento definito nella libreria `_common`.
L'evento può essere propagato ai genitori, se necessario.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1026">line 1026</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Il nome dell'evento da generare. Può essere qualsiasi stringa che rappresenta un tipo di evento personalizzato.
</td>
</tr>
<tr>
<td class="name"><code>data</code></td>
<td class="type">
<span class="param-type"><code>Object</code></span>
|
<span class="param-type"><code>null</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">
I dati da associare all'evento. Questi dati vengono passati come parte dell'oggetto evento. Può essere `null` se non sono necessari dati aggiuntivi.
</td>
</tr>
<tr>
<td class="name"><code>propagateToParents</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
Un valore booleano che indica se l'evento deve essere propagato ai genitori dell'elemento. Il valore predefinito è `true`.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento su cui è stato generato l'evento, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const element = JDM('<input>', document.body)
.jdm_addEventListener('customEvent', (event)=> {
console.log(event.detail)
})
element.jdm_genEvent('customEvent', { message: 'Evento generato!' });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_getAttribute"><span class="type-signature"></span>jdm_getAttribute<span class="signature">(attribute)</span><span class="type-signature"> → {string|null}</span></h4>
<div class="description">
Recupera il valore di un attributo di un elemento DOM.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line339">line 339</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>attribute</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
Il nome dell'attributo di cui si desidera ottenere il valore.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>null</code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il valore dell'attributo se esiste, altrimenti `null` se l'attributo non è presente.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_setAttribute('data-test', 'foo');
const dataTest = div.jdm_getAttribute('data-test')</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_getValue"><span class="type-signature"></span>jdm_getValue<span class="signature">()</span><span class="type-signature"> → {any}</span></h4>
<div class="description">
Ottiene il valore di un elemento DOM. A seconda del tipo di elemento, il valore verrà restituito in modo appropriato:
- **Input** (checkbox, radio): restituisce il valore `checked` dell'elemento.
- **Form**: restituisce un oggetto JSON con i valori di tutti i campi del modulo, supportando strutture di dati complesse come array e oggetti.
- **Select**: restituisce il valore selezionato dell'elemento `<select>`.
- **Altri input** (testo, numero, range): restituisce il valore dell'elemento come una stringa.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1005">line 1005</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code>any</code></span>
</dd>
</dl>
<div class="param-desc">
- Il valore dell'elemento DOM. Se l'elemento è un modulo, restituisce un oggetto JSON con i dati del modulo.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const checkboxValue = JDM('<input type="checkbox" checked>', document.body)
.jdm_getValue();
console.log(checkboxValue); // log true
const data = {
inputNumeric: 1,
name: 'foo',
surname: 'bar'
}
const formString = `
<form>
<input name="inputNumeric" type="number" min="1" max="10"/>
<input name="name" type="text"/>
<input name="surname" type="text"/>
<button type="submit"> Submit </button>
</form>`;
const form = JDM(formString, document.body)
.jdm_setValue(data);
console.log(form.jdm_getValue());
// Restituisce un oggetto JSON con i dati del modulo, es.
// { inputNumeric: '1', name: 'foo', surname: 'bar' }
const selectString = `
<select name="foo">
<option value="foo">foo</option>
<option value="bar" selected>bar</option>
</select>`;
const select = JDM(selectString, document.body);
console.log(select.jdm_getValue()); // log 'bar'</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_innerHTML"><span class="type-signature"></span>jdm_innerHTML<span class="signature">(value)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Imposta o restituisce il contenuto HTML interno dell'elemento DOM.
Questo metodo imposta il valore di `innerHTML` dell'elemento DOM rappresentato da `this.node`.
Se il parametro `value` viene fornito, aggiorna il contenuto HTML; altrimenti, restituisce il contenuto HTML attuale.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line656">line 656</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
Il contenuto HTML da impostare all'interno dell'elemento DOM.
Se non fornito, il metodo restituirà il contenuto HTML corrente.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM con il nuovo contenuto HTML impostato, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM('<div>lorem ipsum</div>', document.body)
.jdm_innerHTML('<p>Dolor sit amet</p>');
// Imposta il contenuto HTML del div con un nuovo paragrafo.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onChange"><span class="type-signature"></span>jdm_onChange<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `change` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `change` sull'elemento.
L'evento `change` viene attivato quando il valore di un elemento, come un campo di input, viene modificato e l'elemento perde il focus.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line717">line 717</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `change`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const input = JDM('input', document.body)
.jdm_onChange(() => {
console.log('Valore cambiato:', input.jdm_getValue());
});
// Aggiunge un listener per l'evento 'change' che stampa il valore dell'input ogni volta che cambia.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onClick"><span class="type-signature"></span>jdm_onClick<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `click` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `click` sull'elemento.
L'evento `click` viene attivato quando l'utente clicca su un elemento, come un pulsante o un link.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line780">line 780</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `click`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const button = JDM('<button>CLICK</button>', document.body)
.jdm_onClick((event) => {
console.log('Button clicked');
});
// Aggiunge un listener per l'evento 'click' che stampa un messaggio ogni volta che il pulsante viene cliccato.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onDebounce"><span class="type-signature"></span>jdm_onDebounce<span class="signature">(fn<span class="signature-attributes">opt</span>, timeout<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `input` all'elemento DOM con un meccanismo di debounce.
Questo metodo permette di eseguire una funzione di callback solo dopo che l'utente ha smesso di digitare per un determinato periodo di tempo.
È utile per evitare l'esecuzione ripetitiva di funzioni (come una ricerca o un aggiornamento) mentre l'utente sta digitando, migliorando le prestazioni.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line760">line 760</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `input`.
La funzione verrà eseguita dopo che l'utente smette di digitare per un periodo di tempo specificato dal parametro `timeout`.
</td>
</tr>
<tr>
<td class="name"><code>timeout</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
300
</td>
<td class="description last">
Il tempo di attesa (in millisecondi) dopo l'ultimo evento `input` prima che la funzione di callback venga eseguita.
Il valore predefinito è 300 millisecondi.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const input = JDM('input', document.body)
.jdm_onDebounce(() => {
console.log('Input debounced:',input.jdm_getValue());
}, 500);
// Aggiunge un listener per l'evento 'input' con un debounce di 500 millisecondi,
// evitando chiamate troppo frequenti alla funzione di callback mentre l'utente sta digitando.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onDoubleClick"><span class="type-signature"></span>jdm_onDoubleClick<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `dblclick` (doppio clic) all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `dblclick` sull'elemento,
che viene attivato quando l'utente fa doppio clic su un elemento.
L'evento `dblclick` è comunemente utilizzato per azioni che richiedono un'interazione più rapida dell'utente, come l'apertura di un file o l'attivazione di una funzionalità.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line822">line 822</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `dblclick`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const element = JDM('<div>Double click</div>', document.body)
.jdm_onDoubleClick((event) => {
console.log('Elemento doppiamente cliccato');
});
// Aggiunge un listener per l'evento 'dblclick' che esegue la funzione di callback ogni volta che l'utente fa doppio clic sull'elemento.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onError"><span class="type-signature"></span>jdm_onError<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `error` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `error` sull'elemento,
che viene attivato quando si verifica un errore durante il caricamento di risorse o altre operazioni.
L'evento `error` viene comunemente utilizzato per gestire errori di caricamento, come quando un'immagine non riesce a caricarsi
o quando un file JavaScript o CSS non può essere caricato correttamente.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line893">line 893</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `error`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const imgElement = JDM('<img src="invalidUrl" alt="invalid url">', document.body)
.jdm_onError(() => {
console.log('Si è verificato un errore nel caricamento dell\'immagine');
});
// Aggiunge un listener per l'evento 'error' che esegue la funzione di callback ogni volta che si verifica un errore nel caricamento dell'immagine.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onInput"><span class="type-signature"></span>jdm_onInput<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `input` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `input` sull'elemento.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line697">line 697</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `input`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const input = JDM('input', document.body)
.jdm_onInput((event) => {
console.log('Input modificato:', input.jdm_getValue());
});
// Aggiunge un listener per l'evento 'input' che stampa il valore dell'input ogni volta che cambia.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onInvalid"><span class="type-signature"></span>jdm_onInvalid<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `invalid` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `invalid` sull'elemento,
che viene attivato quando un elemento di modulo non soddisfa i suoi vincoli di validazione.
L'evento `invalid` viene in genere generato automaticamente dal browser quando un utente invia un modulo con campi non validi.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line849">line 849</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `invalid`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const formString = `
<form>
<input name="inputNumeric" type="number" min="1" max="10" required />
<button type="submit"> Submit </button>
</form>`;
const form = JDM(formString, document.body)
form.jdm_childNode.inputNumeric
.jdm_onInvalid((e) => {
console.log('Il campo input è invalido');
})
// Aggiunge un listener per l'evento 'invalid' che esegue la funzione di callback quando l'input non è valido.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onLoad"><span class="type-signature"></span>jdm_onLoad<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `load` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `load` sull'elemento,
che viene attivato quando l'elemento o le risorse a esso associate sono completamente caricate.
L'evento `load` viene comunemente utilizzato per monitorare il caricamento di immagini, script o altri contenuti multimediali,
ma può essere attivato anche quando una pagina o un elemento è stato completamente caricato nel DOM.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line871">line 871</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `load`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const image = JDM('<img src="https://picsum.photos/200/300" alt="test">', document.body)
.jdm_onLoad(() => {
console.log('Immagine caricata con successo');
});
// Aggiunge un listener per l'evento 'load' che esegue la funzione di callback ogni volta che l'immagine è completamente caricata.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onRightClick"><span class="type-signature"></span>jdm_onRightClick<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `contextmenu` (clic destro) all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `contextmenu` sull'elemento,
che viene attivato dal clic destro del mouse (o equivalente, come il tocco prolungato su dispositivi mobili).
L'evento `contextmenu` è tipicamente usato per visualizzare il menu contestuale di un elemento.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line801">line 801</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `contextmenu`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const element = JDM('<div> RIGHT CLICK </div>', document.body).jdm_onRightClick((event) => {
event.preventDefault(); // Previene il menu contestuale predefinito
console.log('Clic destro eseguito!');
});
// Aggiunge un listener per l'evento 'contextmenu' che esegue la funzione di callback ogni volta che si fa clic destro sull'elemento.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onSelect"><span class="type-signature"></span>jdm_onSelect<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `select` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `select` sull'elemento.
L'evento `select` viene attivato quando una parte del testo all'interno di un elemento, come un campo di input o una textarea, viene selezionata dall'utente.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line737">line 737</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `select`.
La funzione riceverà l'evento come parametro.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const input = JDM('<input>', document.body)
.jdm_onSelect((event) => {
console.log('Testo selezionato:', input.jdm_getValue());
});
// Aggiunge un listener per l'evento 'select' che stampa il valore del campo di input ogni volta che viene selezionato del testo.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_onSubmit"><span class="type-signature"></span>jdm_onSubmit<span class="signature">(fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge un listener per l'evento `submit` all'elemento DOM.
Questo metodo consente di eseguire una funzione di callback ogni volta che si verifica un evento di tipo `submit` sull'elemento,
che viene attivato quando un modulo viene inviato.
L'evento `submit` viene generato quando un utente invia un modulo, sia tramite il pulsante di invio che premendo il tasto "Enter"
in un campo del modulo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line922">line 922</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback da eseguire quando si verifica l'evento `submit`.
La funzione riceverà l'evento come parametro.
Se necessario, la funzione di callback può chiamare `event.preventDefault()` per prevenire l'invio del modulo.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato aggiunto l'event listener, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const formString = `
<form>
<input name="inputNumeric" type="number" min="1" max="10" required />
<button type="submit"> Submit </button>
</form>`;
const form = JDM(formString, document.body)
.jdm_onSubmit((e)=> {
e.preventDefault();
console.log('submit');
})
// Aggiunge un listener per l'evento 'submit' che esegue la funzione di callback ogni volta che il modulo viene inviato.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_prepend"><span class="type-signature"></span>jdm_prepend<span class="signature">(elementList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Aggiunge uno o più elementi figli a un elemento DOM.
Se viene fornita una lista di elementi, tutti gli elementi vengono aggiunti come figli dell'elemento.
Se viene fornito un singolo elemento, questo viene aggiunto come unico figlio.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line383">line 383</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>elementList</code></td>
<td class="type">
<span class="param-type"><code>HTMLElement</code></span>
|
<span class="param-type"><code>Array.<HTMLElement></code></span>
</td>
<td class="description last">
Un singolo elemento DOM o un array di elementi DOM da aggiungere come figli.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui gli elementi sono stati aggiunti, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div><p>paragrafo</p></div>', document.body);
const span = JDM('<span>foo</span>');
div.jdm_prepend(span);
// Risultato
<div>
<span>foo</span>
<p>paragrafo</p>
</div></code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_removeAttribute"><span class="type-signature"></span>jdm_removeAttribute<span class="signature">(attribute)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Rimuove un attributo dall'elemento DOM e genera un evento di rimozione dell'attributo.
Questo metodo rimuove l'attributo specificato dall'elemento DOM rappresentato da `this.node`.
Inoltre, viene generato un evento personalizzato chiamato "removeAttribute" con il nome dell'attributo rimosso.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line601">line 601</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>attribute</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
Il nome dell'attributo da rimuovere dall'elemento DOM.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui l'attributo è stato rimosso, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM('<div id="foo">lorem ipsum</div>', document.body)
.jdm_removeAttribute('id'); // Rimuove l'attributo 'id' dall'elemento div.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_removeClassList"><span class="type-signature"></span>jdm_removeClassList<span class="signature">(classList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Rimuove una o più classi CSS dall'elemento DOM.
Se viene fornito un array di classi, tutte le classi vengono rimosse dall'elemento.
Se viene fornita una singola classe, questa viene rimossa.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line485">line 485</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>classList</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Array.<string></code></span>
</td>
<td class="description last">
Una singola classe CSS o un array di classi CSS da rimuovere dall'elemento DOM.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui le classi sono state rimosse, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM('<div class="foo bar myClass"></div>', document.body)
.jdm_removeClassList('myClass'); // Rimuove la classe "myClass" dall'elemento.
JDM('<div class="foo bar myClass"></div>', document.body)
.jdm_removeClassList(['foo', 'bar']); // Rimuove "foo" e "bar" dall'elemento.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_removeEventListener"><span class="type-signature"></span>jdm_removeEventListener<span class="signature">(name, fn<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Rimuove un listener per un evento specificato sull'elemento DOM associato.
Questo metodo permette di interrompere l'esecuzione della funzione di callback
quando l'evento si verifica.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1073">line 1073</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Il nome dell'evento per cui rimuovere il listener (es. "click", "input", ecc.).
</td>
</tr>
<tr>
<td class="name"><code>fn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
() => {}
</td>
<td class="description last">
La funzione di callback che era stata precedentemente aggiunta come listener. Il valore predefinito è una funzione vuota.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento da cui è stato rimosso l'evento, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>// Rimuovi un listener per l'evento 'click' su un elemento
const element = JDM('<div>lorem ipsum</div>', document.body);
const clickHandler = () => { console.log('Elemento cliccato!'); };
element.jdm_addEventListener('click', clickHandler);
// Dopo un certo punto, rimuoviamo il listener
element.jdm_removeEventListener('click', clickHandler);
// Rimuovi un listener per l'evento 'input' su un elemento con funzione di callback predefinita
element.jdm_removeEventListener('input');</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_rotation"><span class="type-signature"></span>jdm_rotation<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, deg<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di rotazione all'elemento.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1335">line 1335</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>deg</code></td>
<td class="type">
<span class="param-type"><code>number</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
360
</td>
<td class="description last">
Gradi di rotazione da applicare (positivi in senso orario, negativi in senso antiorario).
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i metodi, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> Rotate </div>`, document.body)
.jdm_rotation(() => console.log('Rotazione completata'), 180, { duration: 1000 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_setAttribute"><span class="type-signature"></span>jdm_setAttribute<span class="signature">(attribute, value<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Imposta un attributo su un elemento DOM e genera un evento personalizzato per il cambiamento.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line323">line 323</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>attribute</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Il nome dell'attributo da impostare sull'elemento DOM.
</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>null</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
null
</td>
<td class="description last">
Il valore dell'attributo. Se non fornito, l'attributo sarà impostato su `null`.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui l'attributo è stato impostato, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_setAttribute('id', 'myDiv')
.jdm_setAttribute('data-test', 'foo')
.jdm_setAttribute('counter', 1);</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_setStyle"><span class="type-signature"></span>jdm_setStyle<span class="signature">(style, value)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Imposta un valore per una proprietà di stile CSS su un elemento DOM.
Questo metodo applica una dichiarazione di stile CSS all'elemento DOM rappresentato da `this.node`.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line618">line 618</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>style</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
Il nome della proprietà di stile CSS da impostare (ad esempio, "color", "backgroundColor").
</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
</td>
<td class="description last">
Il valore da assegnare alla proprietà di stile CSS (ad esempio, "red", "10px").
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato applicato lo stile, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_setStyle('color', 'red'); // Imposta il colore del testo dell'elemento div su rosso.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_setValue"><span class="type-signature"></span>jdm_setValue<span class="signature">(value, tooBoolean<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Imposta il valore di un elemento DOM. Se l'elemento è una checkbox, un radio button o un modulo,
il valore verrà impostato di conseguenza. Se l'elemento è un modulo (`<form>`), verranno impostati
i valori di tutti i campi del modulo, compresi i checkbox e i radio buttons.
Inoltre, è possibile forzare il valore a essere trattato come booleano tramite il parametro `tooBoolean`.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line960">line 960</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type"><code>any</code></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">
Il valore da impostare sull'elemento DOM. Il tipo di valore dipende dall'elemento e dal contesto.
</td>
</tr>
<tr>
<td class="name"><code>tooBoolean</code></td>
<td class="type">
<span class="param-type"><code>boolean</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last">
Se impostato su `true`, tenterà di convertire il valore in booleano.
Se il valore non è convertibile in booleano, verrà mantenuto il valore originale.
Se impostato su `false`, il valore non verrà modificato.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui è stato impostato il valore, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const checkboxElement = JDM('<input type="checkbox">', document.body)
.jdm_setValue(true);
// Imposta il valore di una checkbox su 'true', facendo in modo che sia selezionata.
const data = {
inputNumeric: 1,
name: 'foo',
surname : 'bar'
}
const formString = `
<form>
<input name="inputNumeric" type="number" min="1" max="10"/>
<input name="name" type="text"/>
<input name="surname" type="text"/>
<button type="submit"> Submit </button>
</form>`;
const form = JDM(formString, document.body)
.jdm_setValue(data);
// Imposta i valori del modulo, inclusi i checkbox e altri input.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_tada"><span class="type-signature"></span>jdm_tada<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione tipo tada al nodo (come in animate.css).
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1292">line 1292</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> Tada </div>`, document.body)
.jdm_tada(() => console.log('Tada completato!'), { duration: 1000 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_toggleClassList"><span class="type-signature"></span>jdm_toggleClassList<span class="signature">(classList)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Attiva o disattiva una o più classi CSS su un elemento DOM.
Se viene fornito un array di classi, ciascuna classe verrà alternata (aggiunta se non presente, rimossa se presente).
Se viene fornita una singola classe, questa verrà alternata.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line504">line 504</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>classList</code></td>
<td class="type">
<span class="param-type"><code>string</code></span>
|
<span class="param-type"><code>Array.<string></code></span>
</td>
<td class="description last">
Una singola classe CSS o un array di classi CSS da alternare sull'elemento DOM.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce l'elemento DOM su cui le classi sono state alternate, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>const div = JDM('<div>lorem ipsum</div>', document.body)
.jdm_toggleClassList('active'); // Alterna la classe "active" sull'elemento div.
const div2 = JDM('<div>lorem ipsum</div>', document.body)
.jdm_toggleClassList(['class1', 'class2']); // Alterna le classi "class1" e "class2" sull'elemento div2.</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_validate"><span class="type-signature"></span>jdm_validate<span class="signature">()</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Verifica la validità dell'elemento `input` o `form` secondo le regole di validazione HTML.
Dopo la verifica, viene generato un evento personalizzato chiamato "validate", che segnala il risultato della validazione.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line583">line 583</a>
</li></ul></dd>
</dl>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
L'elemento DOM su cui è stata effettuata la validazione, consentendo il chaining dei metodi.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM('input', document.body)
.jdm_setAttribute('required', 'true')
.jdm_validate(); // Verifica la validità dell'input e genera l'evento "validate".</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_zoomIn"><span class="type-signature"></span>jdm_zoomIn<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di zoom-in e fade-in al nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1306">line 1306</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> ZoomIn </div>`, document.body)
.jdm_zoomIn(() => console.log('ZoomIn completato!'), { duration: 1000 });</code></pre>
</div>
</div>
<div class="section-method">
<h4 class="name" id="jdm_zoomOut"><span class="type-signature"></span>jdm_zoomOut<span class="signature">(callbackFn<span class="signature-attributes">opt</span>, option<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {<a href="Jdm.html">Jdm</a>}</span></h4>
<div class="description">
Applica un'animazione di zoom-out e fade-out al nodo.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="jdm.js.html">jdm.js</a>, <a href="jdm.js.html#line1320">line 1320</a>
</li></ul></dd>
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callbackFn</code></td>
<td class="type">
<span class="param-type"><code>function</code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">
Funzione da eseguire al termine dell'animazione.
</td>
</tr>
<tr>
<td class="name"><code>option</code></td>
<td class="type">
<span class="param-type"><code>Partial.<<a href="AnimationOption.html">AnimationOption</a>></code></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
new AnimationOption()
</td>
<td class="description last">
Opzioni dell'animazione.
</td>
</tr>
</tbody>
</table>
<div class="section-returns">
<h5>Returns:</h5>
<dl class="param-type">
<dt>
Type:
</dt>
<dd>
<span class="param-type"><code><a href="Jdm.html">Jdm</a></code></span>
</dd>
</dl>
<div class="param-desc">
- Restituisce il nodo dell'elemento a cui sono stati estesi i figli, per consentire il chaining.
</div>
</div>
<div class="section-examples">
<h5>Example</h5>
<pre class="prettyprint"><code>JDM(`<div class="foo"> ZoomOut </div>`, document.body)
.jdm_zoomOut(() => console.log('ZoomOut!'), { duration: 1000 });</code></pre>
</div>
</div>
</article>
</section>
</div>
<br class="clear">
<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.4</a> on Wed Jul 16 2025 22:22:23 GMT+0200 (Central European Summer Time) using the Minami theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>