Showing preview only (369K chars total). Download the full file or copy to clipboard to get everything.
Repository: camsong/You-Dont-Need-jQuery
Branch: master
Commit: ed83f656ce18
Files: 27
Total size: 356.7 KB
Directory structure:
gitextract_dzv602xd/
├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README-es.md
├── README-fr.md
├── README-id.md
├── README-it.md
├── README-ja.md
├── README-kg.md
├── README-my.md
├── README-pl.md
├── README-ru.md
├── README-tr.md
├── README-vi.md
├── README.ko-KR.md
├── README.md
├── README.pt-BR.md
├── README.zh-CN.md
├── README.zh-TW.md
├── karma.conf.js
├── package.json
└── test/
├── README.md
├── css.spec.js
├── dom.spec.js
├── query.spec.js
└── utilities.spec.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
presets: ["es2015", "stage-0"]
}
================================================
FILE: .eslintrc
================================================
{
"extends": "eslint-config-airbnb",
"env": {
"browser": true,
"mocha": true,
"node": true
},
"rules": {
"valid-jsdoc": 2,
"no-param-reassign": 0,
"comma-dangle": 0,
"one-var": 0,
"no-else-return": 1,
"no-unused-expressions": 0,
"indent": 1,
"eol-last": 0
}
}
================================================
FILE: .gitignore
================================================
.DS_Store
*.log
node_modules
coverage
logs
.idea
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015 oneuijs
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README-es.md
================================================
## Tú no necesitas jQuery
El desarrollo Frontend evoluciona día a día, y los navegadores modernos ya han implementado nativamente APIs para trabajar con DOM/BOM, las cuales son muy buenas, por lo que definitivamente no es necesario aprender jQuery desde cero para manipular el DOM. En la actualidad, gracias al surgimiento de librerías frontend como React, Angular y Vue, manipular el DOM es contrario a los patrones establecidos, y jQuery se ha vuelto menos importante. Este proyecto resume la mayoría de métodos alternativos a jQuery, pero de forma nativa con soporte IE 10+.
## Tabla de Contenidos
1. [Traducción](#traducción)
1. [Query Selector](#query-selector)
1. [CSS & Estilo](#css--estilo)
1. [Manipulación DOM](#manipulación-dom)
1. [Ajax](#ajax)
1. [Eventos](#eventos)
1. [Utilidades](#utilidades)
1. [Promesas](#promesas)
1. [Animaciones](#animaciones)
1. [Alternativas](#alternativas)
1. [Navegadores soportados](#navegadores-soportados)
## Traducción
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Query Selector
En lugar de los selectores comunes como clase, id o atributos podemos usar `document.querySelector` o `document.querySelectorAll` como alternativas. Las diferencias radican en:
* `document.querySelector` devuelve el primer elemento que cumpla con la condición
* `document.querySelectorAll` devuelve todos los elementos que cumplen con la condición en forma de NodeList. Puede ser convertido a Array usando `[].slice.call(document.querySelectorAll(selector) || []);`
* Si ningún elemento cumple con la condición, jQuery retornaría `[]` mientras la API DOM retornaría `null`. Nótese el NullPointerException. Se puede usar `||` para establecer el valor por defecto al no encontrar elementos, como en `document.querySelectorAll(selector) || []`
> Nota: document.querySelector y document.querySelectorAll son bastante LENTOS, procuree utilizar getElementById, document.getElementsByClassName o document.getElementsByTagName si desea obtener un mejor rendimiento.
- [1.0](#1.0) <a name='1.0'></a> Buscar por selector
```js
// jQuery
$('selector');
// Nativo
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Buscar por Clase
```js
// jQuery
$('.class');
// Nativo
document.querySelectorAll('.class');
// Forma alternativa
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> Buscar por id
```js
// jQuery
$('#id');
// Nativo
document.querySelector('#id');
// Forma alternativa
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Buscar por atributo
```js
// jQuery
$('a[target=_blank]');
// Nativo
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Buscar en descendientes
```js
// jQuery
$el.find('li');
// Nativo
el.querySelectorAll('li');
```
- [1.5](#1.5) <a name='1.5'></a> Elementos Hermanos/Previos/Siguientes
+ Elementos hermanos
```js
// jQuery
$el.siblings();
// Nativo
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
```
+ Elementos previos
```js
// jQuery
$el.prev();
// Nativo
el.previousElementSibling;
```
+ Elementos siguientes
```js
// jQuery
$el.next();
// Nativo
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Más cercano
Retorna el elemento más cercano que coincida con la condición, partiendo desde el nodo actual hasta document.
```js
// jQuery
$el.closest(selector);
// Nativo - Sólo el último, NO IE
el.closest(selector);
// Nativo - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Padres hasta
Obtiene los ancestros de cada elemento en el set actual de elementos que cumplan con la condición, sin incluir el actual
```js
// jQuery
$el.parentsUntil(selector, filter);
// Nativo
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// Partir desde el elemento padre
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Formularios
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Nativo
document.querySelector('#my-input').value;
```
+ Obtener el índice de e.currentTarget en `.radio`
```js
// jQuery
$('.radio').index(e.currentTarget);
// Nativo
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Contenidos de Iframe
`$('iframe').contents()` devuelve `contentDocument` para este iframe específico
+ Contenidos de Iframe
```js
// jQuery
$iframe.contents();
// Nativo
iframe.contentDocument;
```
+ Buscar dentro de un Iframe
```js
// jQuery
$iframe.contents().find('.css');
// Nativo
iframe.contentDocument.querySelectorAll('.css');
```
- [1.10](#1.10) <a name='1.10'></a> Obtener body
```js
// jQuery
$('body');
// Nativo
document.body;
```
- [1.11](#1.11) <a name='1.11'></a> Obtener y establecer atributos
+ Obtener un atributo
```js
// jQuery
$el.attr('foo');
// Nativo
el.getAttribute('foo');
```
+ Establecer un atributo
```js
// jQuery, note que esto funciona en memoria sin cambiar el DOM
$el.attr('foo', 'bar');
// Nativo
el.setAttribute('foo', 'bar');
```
+ Obtener un atributo `data-`
```js
// jQuery
$el.data('foo');
// Nativo
el.getAttribute('data-foo');
// Nativo (Utilice `dataset` solamente si necesita dar soporte a IE 11+)
el.dataset['foo'];
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## CSS & Estilo
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Obtener Estilo
```js
// jQuery
$el.css("color");
// Nativo
// NOTA: Bug conocido, retornará 'auto' si el valor de estilo es 'auto'
const win = el.ownerDocument.defaultView;
// null significa que no retorne pseudo estilos
win.getComputedStyle(el, null).color;
```
+ Establecer estilo
```js
// jQuery
$el.css({ color: "#ff0011" });
// Nativo
el.style.color = '#ff0011';
```
+ Obtener/Establecer Estilos
Nótese que si se desea establecer múltiples estilos a la vez, se puede utilizar el método [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) en el paquete oui-dom-utils.
+ Agregar clase
```js
// jQuery
$el.addClass(className);
// Nativo
el.classList.add(className);
```
+ Quitar Clase
```js
// jQuery
$el.removeClass(className);
// Nativo
el.classList.remove(className);
```
+ Consultar si tiene clase
```js
// jQuery
$el.hasClass(className);
// Nativo
el.classList.contains(className);
```
+ Toggle class
```js
// jQuery
$el.toggleClass(className);
// Nativo
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Width & Height
Ancho y Alto son teóricamente idénticos. Usaremos el Alto como ejemplo:
+ Alto de Ventana
```js
// alto de ventana
$(window).height();
// Con scrollbar, se comporta como jQuery
window.document.documentElement.clientHeight;
// Sin scrollbar
window.innerHeight;
```
+ Alto de Documento
```js
// jQuery
$(document).height();
// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);
```
+ Alto de Elemento
```js
// jQuery
$el.height();
// Nativo
function getHeight(el) {
const styles = window.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// Precisión de entero（para `border-box`, es `height - border`; con content-box`, es `height + padding`）
el.clientHeight;
// Precisión de decimal（para `border-box`, es `height`; con `content-box`, es `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Posición y Offset
+ Posición
Obtiene las coordenadas actuales del elemento, en relación con el padre.
```js
// jQuery
$el.position();
// Nativo
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
Obtiene las coordenadas actuales del elemento, en relación con el documento.
```js
// jQuery
$el.offset();
// Nativo
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> Posición vertical del scroll
Obtiene la posición vertical actual de la barra de scroll para el elemento.
```js
// jQuery
$(window).scrollTop();
// Nativo
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Manipulación DOM
- [3.1](#3.1) <a name='3.1'></a> Eliminar
Elimina el elemento del DOM
```js
// jQuery
$el.remove();
// Nativo
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Texto
+ Obtener Texto
Obtiene los contenidos de texto combinado del elemento, incluyendo sus decendientes.
```js
// jQuery
$el.text();
// Nativo
el.textContent;
```
+ Establecer Texto
Establece el contenido del elemento al texto especificado
```js
// jQuery
$el.text(string);
// Nativo
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Obtener HTML
```js
// jQuery
$el.html();
// Nativo
el.innerHTML;
```
+ Establecer HTML
```js
// jQuery
$el.html(htmlString);
// Nativo
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Añadir al final
Añadir elemento hijo después del último hijo del elemento padre
```js
// jQuery
$el.append('<div id="container">Hello World</div>');
// Nativo (string de HTML)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
// Nativo (Elemento)
el.appendChild(newEl);
```
- [3.5](#3.5) <a name='3.5'></a> Añadir al inicio
```js
// jQuery
$el.prepend('<div id="container">Hello World</div>');
// Nativo (String HTML)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
// Nativo (Elemento)
el.insertBefore(newEl, el.firstChild);
```
- [3.6](#3.6) <a name='3.6'></a> Insertar Antes
Insertar un nuevo nodo antes de los elementos seleccionados
```js
// jQuery
$newEl.insertBefore(selector);
// Nativo (String HTML)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
// Native (Elemento)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}
```
- [3.7](#3.7) <a name='3.7'></a> Insertar después
Insertar un nuevo nodo después de los elementos seleccionados
```js
// jQuery
$newEl.insertAfter(selector);
// Nativo (String HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');
// Nativo (Elemento)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}
```
- [3.8](#3.8) <a name='3.8'></a> es
Retorna `true` si coincide con el selector de la búsqueda
```js
// jQuery - Nota `is` también funciona con `funciones` o `elementos` que no veremos aquí
$el.is(selector);
// Nativo
el.matches(selector);
```
- [3.9](#3.9) <a name='3.9'></a> Clonar
Crea una copia profunda del elemento
```js
// jQuery
$el.clone();
// Nativo
el.cloneNode();
// Para hacer copia profunda , establece como parametro `true`
```
- [3.10](#3.10) <a name='3.10'></a> Vaciar
Elimina todos los nodos hijo
```js
// jQuery
$el.empty();
// Nativo
el.innerHTML = '';
```
- [3.11](#3.11) <a name='3.11'></a> Envolver
Crea una estructura HTML alrededor de cada elemento
```js
// jQuery
$('.inner').wrap('<div class="wrapper"></div>');
// Nativo
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
```
- [3.12](#3.12) <a name='3.12'></a> Desenvolver
Elimina los padres de una serie de elementos seleccionados del DOM
```js
// jQuery
$('.inner').unwrap();
// Nativo
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
Array.prototype.forEach.call(el.childNodes, (child) => {
el.parentNode.insertBefore(child, el);
});
el.parentNode.removeChild(el);
});
```
- [3.13](#3.13) <a name='3.13'></a> Remplazar con
Remplaza cada elemento en una serie de elementos seleccionados con nuevo contenido.
```js
// jQuery
$('.inner').replaceWith('<div class="outer"></div>');
// Nativo
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
const outer = document.createElement('div');
outer.className = 'outer';
el.parentNode.insertBefore(outer, el);
el.parentNode.removeChild(el);
});
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Ajax
+[Fetch API](https://fetch.spec.whatwg.org/) es el nuevo estándar que reemplaza a XMLHttpRequest para efectuar peticiones AJAX. Funciona en Chrome y Firefox, como también es posible usar un polyfill en otros navegadores.
Es una buena alternativa utilizar [github/fetch](http://github.com/github/fetch) en IE9+ o [fetch-ie8](https://github.com/camsong/fetch-ie8/) en IE8+, [fetch-jsonp](https://github.com/camsong/fetch-jsonp) para efectuar peticiones JSONP.
- [4.1](#4.1) <a name='4.1'></a> Carga datos desde un servidor y coloca el HTML regresado en el elemento seleccionado.
```js
// jQuery
$(selector).load(url, completeCallback)
// Nativo
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Eventos
Para un reemplazo completo con namespace y delegación, utilizar https://github.com/oneuijs/oui-dom-events
- [5.0](#5.0) <a name='5.0'></a> Document ready by `DOMContentLoaded`
```js
// jQuery
$(document).ready(eventHandler);
// Nativo
// Verifica que DOMContentLoaded ya se ha completado
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
```
- [5.1](#5.1) <a name='5.1'></a> Asignar un evento con "on"
```js
// jQuery
$el.on(eventName, eventHandler);
// Nativo
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Desasignar un evento con "off"
```js
// jQuery
$el.off(eventName, eventHandler);
// Nativo
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Nativo
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Utilidades
La mayoría de las utilidades se encuentran en la API nativa. Otras funciones avanzadas podrían por utilidades de librerías que se centran en la consistencia y rendimiento. Se recomienda [lodash](https://lodash.com) como replazo.
- [6.1](#6.1) <a name='6.1'></a> Utilidades Básicas
+ isArray
Determina si el lemento es un vector(array).
```js
// jQuery
$.isArray(array);
// Nativo
Array.isArray(array);
```
+ isWindow
Determina si el argumento en una ventana(window).
```js
// jQuery
$.isWindow(obj);
// Nativo
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window;
}
```
+ inArray
Busca un valor específico en el array y retorna su índice (o -1 si no lo encuentra).
```js
// jQuery
$.inArray(item, array);
// Nativo
array.indexOf(item) > -1;
// ES6
array.includes(item);
```
+ isNumeric
Determina si el argumento es un número.
Utiliza `typeof` para decidir el tipo del `type` ejemplo para mayor precisión.
```js
// jQuery
$.isNumeric(item);
// Nativo
function isNumeric(value) {
var type = typeof value;
return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));
}
```
+ isFunction
Determina si el argumento es objecto función de Javascript.
```js
// jQuery
$.isFunction(item);
// Nativo
function isFunction(item) {
if (typeof item === 'function') {
return true;
}
var type = Object.prototype.toString(item);
return type === '[object Function]' || type === '[object GeneratorFunction]';
}
```
+ isEmptyObject
Verifica que un objeto esté vacío(contiene propiedades no enumerables).
```js
// jQuery
$.isEmptyObject(obj);
// Nativo
function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}
```
+ isPlainObject
Verifica si un objeto es un objeto plano (creado utilizando “{}” o “new Object”).
```js
// jQuery
$.isPlainObject(obj);
// Nativo
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false;
}
if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}
return true;
}
```
+ extend
Combina los contenidos de dos o mas objetos en el primer objeto.
object.assign es una API de ES6, puedes utilizar [polyfill](https://github.com/ljharb/object.assign) también.
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Nativo
Object.assign({}, defaultOpts, opts);
```
+ trim
Elimina los espacios en blanco del inicio y final de un string.
```js
// jQuery
$.trim(string);
// Nativo
string.trim();
```
+ map
Traslada todos los elementos en un arreglo u objeto a un nuevo arreglo de elementos.
```js
// jQuery
$.map(array, (value, index) => {
});
// Nativo
array.map((value, index) => {
});
```
+ each
Una función genérica de iteración, que puede ser utilizada de manera similar para iterar en objetos o arreglos.
```js
// jQuery
$.each(array, (index, value) => {
});
// Nativo
array.forEach((value, index) => {
});
```
+ grep
Encuentra los elementos de un arreglo que satisfacen una función filtro.
```js
// jQuery
$.grep(array, (value, index) => {
});
// Nativo
array.filter((value, index) => {
});
```
+ type
Determina la clase [Class] interna de Javascript de un objeto.
```js
// jQuery
$.type(obj);
// Nativo
function type(item) {
const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase();
}
```
+ merge
Combina los contenidos de dos o mas arreglos en el primero.
```js
// jQuery
$.merge(array1, array2);
// Nativo
// Pero la función concat no elimina elementos duplicados.
function merge(...args) {
return [].concat(...args)
}
```
+ now
Retorna un número que representa la hora actual.
```js
// jQuery
$.now();
// Native
Date.now();
```
+ proxy
Toma una función y regresa una nueva que siempre tendrá un contexto particular.
```js
// jQuery
$.proxy(fn, context);
// Nativo
fn.bind(context);
```
+ makeArray
Convierte un objeto similar a un arreglo en un verdarero arreglo de Javascript.
```js
// jQuery
$.makeArray(arrayLike);
// Nativo
Array.prototype.slice.call(arrayLike);
// ES6
Array.from(arrayLike);
```
- [6.2](#6.2) <a name='6.2'></a> Contenedores
Verifica si un elemento del DOM es descendiente de otro elemento del DOM.
```js
// jQuery
$.contains(el, child);
// Nativo
el !== child && el.contains(child);
```
- [6.3](#6.3) <a name='6.3'></a> Globaleval
Ejecuta el mismo código Javascript de manera global.
```js
// jQuery
$.globaleval(code);
// Nativo
function Globaleval(code) {
const script = document.createElement('script');
script.text = code;
document.head.appendChild(script).parentNode.removeChild(script);
}
// Utilzando eval, pero el contexto de eval es el actual, el contexto de $.Globaleval es global.
eval(code);
```
- [6.4](#6.4) <a name='6.4'></a> parse
+ parseHTML
Parsea un string ien un arreglo de nodos DOM.
```js
// jQuery
$.parseHTML(htmlString);
// Nativo
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();
// Se establece la base href para el documento creado, así todos los elementos parseados con URLs
// estarán basados en ña URL del documento
const base = context.createElement('base');
base.href = document.location.href;
context.head.appendChild(base);
context.body.innerHTML = string;
return context.body.children;
}
```
+ parseJSON
Toma un string de JSON *bien formado* y retorna el valor resultante de Javascript.
```js
// jQuery
$.parseJSON(str);
// Native
JSON.parse(str);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Promesas
Una promesa, representa el resultado eventual de una operación asíncrona. jQuery tiene su propio sistema para utilizar promesas. JavaScript nativo implementa una ligera y mínima API para utilizar promesas de acuerdo con la especificación [Promises/A+](http://promises-aplus.github.io/promises-spec/).
- [7.1](#7.1) <a name='7.1'></a> done, fail, always
`done` se llama cuando una promesa se resuelve, `fail` se llama cuando una promesa es rechazada, `always` se llama cuando una promesa no ha sido resuelta o rechazada.
```js
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
// Nativo
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
```
- [7.2](#7.2) <a name='7.2'></a> when
`when` se utiliza para manipular múltiples promesas. Se resolverá cuando todas las promesas sean resueltas y se rechazará si alguna es rechazada.
```js
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});
// Nativo
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
```
- [7.3](#7.3) <a name='7.3'></a> Deferred
Deferred es una manera de crear promesas.
```js
// jQuery
function asyncFunc() {
const defer = new $.Deferred();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);
return defer.promise();
}
// Nativo
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (true) {
resolve('some_value_computed_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}
// Deferred
function defer() {
const deferred = {};
const promise = new Promise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});
deferred.promise = () => {
return promise;
};
return deferred;
}
function asyncFunc() {
const defer = defer();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);
return defer.promise();
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Animaciones
- [8.1](#8.1) <a name='8.1'></a> Mostrar y ocultar
```js
// jQuery
$el.show();
$el.hide();
// Native
// Para mas detalles acerca del método show, refierase a https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
```
- [8.2](#8.2) <a name='8.2'></a> Toggle
Muestra u oculta el elemento
```js
// jQuery
$el.toggle();
// Nativo
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
el.style.display = 'none';
}
```
- [8.3](#8.3) <a name='8.3'></a> FadeIn & FadeOut
```js
// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);
// Nativo
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';
```
- [8.4](#8.4) <a name='8.4'></a> FadeTo
Ajusta la opacidad del elemento
```js
// jQuery
$el.fadeTo('slow',0.15);
// Nativo
el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds
el.style.opacity = '0.15';
```
- [8.5](#8.5) <a name='8.5'></a> FadeToggle
Muestra u oculta el emento animando su opacidad.
```js
// jQuery
$el.fadeToggle();
// Nativo
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
}
```
- [8.6](#8.6) <a name='8.6'></a> SlideUp & SlideDown
```js
// jQuery
$el.slideUp();
$el.slideDown();
// Nativo
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
```
- [8.7](#8.7) <a name='8.7'></a> SlideToggle
Muestra u oculta el elemento con una animación de deslizamiento.
```js
// jQuery
$el.slideToggle();
// Nativo
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
}
else {
el.style.height = '0px';
}
```
- [8.8](#8.8) <a name='8.8'></a> Animate
Realiza una animación personalizada de un conjunto de propiedades CSS.
```js
// jQuery
$el.animate({ params }, speed);
// Nativo
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) => {
el.style[key] = params[key];
});
```
## Alternativas
* [Quizá no necesites jQuery](http://youmightnotneedjquery.com/) - Ejemplos de como hacer un evento común, un elemento, ajax, etc, con Javascript puro.
* [npm-dom](http://github.com/npm-dom) y [webmodules](http://github.com/webmodules) - Organizaciones en las puedes encontrar módulos individuales del DOM en NPM.
## Navegadores soportados
![Chrome][chrome-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
--- | --- | --- | --- | --- |
Última ✔ | Última ✔ | 10+ ✔ | Última ✔ | 6.1+ ✔ |
# Licencia
MIT
[chrome-image]: https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png
[firefox-image]: https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png
[ie-image]: https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png
[opera-image]: https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png
[safari-image]: https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png
================================================
FILE: README-fr.md
================================================
## Vous n'avez pas besoin de jQuery
De nos jours, les environnements frontend évoluent si rapidement que les navigateurs récents ont déjà implémenté beaucoup d'API DOM/BOM suffisantes. Il n'est pas utile d'apprendre jQuery à partir de rien pour manipuler le DOM ou les évènements. Pendant ce temps, grâce à l'efficacité de bibliothèques frontend comme React, Angular et Vue, manipuler directement le DOM est devenu obsolète, jQuery n'a jamais été aussi peu important. Ce projet résume la plupart des alternatives à jQuery à l'aide d'implémentations natives, compatibles avec IE 10+.
## Sommaire
1. [Traductions](#traductions)
1. [Sélecteur jQuery](#sélecteur-jquery)
1. [Style et CSS](#style--css)
1. [Manipulation du DOM](#manipulation-du-dom)
1. [Ajax](#ajax)
1. [Évènements](#évènements)
1. [Utilitaires](#utilitaires)
1. [Promesses](#promesses)
1. [Animation](#animation)
1. [Alternatives](#alternatives)
1. [Navigateurs compatibles](#navigateurs-compatibles)
## Traductions
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Sélecteur jQuery
À la place des sélecteurs communs comme class, id ou attribute il est possible d'utiliser `document.querySelector` ou `document.querySelectorAll`. Les différences sont que:
* `document.querySelector` retourne le premier élément trouvé,
* `document.querySelectorAll` retourne tous les éléments trouvés sous forme d'une [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList). Il est possible de le convertir en Array à l'aide de `[].slice.call(document.querySelectorAll(selector) || []);`,
* si aucun élément n'a été trouvé, jQuery peut retourner `[]` alors que l'API DOM va retourner `null`. Faites attention au Null Pointer Exception. Vous pouvez aussi utiliser `||` pour définir la valeur par défaut si rien n'a été trouvé, comme `document.querySelectorAll(selector) || []`.
> Remarque: `document.querySelector` et `document.querySelectorAll` sont assez **LENTS**, essayez plutôt d'utiliser `getElementById`, `document.getElementsByClassName` ou `document.getElementsByTagName` si vous souhaitez obtenir un gain de performance.
- [1.0](#1.0) <a name='1.0'></a> Requête par sélecteur
```js
// jQuery
$('selector');
// Natif
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Requête par classe
```js
// jQuery
$('.class');
// Natif
document.querySelectorAll('.class');
// ou
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> Requête par id
```js
// jQuery
$('#id');
// Natif
document.querySelector('#id');
// ou
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Requête par attribut
```js
// jQuery
$('a[target=_blank]');
// Natif
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Requête par descendants
```js
// jQuery
$el.find('li');
// Natif
el.querySelectorAll('li');
```
- [1.5](#1.5) <a name='1.5'></a> Éléments voisins/précédents/suivants
+ Éléments voisins
```js
// jQuery
$el.siblings();
// Natif
[].filter.call(el.parentNode.children, function(child) {
return child !== el;
});
```
+ Éléments précédents
```js
// jQuery
$el.prev();
// Natif
el.previousElementSibling;
```
+ Éléments suivants
```js
// next
$el.next();
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Plus proche
Retourne le premier élément trouvé à l'aide du sélecteur fourni, parcourant l'élément actuel vers le document.
```js
// jQuery
$el.closest(queryString);
// Natif - Seulement le dernier, ne fonctionne pas sous IE
el.closest(selector);
// Natif - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Parents jusqu'à
Retourne les ancêtres de chaque élément dans l'ensemble d'éléments trouvés courants, jusqu'à (sans l'inclure) l'élément correspondant au sélecteur, le noeud DOM ou l'objet JQuery.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Natif
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// la correspondance commence à partir du parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Formulaire
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Natif
document.querySelector('#my-input').value;
```
+ Obtenir l'index du e.currentTarget entre `.radio`
```js
// jQuery
$(e.currentTarget).index('.radio');
// Natif
[].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Contenus Iframe
`$('iframe').contents()` retourne `contentDocument` pour cet iframe en particulier
+ Contenus de l'Iframe
```js
// jQuery
$iframe.contents();
// Natif
iframe.contentDocument;
```
+ Requête Iframe
```js
// jQuery
$iframe.contents().find('.css');
// Natif
iframe.contentDocument.querySelectorAll('.css');
```
**[⬆ remonter](#table-of-contents)**
## Style & CSS
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Obtenir le style
```js
// jQuery
$el.css("color");
// Natif
// NOTE: Bug connu, retournera 'auto" si la valeur du site est 'auto'
const win = el.ownerDocument.defaultView;
// null signifie ne pas retourner les pseudo styles
win.getComputedStyle(el, null).color;
```
+ Définir le style
```js
// jQuery
$el.css({ color: "#ff0011" });
// Natif
el.style.color = '#ff0011';
```
+ Obtenir/Définir les styles
Notez que si vous souhaitez définir plusieurs styles à la fois, you devriez vous référer à la méthode [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) du paquet oui-dom-utils.
+ Ajouter une classe
```js
// jQuery
$el.addClass(className);
// Natif
el.classList.add(className);
```
+ Supprimer une classe
```js
// jQuery
$el.removeClass(className);
// Natif
el.classList.remove(className);
```
+ Possède une classe
```js
// jQuery
$el.hasClass(className);
// Natif
el.classList.contains(className);
```
+ Basculer une class
```js
// jQuery
$el.toggleClass(className);
// Natif
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Largeur et Hauteur
Travailler avec la hauteur ou la largeur est en théorie identique, prenons la hauteur pour exemple:
+ Hauteur de la fenêtre
```js
// hauteur de la fenêtre
$(window).height();
// se comporte comme jQuery sans ascenseur
window.document.documentElement.clientHeight;
// avec ascenseur
window.innerHeight;
```
+ Hauteur du document
```js
// jQuery
$(document).height();
// Natif
document.documentElement.scrollHeight;
```
+ Hauteur de l'élement
```js
// jQuery
$el.height();
// NatiF
function getHeight(el) {
const styles = window.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// précis à l'entier près (quand `border-box`, son `height - border`; quand `content-box`, son `height + padding`)
el.clientHeight;
// précis à la décimale près (quand `border-box`, son `height`; quand `content-box`, son `height + padding + border`)
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Position et offset
+ Position
Récupère les coordonnées courantes de l'élement relatif à l'offset parent.
```js
// jQuery
$el.position();
// Natif
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
Récupère les coordonnées courantes de l'élement relatif au document.
```js
// jQuery
$el.offset();
// Natif
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> Défiler vers le haut
Récupère la position verticale courante de l'ascenseur pour cet élément.
```js
// jQuery
$(window).scrollTop();
// Natif
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ remonter](#table-of-contents)**
## Manipulation du DOM
- [3.1](#3.1) <a name='3.1'></a> Supprimer
Supprime l'élément du DOM.
```js
// jQuery
$el.remove();
// Natif
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Texte
+ Obtenir le texte
Récupère le contenu textuel combiné de l'élément en incluant ses descendants.
```js
// jQuery
$el.text();
// Natif
el.textContent;
```
+ Définir le text
Définit le contenu de l'élément à partir du texte spécifié.
```js
// jQuery
$el.text(string);
// Natif
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Obtenir l'HTML
```js
// jQuery
$el.html();
// Natif
el.innerHTML;
```
+ Définir l'HTML
```js
// jQuery
$el.html(htmlString);
// Natif
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Ajouter
Ajouter un élément enfant après le dernier enfant de l'élément parent.
```js
// jQuery
$el.append("<div id='container'>hello</div>");
// Natif
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);
```
- [3.5](#3.5) <a name='3.5'></a> Faire précéder
```js
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Natif
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild);
```
- [3.6](#3.6) <a name='3.6'></a> Insérer avant
Insérer un nouveau noeud avant les éléments sélectionnés.
```js
// jQuery
$newEl.insertBefore(queryString);
// Natif
newEl.insertBefore(document.querySelector(queryString));
```
- [3.7](#3.7) <a name='3.7'></a> Insérer après
Insérer un nouveau noeud après les noeuds sélectionnés
```js
// jQuery
$newEl.insertAfter(queryString);
// Natif
function insertAfter(newEl, queryString) {
const parent = document.querySelector(queryString).parentNode;
if (parent.lastChild === newEl) {
parent.appendChild(newEl);
} else {
parent.insertBefore(newEl, parent.nextSibling);
}
},
```
- [3.8](#3.8) <a name='3.8'></a> est
Retourne `true` le paramètre correspond à la requête de sélection
```js
// jQuert - Noter que `is` fonctionne également avec `function` ou `elements` qui ne sont pas concernés ici
$el.is(selector);
// Natif
el.matches(selector);
```
- [3.9](#3.9) <a name='3.9'></a> clone
Créé une copie profonde de cet élément
```js
// jQuery
$el.clone();
// Natif
el.cloneNode();
// Pour une copie profonde, définir le paramètre à `true`
```
- [3.10](#3.10) <a name='3.10'></a> vider
Supprime tous les noeuds enfants
```js
// jQuery
$el.empty();
// Natif
el.innerHTML = '';
```
- [3.11](#3.11) <a name='3.11'></a> enrouler
Enrouler une structure HTML autour de chaque élément
```js
// jQuery
$('.inner').wrap('<div class="wrapper"></div>');
// Natif
[].slice.call(document.querySelectorAll('.inner')).forEach(function(el){
var wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
```
- [3.12](#3.12) <a name='3.12'></a> dérouler
Supprime les parents de la collection des éléments correspondants du DOM
```js
// jQuery
$('.inner').unwrap();
// Natif
[].slice.call(document.querySelectorAll('.inner')).forEach(function(el){
[].slice.call(el.childNodes).forEach(function(child){
el.parentNode.insertBefore(child, el);
});
el.parentNode.removeChild(el);
});
```
**[⬆ remonter](#table-of-contents)**
## Ajax
[Fetch API](https://fetch.spec.whatwg.org/) est le nouveau standard qui a pour but de remplacer XMLHttpRequest afin de faire de l'ajax. Il fonctionne sous Chrome et Firefox, il est possible d'utiliser polyfills pour le faire fonctionner sur de vieux navigateurs.
Essayer [github/fetch](http://github.com/github/fetch) sous IE9+ ou [fetch-ie8](https://github.com/camsong/fetch-ie8/) sous IE8+, [fetch-jsonp](https://github.com/camsong/fetch-jsonp) pour construire des requêtes JSONP.
**[⬆ remonter](#table-of-contents)**
## Évènements
Pour remplacer complètement jusqu'aux espaces de nom et délégations, se référer à https://github.com/oneuijs/oui-dom-events
- [5.1](#5.1) <a name='5.1'></a> Attacher un événement avec `on`
```js
// jQuery
$el.on(eventName, eventHandler);
// Natif
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Détacher un événement avec `off`
```js
// jQuery
$el.off(eventName, eventHandler);
// Natif
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Natif
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ remonter](#table-of-contents)**
## Utilitaires
La plupart des utilitaires se trouvent dans l'API native. D'autres fonctions avancées peuvent être choisies afin de se concentrer sur la cohérence et la performance. Il est recommandé de remplacer par [lodash](https://lodash.com).
- [6.1](#6.1) <a name='6.1'></a> Utilitaires basiques
+ isArray
Détermine si l'argument est un tableau.
```js
// jQuery
$.isArray(range);
// Natif
Array.isArray(range);
```
+ isWindow
Détermine si l'argument est une fenêtre.
```js
// jQuery
$.isWindow(obj);
// Native
function isWindow(obj) {
return obj != null && obj === obj.window;
}
```
+ inArray
Recherche une valeur spécifique à l'intérieur d'un tableau et retourne son index (ou -1 si rien n'a été trouvé).
```js
// jQuery
$.inArray(item, array);
// Natif
Array.indexOf(item);
```
+ isNumeric
Détermine si l'argument est un nombre.
Utiliser `typeof` pour décider du type. Si nécessaire utiliser une bibliothèque, parfois `typeof` n'est pas exact.
```js
// jQuery
$.isNumeric(item);
// Natif
function isNumeric(item) {
return typeof item === 'number';
}
```
+ isFunction
Détermine si l'argument est un objet fonction JavaScript.
```js
// jQuery
$.isFunction(item);
// Natif
function isFunction(item) {
return typeof value === 'function';
}
```
+ isEmptyObject
Vérifie si un objet est vide (ne contient aucune propriétés énumérables).
```js
// jQuery
$.isEmptyObject(obj);
// Natif
function isEmptyObject(obj) {
for (let key in obj) {
return false;
}
return true;
}
```
+ isPlainObject
Vérifie si un objet est un objet "plat" (créé en utilisant "{}" ou "new Object").
```js
// jQuery
$.isPlainObject(obj);
// Natif
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj != null && obj === obj.window) {
return false;
}
if (obj.constructor &&
!{}.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}
return true;
}
```
+ extend
Fusionne le contenu de deux objets ou plus ensembles en un seul objet.
Object.assign fait parti de l'API ES6, il est également possible d'utiliser [polyfill](https://github.com/ljharb/object.assign).
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Natif
Object.assign({}, defaultOpts, opts);
```
+ trim
Supprime les espaces au début et à la fin d'une chaine de caractères String.
```js
// jQuery
$.trim(string);
// Natif
string.trim();
```
+ map
Traduit tous les éléments d'un tableau ou d'un objet vers un nouveau tableau d'éléments.
```js
// jQuery
$.map(array, function(value, index) {
});
// Natif
array.map(function(value, index) {
});
```
+ each
Une fonction générique d'itération, qui peut être utilisée pour itérer de façon transparente à travers des objets et des tableaux.
```js
// jQuery
$.each(array, function(value, index) {
});
// Natif
array.forEach(function(value, index) {
});
```
+ grep
Trouve les éléments d'un tableau qui satisfont avec une fonction filtre.
```js
// jQuery
$.grep(array, function(value, index) {
});
// Natif
array.filter(function(value, index) {
});
```
+ type
Détermine la [[Class]] interne JavaScript d'un objet.
```js
// jQuery
$.type(obj);
// Natif
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
```
+ merge
Fusionne le contenu de deux tableau dans un seul tableau.
```js
// jQuery
$.merge(array1, array2);
// Natif
// But concat function don't remove duplicate items.
function merge() {
return Array.prototype.concat.apply([], arguments)
}
```
+ now
Retourne un nombre représentant l'heure actuelle.
```js
// jQuery
$.now();
// Natif
Date.now();
```
+ proxy
Prend une fonction et en retourne une nouvelle qui aura toujours un contexte particulier.
```js
// jQuery
$.proxy(fn, context);
// Natif
fn.bind(context);
```
+ makeArray
Convertit un objet "array-like" vers un véritable tableau JavaScript.
```js
// jQuery
$.makeArray(array);
// Natif
[].slice.call(array);
```
- [6.2](#6.2) <a name='6.2'></a> Contient
Vérifie si un élément du DOM est un descendant d'un autre élément du DOM.
```js
// jQuery
$.contains(el, child);
// Natif
el !== child && el.contains(child);
```
- [6.3](#6.3) <a name='6.3'></a> Globaleval
Exécute du code JavaScript de manière globale.
```js
// jQuery
$.globaleval(code);
// Natif
function Globaleval(code) {
let script = document.createElement('script');
script.text = code;
document.head.appendChild(script).parentNode.removeChild(script);
}
// Utilise eval, mais le contexte d'eval est l'actuel alors que le contexte de $.Globaleval est global.
eval(code);
```
- [6.4](#6.4) <a name='6.4'></a> parse
+ parseHTML
Parse une chaine de caractères vers un tableau de noeuds DOM.
```js
// jQuery
$.parseHTML(htmlString);
// Natif
function parseHTML(string) {
const tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = string;
return tmp.body.children;
}
```
+ parseJSON
Prend une chaine JSON correctement formatée et retourne la valeur JavaScript résultante.
```js
// jQuery
$.parseJSON(str);
// Natif
JSON.parse(str);
```
**[⬆ remonter](#table-of-contents)**
## Promesses
Une promesse représente le résultat éventuel d'une opération asynchrone. jQuery a sa propre manière de traiter les promesses. JavaScript natif implémente une API minimale et légère afin de traiter les promesses en accord avec les spécifications [Promises/A+](http://promises-aplus.github.io/promises-spec/).
- [7.1](#7.1) <a name='7.1'></a> done, fail, always
`done` est appelée quand une promesse est résolue, `fail` est appelée quand une promesse est rejetée et `always` est appelée quand une promesse n'est ni résolue ni rejetée.
```js
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
// Natif
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
```
- [7.2](#7.2) <a name='7.2'></a> when
`when` est utilisée pour traiter de multiples promesses. Elle sera résolue quand toutes les promesses le seront, and rejetée si au moins une est rejetée.
```js
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {})
// Natif
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
```
- [7.3](#7.3) <a name='7.3'></a> Deferred
Deferred est un moyen de créer une promesse.
```js
// jQuery
function asyncFunc() {
var d = new $.Deferred();
setTimeout(function() {
if(true) {
d.resolve('some_value_compute_asynchronously');
} else {
d.reject('failed');
}
}, 1000);
return d.promise();
}
// Natif
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(function() {
if (true) {
resolve('some_value_compute_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}
// Avec deferred
function defer() {
let resolve, reject;
let promise = new Promise(function() {
resolve = arguments[0];
reject = arguments[1];
});
return { resolve, reject, promise };
}
function asyncFunc() {
var d = defer();
setTimeout(function() {
if(true) {
d.resolve('some_value_compute_asynchronously');
} else {
d.reject('failed');
}
}, 1000);
return d.promise;
}
```
**[⬆ remonter](#table-of-contents)**
## Animation
- [8.1](#8.1) <a name='8.1'></a> Show & Hide
```js
// jQuery
$el.show();
$el.hide();
// Natif
//Pour plus de détails à propos de la méthode show, merci de se référer à https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
```
- [8.2](#8.2) <a name='8.2'></a> Toggle
Affiche ou cache un élément.
```js
// jQuery
$el.toggle();
// Natif
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
}
else {
el.style.display = 'none';
}
```
- [8.3](#8.3) <a name='8.3'></a> FadeIn & FadeOut
```js
// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);
// Natif
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';
```
- [8.4](#8.4) <a name='8.4'></a> FadeTo
Ajuste l'opacité d'un élément.
```js
// jQuery
$el.fadeTo('slow',0.15);
// Natif
el.style.transition = 'opacity 3s'; // assume que 'slow' vaut 3 seconds
el.style.opacity = '0.15';
```
- [8.5](#8.5) <a name='8.5'></a> FadeToggle
Affiche ou cache un élément en animant son opacité.
```js
// jQuery
$el.fadeToggle();
// Natif
el.style.transition = 'opacity 3s';
let { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
}
else {
el.style.opacity = '1';
}
```
- [8.6](#8.6) <a name='8.6'></a> SlideUp & SlideDown
```js
// jQuery
$el.slideUp();
$el.slideDown();
// Natif
let originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
```
- [8.7](#8.7) <a name='8.7'></a> SlideToggle
Affiche ou cache un élément en le faisant glisser.
```js
// jQuery
$el.slideToggle();
// Natif
let originHeight = '100px';
el.style.transition = 'height 3s';
let { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
}
else {
el.style.height = '0px';
}
```
- [8.8](#8.8) <a name='8.8'></a> Animate
Réalise une animation personnaliée à partir d'une collection de propriétés CSS.
```js
// jQuery
$el.animate({params}, speed);
// Natif
el.style.transition = 'all' + speed;
Object.keys(params).forEach(function(key) {
el.style[key] = params[key];
})
```
## Alternatives
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Des exemples sur comment faire un simple évènement, ajax etc avec du javascript pur.
* [npm-dom](http://github.com/npm-dom) et [webmodules](http://github.com/webmodules) - Modules DOM sur NPM.
## Traductions
* [한국어](./README.ko-KR.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Türkçe](./README-tr.md)
* [Italian](./README-it.md)
* [Français](./README-fr.md)
## Navigateurs compatibles
 |  |  |  | 
--- | --- | --- | --- | --- |
Plus récente ✔ | Plus récente ✔ | 10+ ✔ | Plus récente ✔ | 6.1+ ✔ |
# Licence
MIT
================================================
FILE: README-id.md
================================================
## Anda tidak memerlukan jQuery
Perkembangan environment frontend sangatlah pesat, dimana banyak browser sudah mengimplementasikan DOM/BOM APIs dengan baik. Kita tidak perlu lagi belajar jQuery dari nol untuk keperluan memanipulasi DOM atau events. Secara bersamaan; dengan berterimakasih kepada library frontend terkini seperti React, Angular dan Vue; Memanipulasi DOM secara langsung telah menjadi anti-pattern atau sesuatu yang tidak perlu dilakukan lagi. Dengan kata lain, jQuery sekarang menjadi semakin tidak diperlukan. Projek ini memberikan informasi mengenai metode alternatif dari jQuery untuk implementasi Native dengan support untuk browser IE 10+.
## Daftar Isi
1. [Terjemahan](#translation)
1. [Query Selector](#query-selector)
1. [CSS & Style](#css-style)
1. [DOM Manipulation](#dom-manipulation)
1. [Ajax](#ajax)
1. [Events](#events)
1. [Utilities](#utilities)
1. [Browser Support](#browser-yang-di-support)
## Terjemahan
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Query Selector
Untuk selector-selector umum seperti class, id atau attribute, kita dapat menggunakan `document.querySelector` atau `document.querySelectorAll` sebagai pengganti. Perbedaan diantaranya adalah:
* `document.querySelector` mengembalikan elemen pertama yang cocok
* `document.querySelectorAll` mengembalikan semua elemen yang cocok sebagai NodeList. Hasilnya bisa dikonversikan menjadi Array `[].slice.call(document.querySelectorAll(selector) || []);`
* Bila tidak ada hasil balik pada elemen yang cocok, jQuery akan mengembalikan `[]` sedangkan DOM API akan mengembalikan `null`. Mohon diperhatikan mengenai Null Pointer Exception. Anda juga bisa menggunakan operator `||` untuk set nilai awal jika hasil pencarian tidak ditemukan : `document.querySelectorAll(selector) || []`
> Perhatian: `document.querySelector` dan `document.querySelectorAll` sedikit **LAMBAT**. Silahkan menggunakan `getElementById`, `document.getElementsByClassName` atau `document.getElementsByTagName` jika anda menginginkan tambahan performa.
- [1.0](#1.0) <a name='1.0'></a> Query by selector
```js
// jQuery
$('selector');
// Native
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Query by class
```js
// jQuery
$('.class');
// Native
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> Query by id
```js
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Query menggunakan attribute
```js
// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Pencarian.
+ Mencari nodes
```js
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
```
+ Mencari body
```js
// jQuery
$('body');
// Native
document.body;
```
+ Mencari Attribute
```js
// jQuery
$el.attr('foo');
// Native
e.getAttribute('foo');
```
+ Mencari data attribute
```js
// jQuery
$el.data('foo');
// Native
// gunakan getAttribute
el.getAttribute('data-foo');
// anda juga bisa menggunakan `dataset` bila anda perlu support IE 11+
el.dataset['foo'];
```
- [1.5](#1.5) <a name='1.5'></a> Elemen-elemen Sibling/Previous/Next
+ Elemen Sibling
```js
// jQuery
$el.siblings();
// Native
[].filter.call(el.parentNode.children, function(child) {
return child !== el;
});
```
+ Elemen Previous
```js
// jQuery
$el.prev();
// Native
el.previousElementSibling;
```
+ Elemen Next
```js
// next
$el.next();
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Closest
Mengembalikan elemen sama yang digunakan dari selector pertama, dengan cara mencari elemen-sekarang sampai ke document.
```js
// jQuery
$el.closest(queryString);
// Native
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Parents Until
Digunakan untuk mendapatkan "ancestor" dari setiap elemen yang ditemukan. Namun tidak termasuk elemen-sekarang yang sudah didapat dari pencarian oleh selector, DOM node, atau object jQuery.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Form
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
```
+ Get index of e.currentTarget between `.radio`
```js
// jQuery
$(e.currentTarget).index('.radio');
// Native
[].indexOf.call(document.querySelectAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Iframe Contents
`$('iframe').contents()` mengembalikan `contentDocument`
+ Iframe contents
```js
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
```
+ Iframe Query
```js
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
```
**[⬆ back to top](#daftar-isi)**
## CSS Style
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Get style
```js
// jQuery
$el.css("color");
// Native
// PERHATIAN: ada bug disini, dimana fungsi ini akan mengembalikan nilai 'auto' bila nilai dari atribut style adalah 'auto'
const win = el.ownerDocument.defaultView;
// null artinya tidak mengembalikan pseudo styles
win.getComputedStyle(el, null).color;
```
+ Set style
```js
// jQuery
$el.css({ color: "#ff0011" });
// Native
el.style.color = '#ff0011';
```
+ Get/Set Styles
Mohon dicatat jika anda ingin mengubah style secara bersamaan, anda dapat menemukan referensi di metode [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) pada package oui-dom-utils
+ Add class
```js
// jQuery
$el.addClass(className);
// Native
el.classList.add(className);
```
+ Remove class
```js
// jQuery
$el.removeClass(className);
// Native
el.classList.remove(className);
```
+ has class
```js
// jQuery
$el.hasClass(className);
// Native
el.classList.contains(className);
```
+ Toggle class
```js
// jQuery
$el.toggleClass(className);
// Native
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Width & Height
Secara teori, width dan height identik, contohnya Height:
+ Window height
```js
// window height
$(window).height();
// without scrollbar, behaves like jQuery
window.document.documentElement.clientHeight;
// with scrollbar
window.innerHeight;
```
+ Document height
```js
// jQuery
$(document).height();
// Native
document.documentElement.scrollHeight;
```
+ Element height
```js
// jQuery
$el.height();
// Native
function getHeight(el) {
const styles = this.getComputedStyles(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// accurate to integer（when `border-box`, it's `height - border`; when `content-box`, it's `height + padding`）
el.clientHeight;
// accurate to decimal（when `border-box`, it's `height`; when `content-box`, it's `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Position & Offset
+ Position
```js
// jQuery
$el.position();
// Native
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
```js
// jQuery
$el.offset();
// Native
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> Scroll Top
```js
// jQuery
$(window).scrollTop();
// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ back to top](#daftar-isi)**
## DOM Manipulation
- [3.1](#3.1) <a name='3.1'></a> Remove
```js
// jQuery
$el.remove();
// Native
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Text
+ Get text
```js
// jQuery
$el.text();
// Native
el.textContent;
```
+ Set text
```js
// jQuery
$el.text(string);
// Native
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Get HTML
```js
// jQuery
$el.html();
// Native
el.innerHTML;
```
+ Set HTML
```js
// jQuery
$el.html(htmlString);
// Native
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Append
Menambahkan elemen-anak setelah anak terakhir dari elemen-parent
```js
// jQuery
$el.append("<div id='container'>hello</div>");
// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);
```
- [3.5](#3.5) <a name='3.5'></a> Prepend
```js
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild);
```
- [3.6](#3.6) <a name='3.6'></a> insertBefore
Memasukkan node baru sebelum elemen yang dipilih.
```js
// jQuery
$newEl.insertBefore(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);
```
- [3.7](#3.7) <a name='3.7'></a> insertAfter
Memasukkan node baru sesudah elemen yang dipilih.
```js
// jQuery
$newEl.insertAfter(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);
```
**[⬆ back to top](#daftar-isi)**
## Ajax
Gantikan dengan [fetch](https://github.com/camsong/fetch-ie8) dan [fetch-jsonp](https://github.com/camsong/fetch-jsonp)
**[⬆ back to top](#daftar-isi)**
## Events
Untuk penggantian secara menyeluruh dengan namespace dan delegation, lihat ke https://github.com/oneuijs/oui-dom-events
- [5.1](#5.1) <a name='5.1'></a> Bind event dengan menggunakan on
```js
// jQuery
$el.on(eventName, eventHandler);
// Native
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Unbind event dengan menggunakan off
```js
// jQuery
$el.off(eventName, eventHandler);
// Native
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Native
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ back to top](#daftar-isi)**
## Utilities
- [6.1](#6.1) <a name='6.1'></a> isArray
```js
// jQuery
$.isArray(range);
// Native
Array.isArray(range);
```
- [6.2](#6.2) <a name='6.2'></a> Trim
```js
// jQuery
$.trim(string);
// Native
string.trim();
```
- [6.3](#6.3) <a name='6.3'></a> Object Assign
Extend, use object.assign polyfill https://github.com/ljharb/object.assign
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Native
Object.assign({}, defaultOpts, opts);
```
- [6.4](#6.4) <a name='6.4'></a> Contains
```js
// jQuery
$.contains(el, child);
// Native
el !== child && el.contains(child);
```
**[⬆ back to top](#daftar-isi)**
## Browser yang di Support
 |  |  |  | 
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
# License
MIT
================================================
FILE: README-it.md
================================================
## Non hai bisogno di jQuery
Il mondo del Frontend si evolve rapidamente oggigiorno, i browsers moderni hanno gia' implementato un'ampia gamma di DOM/BOM API soddisfacenti. Non dobbiamo imparare jQuery dalle fondamenta per la manipolazione del DOM o di eventi. Nel frattempo, grazie al prevalicare di librerie per il frontend come React, Angular a Vue, manipolare il DOM direttamente diventa un anti-pattern, di consequenza jQuery non e' mai stato meno importante. Questo progetto sommarizza la maggior parte dei metodi e implementazioni alternative a jQuery, con il supporto di IE 10+.
## Tabella contenuti
1. [Traduzioni](#traduzioni)
1. [Query Selector](#query-selector)
1. [CSS & Style](#css--style)
1. [Manipolazione DOM](#manipolazione-dom)
1. [Ajax](#ajax)
1. [Eventi](#eventi)
1. [Utilities](#utilities)
1. [Alternative](#alternative)
1. [Supporto Browsers](#supporto-browsers)
## Traduzioni
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Query Selector
Al posto di comuni selettori come class, id o attributi possiamo usare `document.querySelector` o `document.querySelectorAll` per sostituzioni. La differenza risiede in:
* `document.querySelector` restituisce il primo elemento combiaciante
* `document.querySelectorAll` restituisce tutti gli elementi combiacianti della NodeList. Puo' essere convertito in Array usando `[].slice.call(document.querySelectorAll(selector) || []);`
* Se nessun elemento combiacia, jQuery restituitirebbe `[]` li' dove il DOM API ritornera' `null`. Prestate attenzione al Null Pointer Exception. Potete anche usare `||` per settare valori di default se non trovato, come `document.querySelectorAll(selector) || []`
> Notare: `document.querySelector` e `document.querySelectorAll` sono abbastanza **SLOW**, provate ad usare `getElementById`, `document.getElementsByClassName` o `document.getElementsByTagName` se volete avere un bonus in termini di performance.
- [1.0](#1.0) <a name='1.0'></a> Query da selettore
```js
// jQuery
$('selector');
// Nativo
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Query da classe
```js
// jQuery
$('.class');
// Nativo
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> Query da id
```js
// jQuery
$('#id');
// Nativo
document.querySelector('#id');
// o
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Query da attributo
```js
// jQuery
$('a[target=_blank]');
// Nativo
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Trovare qualcosa.
+ Trovare nodes
```js
// jQuery
$el.find('li');
// Nativo
el.querySelectorAll('li');
```
+ Trovare body
```js
// jQuery
$('body');
// Nativo
document.body;
```
+ Trovare Attributi
```js
// jQuery
$el.attr('foo');
// Nativo
e.getAttribute('foo');
```
+ Trovare attributo data
```js
// jQuery
$el.data('foo');
// Nativo
// using getAttribute
el.getAttribute('data-foo');
// potete usare `dataset` solo se supportate IE 11+
el.dataset['foo'];
```
- [1.5](#1.5) <a name='1.5'></a> Fratelli/Precedento/Successivo Elemento
+ Elementi fratelli
```js
// jQuery
$el.siblings();
// Nativo
[].filter.call(el.parentNode.children, function(child) {
return child !== el;
});
```
+ Elementi precedenti
```js
// jQuery
$el.prev();
// Nativo
el.previousElementSibling;
```
+ Elementi successivi
```js
// jQuery
$el.next();
// Nativo
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Il piu' vicino
Restituisce il primo elementi combiaciante il selettore fornito, attraversando dall'elemento corrente fino al document .
```js
// jQuery
$el.closest(queryString);
// Nativo - Solo ultimo, NO IE
el.closest(selector);
// Nativo - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Fino a parenti
Ottiene il parente di ogni elemento nel set corrente di elementi combiacianti, fino a ma non incluso, l'elemento combiaciante il selettorer, DOM node, o jQuery object.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Nativo
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// il match parte dal parente
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Form
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
```
+ Get index of e.currentTarget between `.radio`
```js
// jQuery
$(e.currentTarget).index('.radio');
// Nativo
[].indexOf.call(document.querySelectAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Iframe Contents
`$('iframe').contents()` restituisce `contentDocument` per questo specifico iframe
+ Iframe contenuti
```js
// jQuery
$iframe.contents();
// Nativo
iframe.contentDocument;
```
+ Iframe Query
```js
// jQuery
$iframe.contents().find('.css');
// Nativo
iframe.contentDocument.querySelectorAll('.css');
```
**[⬆ back to top](#table-of-contents)**
## CSS & Style
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Ottenere style
```js
// jQuery
$el.css("color");
// Nativo
// NOTA: Bug conosciuto, restituira' 'auto' se il valore di style e' 'auto'
const win = el.ownerDocument.defaultView;
// null significa che non restituira' lo psuedo style
win.getComputedStyle(el, null).color;
```
+ Settare style
```js
// jQuery
$el.css({ color: "#ff0011" });
// Nativo
el.style.color = '#ff0011';
```
+ Ottenere/Settare Styles
Nota che se volete settare styles multipli in una sola volta, potete riferire [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) metodo in oui-dom-utils package.
+ Aggiungere classe
```js
// jQuery
$el.addClass(className);
// Nativo
el.classList.add(className);
```
+ Rimouvere class
```js
// jQuery
$el.removeClass(className);
// Nativo
el.classList.remove(className);
```
+ has class
```js
// jQuery
$el.hasClass(className);
// Nativo
el.classList.contains(className);
```
+ Toggle class
```js
// jQuery
$el.toggleClass(className);
// Nativo
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Width & Height
Width e Height sono teoricamente identici, prendendo Height come esempio:
+ Window height
```js
// window height
$(window).height();
// senza scrollbar, si comporta comporta jQuery
window.document.documentElement.clientHeight;
// con scrollbar
window.innerHeight;
```
+ Document height
```js
// jQuery
$(document).height();
// Nativo
document.documentElement.scrollHeight;
```
+ Element height
```js
// jQuery
$el.height();
// Nativo
function getHeight(el) {
const styles = this.getComputedStyles(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// preciso a intero（quando `border-box`, e' `height - border`; quando `content-box`, e' `height + padding`）
el.clientHeight;
// preciso a decimale（quando `border-box`, e' `height`; quando `content-box`, e' `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Position & Offset
+ Position
```js
// jQuery
$el.position();
// Nativo
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
```js
// jQuery
$el.offset();
// Nativo
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> Scroll Top
```js
// jQuery
$(window).scrollTop();
// Nativo
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ back to top](#table-of-contents)**
## Manipolazione DOM
- [3.1](#3.1) <a name='3.1'></a> Remove
```js
// jQuery
$el.remove();
// Nativo
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Text
+ Get text
```js
// jQuery
$el.text();
// Nativo
el.textContent;
```
+ Set text
```js
// jQuery
$el.text(string);
// Nativo
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Ottenere HTML
```js
// jQuery
$el.html();
// Nativo
el.innerHTML;
```
+ Settare HTML
```js
// jQuery
$el.html(htmlString);
// Nativo
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Append
appendere elemento figlio dopo l'ultimo elemento figlio del genitore
```js
// jQuery
$el.append("<div id='container'>hello</div>");
// Nativo
el.insertAdjacentHTML("beforeend","<div id='container'>hello</div>");
```
- [3.5](#3.5) <a name='3.5'></a> Prepend
```js
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Nativo
el.insertAdjacentHTML("afterbegin","<div id='container'>hello</div>");
```
- [3.6](#3.6) <a name='3.6'></a> insertBefore
Inserire un nuovo node dopo l'elmento selezionato
```js
// jQuery
$newEl.insertBefore(queryString);
// Nativo
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);
```
- [3.7](#3.7) <a name='3.7'></a> insertAfter
Insert a new node after the selected elements
```js
// jQuery
$newEl.insertAfter(queryString);
// Nativo
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);
```
- [3.8](#3.8) <a name='3.8'></a> is
Restituisce `true` se combacia con l'elemento selezionato
```js
// jQuery - Notare `is` funziona anche con `function` o `elements` non di importanza qui
$el.is(selector);
// Nativo
el.matches(selector);
```
**[⬆ back to top](#table-of-contents)**
## Ajax
Sostituire con [fetch](https://github.com/camsong/fetch-ie8) and [fetch-jsonp](https://github.com/camsong/fetch-jsonp)
**[⬆ back to top](#table-of-contents)**
## Eventi
Per una completa sostituzione con namespace e delegation, riferire a https://github.com/oneuijs/oui-dom-events
- [5.1](#5.1) <a name='5.1'></a> Bind un evento con on
```js
// jQuery
$el.on(eventName, eventHandler);
// Nativo
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Unbind an event with off
```js
// jQuery
$el.off(eventName, eventHandler);
// Nativo
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Nativo
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ back to top](#table-of-contents)**
## Utilities
- [6.1](#6.1) <a name='6.1'></a> isArray
```js
// jQuery
$.isArray(range);
// Nativo
Array.isArray(range);
```
- [6.2](#6.2) <a name='6.2'></a> Trim
```js
// jQuery
$.trim(string);
// Nativo
string.trim();
```
- [6.3](#6.3) <a name='6.3'></a> Object Assign
Extend, usa object.assign polyfill https://github.com/ljharb/object.assign
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Nativo
Object.assign({}, defaultOpts, opts);
```
- [6.4](#6.4) <a name='6.4'></a> Contains
```js
// jQuery
$.contains(el, child);
// Nativo
el !== child && el.contains(child);
```
**[⬆ back to top](#table-of-contents)**
## Alternative
* [Forse non hai bisogno di jQuery](http://youmightnotneedjquery.com/) - Esempi di come creare eventi comuni, elementi, ajax etc usando puramente javascript.
* [npm-dom](http://github.com/npm-dom) e [webmodules](http://github.com/webmodules) - Organizzazione dove puoi trovare moduli per il DOM individuale su NPM
## Supporto Browsers
 |  |  |  | 
--- | --- | --- | --- | --- |
Ultimo ✔ | Ultimo ✔ | 10+ ✔ | Ultimo ✔ | 6.1+ ✔ |
# Licenza
MIT
================================================
FILE: README-ja.md
================================================
## jQueryは必要ない（You Don't Need jQuery）
フロントエンドの開発環境はめまぐるしく進化していて、最近のブラウザでは十分な質、量のDOM/BOM APIが実装されています。もうDOM操作やイベント処理のためにjQueryを覚える必要はありません。また、ReactやAngularそしてVueなどのフロントエンドライブラリの流行により、DOMを直接操作することはアンチパターンとなりました。jQueryはそれほど重要ではなくなったのです。このプロジェクトは、jQueryでの書き方の代わりとなるネイティブでの書き方(IE10以上)をまとめます。
## 目次
1. [Translations](#translations)
1. [セレクタ](#セレクタ)
1. [CSSとスタイル](#cssとスタイル)
1. [DOM操作](#dom操作)
1. [Ajax](#ajax)
1. [イベント](#イベント)
1. [ユーティリティ関数](#ユーティリティ関数)
1. [Promise](#promise)
1. [アニメーション](#アニメーション)
1. [選択肢](#選択肢)
1. [対応ブラウザ](#対応ブラウザ)
## Translations
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [Polski](./README-pl.md)
## セレクタ
classセレクタ、idセレクタ、属性セレクタのような主要セレクタは`document.querySelector`もしくは`document.querySelectorAll`で代替できます。
jQueryのセレクタと比べて以下の違いがあります。
* `document.querySelector`はセレクタにマッチする最初のエレメントを返す
* `document.querySelectorAll`はセレクタにマッチする全てのエレメントのNodeListを返す。`Array.prototype.slice.call(document.querySelectorAll(selector) || []);`で配列に変換できる。
* セレクタにマッチする要素がなかった場合、jQueryは`[]`を返すが、DOM APIは`null`を返す。したがってNull Pointer Exceptionに注意する必要がある。もしくは`document.querySelectorAll(selector) || []`のように`||`を使ってデフォルト値を指定しておく。
> 注意：`document.querySelector`と`document.querySelectorAll`はかなり**遅い**です。もし、パフォーマンスが必要なら`document.getElementById`や`document.getElementsByClassName`、`document.getElementsByTagName`を使ってください。
- [1.0](#1.0) <a name='1.0'></a> セレクタによる選択
```js
// jQuery
$('selector');
// Native
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> クラス名による選択
```js
// jQuery
$('.class');
// Native
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> idによる選択
```js
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> 属性による選択
```js
// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> 子孫要素の選択
```js
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
```
- [1.5](#1.5) <a name='1.5'></a> 兄弟要素の選択
+ 兄弟要素
```js
// jQuery
$el.siblings();
// Native
Array.prototype.filter.call(el.parentNode.children, function(child) {
return child !== el;
});
```
+ 直前の兄弟要素
```js
// jQuery
$el.prev();
// Native
el.previousElementSibling;
```
+ 直後の兄弟要素
```js
// jQuery
$el.next();
// Native
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> 祖先要素の選択
指定要素からdocument方向に遡って走査し、セレクタにマッチする最初の祖先要素を返します。
```js
// jQuery
$el.closest(selector);
// Native - 最近のブラウザのみ。IEでは動かない。
el.closest(selector);
// Native - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Parents Until
指定要素からセレクタにマッチする祖先要素までdocument方向に遡って走査し、フィルタにマッチする祖先要素を全て取得します。ただし、セレクタで指定された要素は含みません。
```js
// jQuery
$el.parentsUntil(selector, filter);
// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// parentから走査を開始する
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> フォーム
+ input/textarea
```js
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
```
+ `.radio`内での`e.currentTarget`のインデックスを返す
```js
// jQuery
$(e.currentTarget).index('.radio');
// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> iframeのコンテンツ
`$('iframe').contents()`はiframeの`contentDocument`を返します。
+ Iframe contents
```js
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
```
+ Iframe Query
```js
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
```
- [1.10](#1.10) <a name='1.10'></a> bodyを取得する
```js
// jQuery
$('body');
// Native
document.body;
```
- [1.11](#1.11) <a name='1.11'></a> 属性の設定、取得
+ 属性値を取得する
```js
// jQuery
$el.attr('foo');
// Native
el.getAttribute('foo');
```
+ 属性値を設定する
```js
// jQuery, DOMを変化させずメモリ上で動作することに注意
$el.attr('foo', 'bar');
// Native
el.setAttribute('foo', 'bar');
```
+ `data-`属性を取得する
```js
// jQuery
$el.data('foo');
// Native (`getAttribute`を使う)
el.getAttribute('data-foo');
// Native (IE11以上のサポートなら`dataset`を使ってもよい)
el.dataset['foo'];
```
**[⬆ back to top](#目次)**
## CSSとスタイル
- [2.1](#2.1) <a name='2.1'></a> CSS
+ スタイルを取得する
```js
// jQuery
$el.css("color");
// Native
// NOTE: 既知のバグ デフォルト値が'auto'の場合、値が指定されていなくても'auto'が返る
const win = el.ownerDocument.defaultView;
// nullは疑似要素でないことを示している
win.getComputedStyle(el, null).color;
```
+ スタイルを設定する
```js
// jQuery
$el.css({ color: "#ff0011" });
// Native
el.style.color = '#ff0011';
```
+ スタイルを一括取得、一括設定する
複数のスタイルを一括で設定したいなら、oui-dom-utilsの[setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194)関数を参考にすると良いでしょう。
+ クラスを追加する
```js
// jQuery
$el.addClass(className);
// Native
el.classList.add(className);
```
+ クラスを削除する
```js
// jQuery
$el.removeClass(className);
// Native
el.classList.remove(className);
```
+ クラスの有無をチェックする
```js
// jQuery
$el.hasClass(className);
// Native
el.classList.contains(className);
```
+ クラスの有無を切り替える
```js
// jQuery
$el.toggleClass(className);
// Native
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> 横幅と高さ
横幅(width)と高さ(height)の書き方はほぼ同じなので、高さ（height）の例のみを示します。
+ ウィンドウの高さ
```js
// window height
$(window).height();
// jQueryのようにスクロールバーを除いた高さ
window.document.documentElement.clientHeight;
// スクロールバーを含めるなら
window.innerHeight;
```
+ ドキュメントの高さ
```js
// jQuery
$(document).height();
// Native
document.documentElement.scrollHeight;
```
+ エレメントの高さ
```js
// jQuery
$el.height();
// Native
function getHeight(el) {
const styles = window.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// integerで取得（`border-box`の時は`height - border`が、`content-box`の時は`height + padding`が返る）
el.clientHeight;
// decimalで取得（`border-box`の時は`height`が、`content-box`の時は`height + padding + border`が返る）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> PositionとOffset
+ Position
offset parentを起点として、エレメントの座標を取得する。
```js
// jQuery
$el.position();
// Native
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
documentを起点として、エレメントの座標を取得する。
```js
// jQuery
$el.offset();
// Native
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> スクロール位置
縦スクロールバーの位置を取得する。
```js
// jQuery
$(window).scrollTop();
// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ back to top](#目次)**
## DOM操作
- [3.1](#3.1) <a name='3.1'></a> Remove
DOMからエレメントを削除する。
```js
// jQuery
$el.remove();
// Native
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Text
+ テキストを取得する
子孫エレメントも含めた全テキスト内容を取得する。
```js
// jQuery
$el.text();
// Native
el.textContent;
```
+ テキストを設定する
エレメントのコンテントを指定されたテキストに設定する。
```js
// jQuery
$el.text(string);
// Native
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ HTMLを取得する
```js
// jQuery
$el.html();
// Native
el.innerHTML;
```
+ HTMLを設定する
```js
// jQuery
$el.html(htmlString);
// Native
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Append
最後の子要素としてエレメントを追加する。
```js
// jQuery
$el.append("<div id='container'>hello</div>");
// Native
el.insertAdjacentHTML("beforeend","<div id='container'>hello</div>");
```
- [3.5](#3.5) <a name='3.5'></a> Prepend
最初の子要素としてエレメントを追加する。
```js
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Native
el.insertAdjacentHTML("afterbegin","<div id='container'>hello</div>");
```
- [3.6](#3.6) <a name='3.6'></a> insertBefore
指定要素の後ろに新しいノードを追加する。
```js
// jQuery
$newEl.insertBefore(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);
```
- [3.7](#3.7) <a name='3.7'></a> insertAfter
指定要素の前に新しいノードを追加する。
```js
// jQuery
$newEl.insertAfter(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);
```
- [3.8](#3.8) <a name='3.8'></a> is
セレクタにマッチするなら`true`を返す。
```js
// is関数は複数エレメントや関数にも対応するが、matches関数は単一エレメントのみに使える
$el.is(selector);
// Native
el.matches(selector);
```
- [3.9](#3.9) <a name='3.9'></a> clone
エレメントのディープコピーを生成する。
```js
// jQuery
$el.clone();
// Native
el.cloneNode();
// パラメータには`true`が渡され、深い複製を生成します。
// 浅い複製を生成するには、`false`を渡します。
```
- [3.10](#3.10) <a name='3.10'></a> empty
全ての子ノードを削除する。
```js
// jQuery
$el.empty();
// Native
el.innerHTML = '';
```
- [3.11](#3.11) <a name='3.11'></a> wrap
エレメントを指定のHTMLで囲む。
```js
// jQuery
$('.inner').wrap('<div class="wrapper"></div>');
// Native
Array.prototype.slice.call(document.querySelectorAll('.inner')).forEach(function(el){
var wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
```
- [3.12](#3.12) <a name='3.12'></a> unwrap
セレクタにマッチしたエレメントの親要素をDOMから削除する。マッチしたエレメント自体は残す。
```js
// jQuery
$('.inner').unwrap();
// Native
Array.prototype.slice.call(document.querySelectorAll('.inner')).forEach(function(el){
Array.prototype.slice.call(el.childNodes).forEach(function(child){
el.parentNode.insertBefore(child, el);
});
el.parentNode.removeChild(el);
});
```
- [3.13](#3.13) <a name='3.13'></a> replaceWith
セレクタにマッチしたエレメントの内容を与えられた内容に置き換える。
```js
// jQuery
$('.inner').replaceWith('<div class="outer"></div>');
// Native
Array.prototype.slice.call(document.querySelectorAll('.inner')).forEach(function(el){
var outer = document.createElement('div');
outer.className = 'outer';
el.parentNode.insertBefore(outer, el);
el.parentNode.removeChild(el);
});
```
**[⬆ back to top](#目次)**
## Ajax
[Fetch API](https://fetch.spec.whatwg.org/)はXMLHttpRequestを置き換える新たな規格です。ChromeとFirefoxで動きます。レガシーなブラウザでもpolyfillを使えます。
IE9以上なら[github/fetch](http://github.com/github/fetch)、IE8以上なら[fetch-ie8](https://github.com/camsong/fetch-ie8/)、jsonpを利用したいなら[fetch-jsonp](https://github.com/camsong/fetch-jsonp)を試してみてください。
- [4.1](#4.1) <a name='4.1'></a> マッチしたエレメントをサーバから取得したHTMLに置き換える。
```js
// jQuery
$(selector).load(url, completeCallback)
// Native
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)
```
**[⬆ back to top](#目次)**
## イベント
名前空間(namespace)と委譲（delegation）を利用した完全な代替手段が必要なら、 https://github.com/oneuijs/oui-dom-events を参照してください。
- [5.0](#5.0) <a name='5.0'></a> ドキュメントが読み込まれたときの動作(`DOMContentLoaded`)
```js
// jQuery
$(document).ready(eventHandler);
// Native
// DOMContentLoadedがすでに完了していないか確認する
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
```
- [5.1](#5.1) <a name='5.1'></a> イベントをバインドする(`on`)
```js
// jQuery
$el.on(eventName, eventHandler);
// Native
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> イベントをアンバインドする(`off`)
```js
// jQuery
$el.off(eventName, eventHandler);
// Native
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> イベントを発火させる(`trigger`)
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Native
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ back to top](#目次)**
## ユーティリティ関数
殆どのユーティリティ関数はネイティブのAPIで置き換えることができます。表記の一貫性やパフォーマンスを重視した他のライブラリを使う選択肢もあります。[lodash](https://lodash.com)がおすすめです。
- [6.1](#6.1) <a name='6.1'></a> 基本的なユーティリティ関数
+ isArray
配列かどうか判定する。
```js
// jQuery
$.isArray(array);
// Native
Array.isArray(array);
```
+ isWindow
windowかどうか判定する。
```js
// jQuery
$.isWindow(obj);
// Native
function isWindow(obj) {
return obj != null && obj === obj.window;
}
```
+ inArray
配列の中で、指定された値が最初に現れたインデックスを返す。（見つからなければ-1を返す）。
```js
// jQuery
$.inArray(item, array);
// Native
Array.indexOf(item);
```
+ isNumeric
数値かどうか判定する。
`typeof`を使ってください。ライブラリを使う場合、`typeof`は正確でない場合があります。
```js
// jQuery
$.isNumeric(item);
// Native
function isNumeric(item) {
return typeof item === 'number';
}
```
+ isFunction
JavaScript関数オブジェクトかどうか判定する。
```js
// jQuery
$.isFunction(item);
// Native
function isFunction(item) {
return typeof item === 'function';
}
```
+ isEmptyObject
空のオブジェクトである（列挙できる要素がない）か判定する。
```js
// jQuery
$.isEmptyObject(obj);
// Native
function isEmptyObject(obj) {
for (let key in obj) {
return false;
}
return true;
}
```
+ isPlainObject
`{}`もしくは`new Object`で生成されたオブジェクトであるか判定する。
```js
// jQuery
$.isPlainObject(obj);
// Native
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj != null && obj === obj.window) {
return false;
}
if (obj.constructor &&
!{}.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}
return true;
}
```
+ extend
二つ以上のオブジェクトをマージする。
`object.assign`はECMAScript6のAPIですが、[polyfill](https://github.com/ljharb/object.assign)も利用できます。
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Native
Object.assign({}, defaultOpts, opts);
```
+ trim
前後の空白を除去する。
```js
// jQuery
$.trim(string);
// Native
string.trim();
```
+ map
配列やオブジェクトを新しい配列に変換する。
```js
// jQuery
$.map(array, function(value, index) {
});
// Native
array.map(function(value, index) {
});
```
+ each
配列やオブジェクトに対して繰り返し処理を行う。
```js
// jQuery
$.each(array, function(value, index) {
});
// Native
array.forEach(function(value, index) {
});
```
+ grep
フィルター関数に合致したエレメントだけを返す。
```js
// jQuery
$.grep(array, function(value, index) {
});
// Native
array.filter(function(value, index) {
});
```
+ type
JavaScript「クラス」名を判定します。
```js
// jQuery
$.type(obj);
// Native
Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
```
+ merge
二つの配列をマージする。
```js
// jQuery
$.merge(array1, array2);
// Native
// 重複した要素は削除されない
function merge() {
return Array.prototype.concat.apply([], arguments)
}
```
+ now
現在の時刻を返す。
```js
// jQuery
$.now();
// Native
Date.now();
```
+ proxy
関数内で実行されるthisを任意のオブジェクトに変更する。
```js
// jQuery
$.proxy(fn, context);
// Native
fn.bind(context);
```
+ makeArray
配列形式のオブジェクトを配列に変換する。
```js
// jQuery
$.makeArray(arrayLike);
// Native
Array.prototype.slice.call(arrayLike);
// ES6なら
Array.from(arrayLike);
```
- [6.2](#6.2) <a name='6.2'></a> contains
ある要素が他の要素の子孫であるか判定する。
```js
// jQuery
$.contains(el, child);
// Native
el !== child && el.contains(child);
```
- [6.3](#6.3) <a name='6.3'></a> globaleval
JavaScriptコードをグローバル空間で実行する。
```js
// jQuery
$.globaleval(code);
// Native
function Globaleval(code) {
let script = document.createElement('script');
script.text = code;
document.head.appendChild(script).parentNode.removeChild(script);
}
// evalはcurrentコンテキストで実行される。$.globalevalのコンテキストはグローバルである。
eval(code);
```
- [6.4](#6.4) <a name='6.4'></a> parse
+ parseHTML
文字列をDOM nodeの配列として返します。
```js
// jQuery
$.parseHTML(htmlString);
// Native
function parseHTML(string) {
const tmp = document.implementation.createHTMLDocument();
tmp.body.innerHTML = string;
return tmp.body.children;
}
```
+ parseJSON
JSON文字列をJavaScriptに変換します。
```js
// jQuery
$.parseJSON(str);
// Native
JSON.parse(str);
```
**[⬆ back to top](#目次)**
## Promise
promiseは非同期処理の最終的な処理結果を表します。jQueryにはpromiseを扱うための独自の方法があります。ネイティブのJavaScriptでは[Promises/A+](http://promises-aplus.github.io/promises-spec/)規格に則り、薄く、最小限のAPIを実装しています。
- [7.1](#7.1) <a name='7.1'></a> done, fail, always
`done`はpromiseが成功(resolved)したとき、`fall`は失敗(rejected)したとき、`always`はどちらの場合も呼び出されます。
```js
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
// Native
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
```
- [7.2](#7.2) <a name='7.2'></a> when
`when`は複数のpromiseを扱うときに使います。すべてのpromiseの結果が返ったときに成功となります（失敗が含まれてても成功となります）。
```js
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {})
// Native
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
```
- [7.3](#7.3) <a name='7.3'></a> Deferred
`Deferred`はpromiseを作成する方法の一つです。
```js
// jQuery
function asyncFunc() {
var d = new $.Deferred();
setTimeout(function() {
if(true) {
d.resolve('some_value_compute_asynchronously');
} else {
d.reject('failed');
}
}, 1000);
return d.promise();
}
// Native
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(function() {
if (true) {
resolve('some_value_compute_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}
// Deferred way
function defer() {
let resolve, reject;
let promise = new Promise(function() {
resolve = arguments[0];
reject = arguments[1];
});
return { resolve, reject, promise };
}
function asyncFunc() {
var d = defer();
setTimeout(function() {
if(true) {
d.resolve('some_value_compute_asynchronously');
} else {
d.reject('failed');
}
}, 1000);
return d.promise;
}
```
**[⬆ back to top](#目次)**
## アニメーション
- [8.1](#8.1) <a name='8.1'></a> show、hide
```js
// jQuery
$el.show();
$el.hide();
// Native
// show関数の詳細を見たければ次のURLを参照してください
// https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
```
- [8.2](#8.2) <a name='8.2'></a> toggle
エレメントが表示されていないなら表示し、表示されているなら非表示にします。
```js
// jQuery
$el.toggle();
// Native
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
}
else {
el.style.display = 'none';
}
```
- [8.3](#8.3) <a name='8.3'></a> fadeIn、fadeOut
```js
// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);
// Native
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';
```
- [8.4](#8.4) <a name='8.4'></a> fadeTo
エレメントのopacityを調整してください。
```js
// jQuery
$el.fadeTo('slow',0.15);
// Native
el.style.transition = 'opacity 3s'; // 'slow'は3秒だということにしている
el.style.opacity = '0.15';
```
- [8.5](#8.5) <a name='8.5'></a> fadeToggle
フェードイン・フェードアウトを伴ってエレメントの表示・非表示を切り替えます。
```js
// jQuery
$el.fadeToggle();
// Native
el.style.transition = 'opacity 3s';
let { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
}
else {
el.style.opacity = '1';
}
```
- [8.6](#8.6) <a name='8.6'></a> スライドアップ、スライドダウン
```js
// jQuery
$el.slideUp();
$el.slideDown();
// Native
let originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
```
- [8.7](#8.7) <a name='8.7'></a> slideToggle
スライドを伴って、エレメントの表示・非表示を切り替えます。
```js
// jQuery
$el.slideToggle();
// Native
let originHeight = '100px';
el.style.transition = 'height 3s';
let { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
}
else {
el.style.height = '0px';
}
```
- [8.8](#8.8) <a name='8.8'></a> animate
CSSプロパティで定義されたアニメーションを表示します。
```js
// jQuery
$el.animate({params}, speed);
// Native
el.style.transition = 'all' + speed;
Object.keys(params).forEach(function(key) {
el.style[key] = params[key];
})
```
## 選択肢
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - ネイティブのJavaScriptでイベント、エレメント、Ajaxを扱うサンプル集(英語)
* [npm-dom](http://github.com/npm-dom) and [webmodules](http://github.com/webmodules) - npmで利用できるDOMモジュールを集めたOrganizationです
## 対応ブラウザ
![Chrome][chrome-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
--- | --- | --- | --- | ---
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔
# ライセンス
MIT
[chrome-image]: https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png
[firefox-image]: https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png
[ie-image]: https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png
[opera-image]: https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png
[safari-image]: https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png
================================================
FILE: README-kg.md
================================================
## jQuery'ге муктаждыгынар жок
Биздин убакта фронт-энд чөйрөсү абдан ылдам өнүгүп жатат, ошонун менен бирге заманбап браузерлер көптөгөн DOM/BOM API жагын ишке ашырды. Бул абдан жакшы көрүнүш. Анткени, силер DOM'ду манипуляциялоо же окуялардын объектерин иштешиш үчүн jQuery'ни башынан үйрөнүнөрдүн кажети калбайт.Ошонун менен бирге, алдыда келе жаткан React, Angular жана Vue фронт-энд библиотекалардын жардамы менен, DOM'ду түздөн-түз манипуляциялоо өзүнчө бир антипаттернге айланды.Бул проект көптөгөн jQuery методдорун нативдуу аткаруусу жана IE 10+ колдоосу менен кошулган көптөгөн альтернативаларды өзүнө камтыйт.
## Мазмуну
1. [Котормолор](#Котормолор)
1. [Query Selector](#query-selector)
1. [CSS & Style](#css--style)
1. [DOM манипуляциясы](#DOM-манипуляциясы)
1. [Ajax](#ajax)
1. [Окуялар](#Окуялар)
1. [Утилиталар](#Утилиталар)
1. [Альтернативалар](#Альтернативалар)
1. [Браузерлердин колдоосу](#Браузерлердин-колдоосу)
## Котормолор
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Query selector
Көп колдонулган class, id же болбосо attribute сыяктуу селекторлор үчүн биз `document.querySelector` же `document.querySelectorAll` колдонсок болот. Айырмасы төмөнкүдөй:
* `document.querySelector` биринчи дал келген элементти кайтарат.
* `document.querySelectorAll` баардык дал келген элементтерди түйүндөр коллекциялары(NodeList) сыяктуу кайтарат. Аны `[].slice.call(document.querySelectorAll(selector) || []);` аркылуу массивге конвертация кылууга болот.
* Эгерде эч элементтер дал келбесе, анда DOM API `null` кайтарганда jQuery `[]` кайтарат. Null (Null Pointer Exception) чыгаруунун көрсөткүчүнө көнүл бургула. Эгерде дал келүүлөр кездешбесе, анда силер жарыяланбаган маани үчүн `||` колдонсонор болот `document.querySelectorAll(selector) || []`
> Белгилөө: `document.querySelector` жана `document.querySelectorAll` чыныгы **ЖАЙ**, колдон келишинче кирешелүүлүктү жакшыртуу максатында `getElementById`, `document.getElementsByClassName` же `document.getElementsByTagName` колдонго аракет кылгыла.
- [1.0](#1.0) <a name='1.0'></a> Селектор аркылуу издөө
```js
// jQuery
$('selector');
// Нативдүү түрү
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Класс боюнча кайрылуу
```js
// jQuery
$('.class');
// Нативдүү түрү
document.querySelectorAll('.class');
// же
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> ID боюнча кайрылуу
```js
// jQuery
$('#id');
// Нативдүү түрү
document.querySelector('#id');
// же
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Атрибут боюнча кайрылуу
```js
// jQuery
$('a[target=_blank]');
// Нативдүү түрү
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Тукумдардын арасында издөө
```js
// jQuery
$el.find('li');
// Нативдүү түрү
el.querySelectorAll('li');
```
- [1.5](#1.5) <a name='1.5'></a> Бекем байланышкан/Мурунку/Кийинки элементтер
+ Бекем байланышкан элементтер
```js
// jQuery
$el.siblings();
// Нативдүү түрү
[].filter.call(el.parentNode.children, function(child) {
return child !== el;
});
```
+ Мурунку элементтер
```js
// jQuery
$el.prev();
// Нативдүү түрү
el.previousElementSibling;
```
+ Кийинки элементтер
```js
// jQuery
$el.next();
// Нативдүү түрү
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Жакынкы
Берилген селектор аркылуу биринчи дал келген элементти кайтарат.
```js
// jQuery
$el.closest(selector);
// Нативдүү түрү - Only latest, NO IE
el.closest(selector);
// Нативдүү түрү - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Ата-энеге чейин
Бир бирине жана селекторго дал келген, DOM'дун узели жана jquery'нин объектинен тышкары элементтерлин сетинде жайгашкан ар-бир элементтин ата-энесин кайтарат.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Нативдүү түрү
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// Ата-энеден баштап дал келүү
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> От
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Нативдүү түрү
document.querySelector('#my-input').value;
```
+ e.currentTarget жана `.radio` индексин алуу
```js
// jQuery
$(e.currentTarget).index('.radio');
// Нативдүү түрү
[].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Iframe Контенти
`$('iframe').contents()` 'дин `contentDocument`'н кайтарат.
+ Iframe'дин контенти
```js
// jQuery
$iframe.contents();
// Нативдүү түрү
iframe.contentDocument;
```
+ Iframe Кайрылуу
```js
// jQuery
$iframe.contents().find('.css');
// Нативдүү түрү
iframe.contentDocument.querySelectorAll('.css');
```
- [1.10](#1.10) <a name='1.10'></a> body'ни табуу
```js
// jQuery
$('body');
// Нативдүү түрү
document.body;
```
- [1.11](#1.11) <a name='1.11'></a>Атрибутту алуу жана аны өзгөртүү
+ Атрибутту табуу
```js
// jQuery
$el.attr('foo');
// Нативдүү түрү
el.getAttribute('foo');
```
+ Атрибутту кошуу
```js
// jQuery, DOM'ду өзгөртпөстөн эсте иштей берет
$el.attr('foo', 'bar');
// Нативдүү түрү
el.setAttribute('foo', 'bar');
```
+ `data-` атрибутту табуу
```js
// jQuery
$el.data('foo');
// Нативдүү түрү (`getAttribute`'ду колдонуп)
el.getAttribute('data-foo');
// Нативдүү түрү ( `dataset`'ти колдонуу, эгерде IE 11 төмөн колдоо жок болсо)
el.dataset['foo'];
```
**[⬆ Башына](#Мазмуну)**
## CSS & Style
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Стильди алуу
```js
// jQuery
$el.css("color");
// Нативдүү түрү
// Белгилөө: Белгилүү ката, эгерде стильдин мааниси 'auto' болсо, анда 'auto' кайтарат
const win = el.ownerDocument.defaultView;
// null псевдостильдерди кайтарбоону белгилейт
win.getComputedStyle(el, null).color;
```
+ style менчиктоо
```js
// jQuery
$el.css({ color: "#ff0011" });
// Нативдүү түрү
el.style.color = '#ff0011';
```
+ Стильдерди Алуу/Менчиктоо
Заметьте что если вы хотите присвоить несколько стилей за раз, вы можете сослаться на [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) метод в oui-dom-utils package.
+ Классты кошуу
```js
// jQuery
$el.addClass(className);
// Нативдүү түрү
el.classList.add(className);
```
+ Классты жок кылуу
```js
// jQuery
$el.removeClass(className);
// Нативдүү түрү
el.classList.remove(className);
```
+ Классты камтыйт
```js
// jQuery
$el.hasClass(className);
// Нативдүү түрү
el.classList.contains(className);
```
+ Классты которуу
```js
// jQuery
$el.toggleClass(className);
// Нативдүү түрү
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Туурасы жана узундугу
Турасы жана узундугу теорикалык турдо бири-бирине окшош, узундугун мисалга алсак:
+ Терезенин узундугу
```js
// Терезенин узундугу
$(window).height();
// Скролбарсыз jQuery'дей эле сыяктуу болот
window.document.documentElement.clientHeight;
// скролбар менен
window.innerHeight;
```
+ Документтин узундугу
```js
// jQuery
$(document).height();
// Нативдүү түрү
document.documentElement.scrollHeight;
```
+ Элементтин узундугу
```js
// jQuery
$el.height();
// Нативдүү түрү
function getHeight(el) {
const styles = window.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// Так сандарга чейин（ `border-box` болгондо, анда `height - border`; `content-box` болгондо, анда `height + padding`）
el.clientHeight;
// Ондон бирине чейин（ `border-box` болгондо, анда `height`; `content-box` болгондо, анда `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Позиция жана өтүү
+ Позициясы
Ата-энесин жылуусу боюнча учурдагы координаттарды алуу
```js
// jQuery
$el.position();
// Нативдүү түрү
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Ылдый өтүү
Учурдагы элементтин координаттарын кайтарып алуу
```js
// jQuery
$el.offset();
// Нативдүү түрү
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> Жогоруга жылдыруу
```js
// jQuery
$(window).scrollTop();
// Нативдүү түрү
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ Башына](#Мазмуну)**
## DOM манипуляциясы
- [3.1](#3.1) <a name='3.1'></a> Remove
DOM'дон элементти өчүрүү .
```js
// jQuery
$el.remove();
// Нативдүү түрү
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Текст
+ Текстти кайтарып алуу
Элементтин тексттик түрүн кайтарып алуу
```js
// jQuery
$el.text();
// Нативдүү түрү
el.textContent;
```
+ Текстти менчиктөө
```js
// jQuery
$el.text(string);
// Нативдүү түрү
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ HTML кайтарып алуу
```js
// jQuery
$el.html();
// Нативдүү түрү
el.innerHTML;
```
+ HTML'ны менчиктөө
```js
// jQuery
$el.html(htmlString);
// Нативдүү түрү
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Append
Акыркы ата-эненин баласындан кийин жаны элементти кошуу
```js
// jQuery
$el.append("<div id='container'>hello</div>");
// Нативдүү түрү
el.insertAdjacentHTML("beforeend","<div id='container'>hello</div>");
```
- [3.5](#3.5) <a name='3.5'></a> Prepend
```js
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Нативдүү түрү
el.insertAdjacentHTML("afterbegin","<div id='container'>hello</div>");
```
- [3.6](#3.6) <a name='3.6'></a> insertBefore
Тандалган элементтин астына жаны элементти кошуу
```js
// jQuery
$newEl.insertBefore(queryString);
// Нативдүү түрү
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);
```
- [3.7](#3.7) <a name='3.7'></a> insertAfter
Тандалган элементтен кийин жаны элементти кошуу
```js
// jQuery
$newEl.insertAfter(queryString);
// Нативдүү түрү
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);
```
- [3.8](#3.8) <a name='3.8'></a> is
Эгерде селектордун кайрылуусуна дал келсе, анда `true` кайтарат.
```js
// jQuery - байсанар, `is` `function` же `elements` менен да иштейт.
$el.is(selector);
// Нативдүү түрү
el.matches(selector);
```
**[⬆ Башына](#Мазмуну)**
## Ajax
[Fetch API](https://fetch.spec.whatwg.org/) - XMLHttpRequest ajax үчүн орун алган жаны стандарт. Chrome жана Firefox үчүн иштейт, бирок силер эски браузерлердин колдоосу үчүн полифилдерди колдонсонор болот.
IE9+ [github/fetch](http://github.com/github/fetch)үчүн же [fetch-ie8](https://github.com/camsong/fetch-ie8/) IE8+ үчүн, [fetch-jsonp](https://github.com/camsong/fetch-jsonp) JSONP-кайрылуулар үчүн колдонуп көргулө .
**[⬆ Башына](#Мазмуну)**
## Окуялар
Аттардын мейкиндигни толук алмаштыруу жана делегирование кылыш үчүн [oui-dom-events](https://github.com/oneuijs/oui-dom-events) кайрылуу керек
- [5.1](#5.1) <a name='5.1'></a> Окуяларды onn аркылуу байланыштыруу
```js
// jQuery
$el.on(eventName, eventHandler);
// Нативдүү түрү
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Окуяларды off аркылуу жоюу
```js
// jQuery
$el.off(eventName, eventHandler);
// Нативдүү түрү
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Нативдүү түрү
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ Башына](#Мазмуну)**
## Утилиталар
- [6.1](#6.1) <a name='6.1'></a> isArray
```js
// jQuery
$.isArray(range);
// Нативдүү түрү
Array.isArray(range);
```
- [6.2](#6.2) <a name='6.2'></a> Trim
```js
// jQuery
$.trim(string);
// Нативдүү түрү
string.trim();
```
- [6.3](#6.3) <a name='6.3'></a> Объектин дайындоосу
Кошумча object.assign https://github.com/ljharb/object.assign полифилин колдонгула
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Нативдүү түрү
Object.assign({}, defaultOpts, opts);
```
- [6.4](#6.4) <a name='6.4'></a> Contains
```js
// jQuery
$.contains(el, child);
// Нативдүү түрү
el !== child && el.contains(child);
```
**[⬆ Башына](#Мазмуну)**
## Альтернативалар
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Бат-бат окуялар, элементтер, ajax ж.б.у.с мисалдардын ванильдуу javascript менен көрсөтүү.
* [npm-dom](http://github.com/npm-dom) и [webmodules](http://github.com/webmodules) - Башка DOM бөлүктөрүy NPM'де тапса болот
## Браузерлердин колдоосу
 |  |  |  | 
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
# License
MIT
================================================
FILE: README-my.md
================================================
## Anda tidak memerlukan jQuery
Mutakhir ini perkembangan dalam persekitaran frontend berlaku begitu pesat sekali. Justeru itu kebanyakan pelayar moden telahpun menyediakan API yang memadai untuk pengaksesan DOM/BOM. Kita tak payah lagi belajar jQuery dari asas untuk memanipulasi DOM dan acara-acara. Projek ini menawarkan perlaksanaan alternatif kepada kebanyakan kaedah-kaedah jQuery yang menyokong IE 10+.
## Isi Kandungan
1. [Terjemahan](#terjemahan)
1. [Pemilihan elemen](#pemilihan-elemen)
1. [CSS & Penggayaan](#css-penggayaan)
1. [Manipulasi DOM](#manipulasi-dom)
1. [Ajax](#ajax)
1. [Events](#events)
1. [Utiliti](#utiliti)
1. [Browser Support](#browser-support)
## Terjemahan
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Pemilihan Elemen
Pemilihan elemen yang umum seperti class, id atau atribut, biasanya kita boleh pakai `document.querySelector` atau `document.querySelectorAll` sebagai ganti. Bezanya terletak pada
* `document.querySelector` akan mengembalikan elemen pertama sekali yang sepadan dijumpai
* `document.querySelectorAll` akan mengembalikan kesemua elemen yang sepadan dijumpai kedalam sebuah NodeList. Ia boleh ditukar kedalam bentuk array menggunakan `[].slice.call`
* Sekiranya tiada elemen yang sepadan dijumpai, jQuery akan mengembalikan `[]` dimana API DOM pula akan mengembalikan `null`. Sila ambil perhatian pada Null Pointer Exception
> AWAS: `document.querySelector` dan `document.querySelectorAll` agak **LEMBAB** berbanding `getElementById`, `document.getElementsByClassName` atau `document.getElementsByTagName` jika anda menginginkan bonus dari segi prestasi.
- [1.1](#1.1) <a name='1.1'></a> Pemilihan menggunakan class
```js
// jQuery
$('.css');
// Native
document.querySelectorAll('.css');
```
- [1.2](#1.2) <a name='1.2'></a> Pemilihan menggunakan id
```js
// jQuery
$('#id');
// Native
document.querySelector('#id');
```
- [1.3](#1.3) <a name='1.3'></a> Pemilihan menggunakan atribut
```js
// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Cari sth.
+ Find nodes
```js
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
```
+ Cari body
```js
// jQuery
$('body');
// Native
document.body;
```
+ Cari Attribute
```js
// jQuery
$el.attr('foo');
// Native
e.getAttribute('foo');
```
+ Cari atribut data
```js
// jQuery
$el.data('foo');
// Native
// menggunakan getAttribute
el.getAttribute('data-foo');
// anda boleh juga gunakan `dataset` jika ingin pakai IE 11+
el.dataset['foo'];
```
- [1.5](#1.5) <a name='1.5'></a> Sibling/Previous/Next Elements
+ Sibling elements
```js
// jQuery
$el.siblings();
// Native
[].filter.call(el.parentNode.children, function(child) {
return child !== el;
});
```
+ Previous elements
```js
// jQuery
$el.prev();
// Native
el.previousElementSibling;
```
+ Next elements
```js
// next
$el.next();
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Closest
Return the first matched element by provided selector, traversing from current element to document.
```js
// jQuery
$el.closest(queryString);
// Native
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Parents Until
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Form
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
```
+ Get index of e.currentTarget between `.radio`
```js
// jQuery
$(e.currentTarget).index('.radio');
// Native
[].indexOf.call(document.querySelectAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Iframe Contents
`$('iframe').contents()` returns `contentDocument` for this specific iframe
+ Iframe contents
```js
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
```
+ Iframe Query
```js
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
```
**[⬆ back to top](#table-of-contents)**
## CSS & Style
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Get style
```js
// jQuery
$el.css("color");
// Native
// NOTE: Known bug, will return 'auto' if style value is 'auto'
const win = el.ownerDocument.defaultView;
// null means not return presudo styles
win.getComputedStyle(el, null).color;
```
+ Set style
```js
// jQuery
$el.css({ color: "#ff0011" });
// Native
el.style.color = '#ff0011';
```
+ Get/Set Styles
Note that if you want to set multiple styles once, you could refer to [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) method in oui-dom-utils package.
+ Add class
```js
// jQuery
$el.addClass(className);
// Native
el.classList.add(className);
```
+ Remove class
```js
// jQuery
$el.removeClass(className);
// Native
el.classList.remove(className);
```
+ has class
```js
// jQuery
$el.hasClass(className);
// Native
el.classList.contains(className);
```
+ Toggle class
```js
// jQuery
$el.toggleClass(className);
// Native
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Width & Height
Width and Height are theoretically identical, take Height as example:
+ Window height
```js
// window height
$(window).height();
// without scrollbar, behaves like jQuery
window.document.documentElement.clientHeight;
// with scrollbar
window.innerHeight;
```
+ Document height
```js
// jQuery
$(document).height();
// Native
document.documentElement.scrollHeight;
```
+ Element height
```js
// jQuery
$el.height();
// Native
function getHeight(el) {
const styles = this.getComputedStyles(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// accurate to integer（when `border-box`, it's `height - border`; when `content-box`, it's `height + padding`）
el.clientHeight;
// accurate to decimal（when `border-box`, it's `height`; when `content-box`, it's `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Position & Offset
+ Position
```js
// jQuery
$el.position();
// Native
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
```js
// jQuery
$el.offset();
// Native
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
```
- [2.4](#2.4) <a name='2.4'></a> Scroll Top
```js
// jQuery
$(window).scrollTop();
// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ back to top](#table-of-contents)**
## DOM Manipulation
- [3.1](#3.1) <a name='3.1'></a> Remove
```js
// jQuery
$el.remove();
// Native
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Text
+ Get text
```js
// jQuery
$el.text();
// Native
el.textContent;
```
+ Set text
```js
// jQuery
$el.text(string);
// Native
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Get HTML
```js
// jQuery
$el.html();
// Native
el.innerHTML;
```
+ Set HTML
```js
// jQuery
$el.html(htmlString);
// Native
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Append
append child element after the last child of parent element
```js
// jQuery
$el.append("<div id='container'>hello</div>");
// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);
```
- [3.5](#3.5) <a name='3.5'></a> Prepend
```js
// jQuery
$el.prepend("<div id='container'>hello</div>");
// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild);
```
- [3.6](#3.6) <a name='3.6'></a> insertBefore
Insert a new node before the selected elements
```js
// jQuery
$newEl.insertBefore(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target);
```
- [3.7](#3.7) <a name='3.7'></a> insertAfter
Insert a new node after the selected elements
```js
// jQuery
$newEl.insertAfter(queryString);
// Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);
```
**[⬆ back to top](#table-of-contents)**
## Ajax
Replace with [fetch](https://github.com/camsong/fetch-ie8) and [fetch-jsonp](https://github.com/camsong/fetch-jsonp)
**[⬆ back to top](#table-of-contents)**
## Events
For a complete replacement with namespace and delegation, refer to https://github.com/oneuijs/oui-dom-events
- [5.1](#5.1) <a name='5.1'></a> Bind an event with on
```js
// jQuery
$el.on(eventName, eventHandler);
// Native
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Unbind an event with off
```js
// jQuery
$el.off(eventName, eventHandler);
// Native
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Native
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ back to top](#table-of-contents)**
## Utility
- [6.1](#6.1) <a name='6.1'></a> isArray
```js
// jQuery
$.isArray(range);
// Native
Array.isArray(range);
```
- [6.2](#6.2) <a name='6.2'></a> Trim
```js
// jQuery
$.trim(string);
// Native
String.trim(string);
```
- [6.3](#6.3) <a name='6.3'></a> Object Assign
Extend, use object.assign polyfill https://github.com/ljharb/object.assign
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Native
Object.assign({}, defaultOpts, opts);
```
- [6.4](#6.4) <a name='6.4'></a> Contains
```js
// jQuery
$.contains(el, child);
// Native
el !== child && el.contains(child);
```
**[⬆ back to top](#table-of-contents)**
## Sokongan Pelayar
 |  |  |  | 
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
# Lesen
MIT
================================================
FILE: README-pl.md
================================================
## Nie Potrzebujesz jQuery
Środowiska frontendowe rozwijają się błyskawicznie, nowsze przeglądarki zaimplementowały już większą część API DOM/BOM, które są całkiem użyteczne. Nie musimy uczyć się jQuery od podstaw by manipulować modelem dokumentu lub obsługiwać zdarzenia. Tymczasem, dzięki coraz większej dominacji bibliotek frontendowych takich jak React, Angular czy Vue, obsługa DOM bezpośrednio staje się antywzorcem projektowym, a jQuery coraz bardziej traci na znaczeniu. Ten projekt pokazuje w jaki sposób można zastąpić większość metod jQuery korzystając z natywnej implementacji, ze wsparciem dla IE 10+.
## Spis treści
1. [Tłumaczenia](#tłumaczenia)
1. [Wybór przez selektory](#wybór-przez-selektory)
1. [CSS i styl](#css-i-styl)
1. [Manipulacja DOM](#manipulacja-dom)
1. [Ajax](#ajax)
1. [Zdarzenia](#zdarzenia)
1. [Funkcje użytkowe](#funkcje-użytkowe)
1. [Obietnice](#obietnice)
1. [Animacja](#animacja)
1. [Alternatywy](#alternatywy)
1. [Wsparcie przeglądarek](#wsparcie-przeglądarek)
## Tłumaczenia
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Wybór przez Selektory
Zamiast korzystania z powszechnych selektorów takich jak klasa, id czy też atrybut, możemy użyć `document.querySelector` lub `document.querySelectorAll`. Różnica między nimi to:
* `document.querySelector` zwraca pierwszy pasujący element
* `document.querySelectorAll` zwraca wszystkie elementy jako NodeList. Może zostać przekształcony do tablicy przy użyciu `Array.prototype.slice.call(document.querySelectorAll(selector));`
* Jeżeli żaden element nie został znaleziony, jQuery oraz `document.querySelectorAll` zwrócą `[]`, a `document.querySelector` zwróci `null`.
> Uwaga: `document.querySelector` i `document.querySelectorAll` są dosyć **WOLNE**, staraj się używać `document.getElementById`, `document.getElementsByClassName` lub `document.getElementsByTagName` jeżeli chcesz zwiększyć wydajność.
- [1.0](#1.0) <a name='1.0'></a> Wybór przez selektor
```js
// jQuery
$('selector');
// Natywnie
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Wybór przez klasę
```js
// jQuery
$('.class');
// Natywnie
document.querySelectorAll('.class');
// lub
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> Wybór przez id
```js
// jQuery
$('#id');
// Natywnie
document.querySelector('#id');
// lub
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Wybór przez atrybut
```js
// jQuery
$('a[target=_blank]');
// Natywnie
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Wybór spośród potomków
```js
// jQuery
$el.find('li');
// Natywnie
el.querySelectorAll('li');
```
- [1.5](#1.5) <a name='1.5'></a> Rodzeństwo, Poprzednie/Następne elementy
+ Rodzeństwo
```js
// jQuery
$el.siblings();
// Natywnie
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
```
+ Poprzednie elementy
```js
// jQuery
$el.prev();
// Natywnie
el.previousElementSibling;
```
+ Następne elementy
```js
// jQuery
$el.next();
// Natywnie
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Najbliższy
Zwraca pierwszy pasujący element przez podany selektor, sprawdzając kolejno elementy od bieżącego.
```js
// jQuery
$el.closest(selector);
// Natywnie - Tylko najnowsze, bez wsparcia w IE
el.closest(selector);
// Natywnie - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Rodzice dopóki
Zwraca potomków każdego elementu w bieżącym zbiorze pasujących elementów, aż do elementu dopasowanego przez selektor, węzeł DOM, lub obiekt jQuery.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Natywnie
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Formularze
+ Pola tekstowe
```js
// jQuery
$('#my-input').val();
// Natywnie
document.querySelector('#my-input').value;
```
+ Otrzymanie indeksu `e.currentTarget` wewnątrz elementów `.radio`
```js
// jQuery
$('.radio').index(e.currentTarget);
// Natywnie
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Zawartość ramek
`$('iframe').contents()` zwraca `contentDocument` tego iframe
+ Zawartość ramki
```js
// jQuery
$iframe.contents();
// Natywnie
iframe.contentDocument;
```
+ Wybór elementu ramki
```js
// jQuery
$iframe.contents().find('.css');
// Natywnie
iframe.contentDocument.querySelectorAll('.css');
```
- [1.10](#1.10) <a name='1.10'></a> Otrzymanie body
```js
// jQuery
$('body');
// Native
document.body;
```
- [1.11](#1.11) <a name='1.11'></a> Akcesory atrybutów
+ Otrzymanie wartości atrybutu
```js
// jQuery
$el.attr('foo');
// Natywnie
el.getAttribute('foo');
```
+ Ustawienie wartości atrybutu
```js
// jQuery, działa w pamięci bez zmiany DOM
$el.attr('foo', 'bar');
// Natywnie
el.setAttribute('foo', 'bar');
```
+ Otrzymanie wartości atrybutu `data-`
```js
// jQuery
$el.data('foo');
// Natywnie (użycie `getAttribute`)
el.getAttribute('data-foo');
// Natywnie (użycie `dataset` jeżeli wspierasz tylko przeglądarki IE 11+)
el.dataset['foo'];
```
**[⬆ powrót](#spis-treści)**
## CSS i styl
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Otrzymanie stylu
```js
// jQuery
$el.css('color');
// Natywnie
// UWAGA: Znany bug, zwróci 'auto' jeżeli wartość style wynosi 'auto'
const win = el.ownerDocument.defaultView;
// null oznacza, że nie zostaną zwrócone pseudostyle
win.getComputedStyle(el, null).color;
```
+ Ustawienie stylu
```js
// jQuery
$el.css({ color: '#f01' });
// Natywnie
el.style.color = '#f01';
```
+ Otrzymanie/Ustawienie stylów
Jeżeli chcesz ustawić wiele stylów jednocześnie, możesz odwołać się do metody [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) w pakiecie oui-dom-utils.
+ Dodanie klasy
```js
// jQuery
$el.addClass(className);
// Natywnie
el.classList.add(className);
```
+ Usunięcie klasy
```js
// jQuery
$el.removeClass(className);
// Natywnie
el.classList.remove(className);
```
+ Sprawdzenie czy element posiada klasę
```js
// jQuery
$el.hasClass(className);
// Natywnie
el.classList.contains(className);
```
+ Przełączenie klasy
```js
// jQuery
$el.toggleClass(className);
// Natywnie
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Szerokość i wysokość
Manipulowanie szerokością i wysokością jest teoretycznie takie samo, dla przykładu użycie wysokości:
+ Wysokość okna
```js
// window height
$(window).height();
// bez paska, działa jak jQuery
window.document.documentElement.clientHeight;
// z paskiem przewijania
window.innerHeight;
```
+ Wysokość dokumentu
```js
// jQuery
$(document).height();
// Natywnie
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);
```
+ Wysokość elementu
```js
// jQuery
$el.height();
// Natywnie
function getHeight(el) {
const styles = window.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// dokładne do części całkowitej（jeżeli `border-box`, wtedy `height - border`; jeżeli `content-box`, wtedy `height + padding`）
el.clientHeight;
// dokładne do części dziesiętnej（jeżeli `border-box`, wtedy `height`; jeżeli `content-box`, wtedy `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Pozycja i przesunięcie
+ Pozycja
Otrzymanie bieżącej pozycji elementu relatywnie do przesunięcia rodzica.
```js
// jQuery
$el.position();
// Natywnie
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Przesunięcie
Otrzymanie bieżącej pozycji elementu relatywnie do dokumentu.
```js
// jQuery
$el.offset();
// Natywnie
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
};
}
```
- [2.4](#2.4) <a name='2.4'></a> Przesunięcie widoku
Otrzymanie bieżącego przesunięcia w pionie elementu.
```js
// jQuery
$(window).scrollTop();
// Natywnie
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ wróć](#spis-treści)**
## Manipulacja DOM
- [3.1](#3.1) <a name='3.1'></a> Usuwanie
Usunięcie elementu z DOM.
```js
// jQuery
$el.remove();
// Natywnie
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Tekst
+ Otrzymanie tekstu
Otrzymanie połączonej zawartości tekstowej elementu, włącznie z jego potomkami,
```js
// jQuery
$el.text();
// Natywnie
el.textContent;
```
+ Ustawianie tekstu
Ustawianie zawartości tekstowej elementu do wyznaczonej wartości.
```js
// jQuery
$el.text(string);
// Natywnie
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Otrzymanie HTML
```js
// jQuery
$el.html();
// Natywnie
el.innerHTML;
```
+ Ustawianie HTML
```js
// jQuery
$el.html(htmlString);
// Natywnie
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Dodawanie na koniec
Dodanie elementu jako dziecko po ostatnim dziecku elementu rodzica
```js
// jQuery
$el.append('<div id="container">Hello World</div>');
// Natywnie (tekst HTML)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
// Natywnie (Element)
el.appendChild(newEl);
```
- [3.5](#3.5) <a name='3.5'></a> Dodawanie na początek
```js
// jQuery
$el.prepend('<div id="container">Hello World</div>');
// Natywnie (tekst HTML)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
// Natywnie (Element)
el.insertBefore(newEl, el.firstChild);
```
- [3.6](#3.6) <a name='3.6'></a> Dodawanie przed
Dodanie nowego węzła przed wybranymi elementami
```js
// jQuery
$newEl.insertBefore(selector);
// Natywnie (tekst HTML)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
// Natywnie (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}
```
- [3.7](#3.7) <a name='3.7'></a> Dodawanie po elemencie
Dodanie nowego węzła po wybranych elementach
```js
// jQuery
$newEl.insertAfter(selector);
// Natywnie (tekst HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');
// Natywnie (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}
```
- [3.8](#3.8) <a name='3.8'></a> Porównywanie
Zwraca `true` jeżeli podany selektor pasuje do wybranego elementu
```js
// jQuery - Zauważ, że `is` działa również z `function` lub `elements`, które nie są tutaj rozważane
$el.is(selector);
// Natywnie
el.matches(selector);
```
- [3.9](#3.9) <a name='3.9'></a> Kopiowanie
Tworzenie głębokiej kopii wybranego elementu
```js
// jQuery
$el.clone();
// Natywnie
el.cloneNode();
// Żeby kopiować głęboko, należy ustawić parametr na `true`
```
- [3.10](#3.10) <a name='3.10'></a> Wyczyszczenie
Usuwa wszystkie węzły dzieci
```js
// jQuery
$el.empty();
// Natywnie
el.innerHTML = '';
```
- [3.11](#3.11) <a name='3.11'></a> Zawinięcie
Umieszczenie każdego elementu w strukturze HTML
```js
// jQuery
$('.inner').wrap('<div class="wrapper"></div>');
// Natywnie
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
```
- [3.12](#3.12) <a name='3.12'></a> Odwinięcie
Usuwa rodziców z pasujących elementów z DOM
```js
// jQuery
$('.inner').unwrap();
// Natywnie
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
Array.prototype.forEach.call(el.childNodes, (child) => {
el.parentNode.insertBefore(child, el);
});
el.parentNode.removeChild(el);
});
```
- [3.13](#3.13) <a name='3.13'></a> Zamiana
Wymiana każdego elementu ze zbioru pasujących elementów na podaną nową zawartość
```js
// jQuery
$('.inner').replaceWith('<div class="outer"></div>');
// Natywnie
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
const outer = document.createElement('div');
outer.className = 'outer';
el.parentNode.insertBefore(outer, el);
el.parentNode.removeChild(el);
});
```
**[⬆ powrót](#spis-treści)**
## Ajax
[Fetch API](https://fetch.spec.whatwg.org/) jest nowym standardem mającym zastąpić XMLHttpRequest by wykonować ajax. Obecnie działa na Chrome i Firefox, istnieje możliwość użycia tzw. polyfills (wypełnień) by móc używać tej funkcjonalności w starszych przeglądarkach.
Wypróbuj [github/fetch](http://github.com/github/fetch) na IE9+ lub [fetch-ie8](https://github.com/camsong/fetch-ie8/) na IE8+, [fetch-jsonp](https://github.com/camsong/fetch-jsonp) by wykonywać żądania JSONP.
- [4.1](#4.1) <a name='4.1'></a> Ładowanie danych z serwera i umieszczenie zwróconego HTML do pasującego elementu
```js
// jQuery
$(selector).load(url, completeCallback)
// Natywnie
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)
```
**[⬆ powrót](#spis-treści)**
## Zdarzenia
Dla pełnego zastąpienia ze wsparciem przestrzenią nazw i delegowaniem, odnieś się do https://github.com/oneuijs/oui-dom-events
- [5.0](#5.0) <a name='5.0'></a> Dokument gotowy ze zdarzeniem `DOMContentLoaded`
```js
// jQuery
$(document).ready(eventHandler);
// Natywnie
// Sprawdź czy zdarzenie DOMContentLoaded został zakończone
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
```
- [5.1](#5.1) <a name='5.1'></a> Nasłuchiwanie funkcji na zdarzenie
```js
// jQuery
$el.on(eventName, eventHandler);
// Natywnie
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Zatrzymanie nasłuchiwania
```js
// jQuery
$el.off(eventName, eventHandler);
// Natywnie
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Wywołanie zdarzenia
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Natywnie
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ powrót](#spis-treści)**
## Funkcje użytkowe
Większość funkcji użytkowych można znaleźć w natywnym API. Pozostałe, bardziej zaawansowane funkcje mogą zostać zastąpione lepszymi bibliotekami użytkowymi, które skupiają się na spójności i wydajności. Rekomendowaną biblioteką jest [lodash](https://lodash.com).
- [6.1](#6.1) <a name='6.1'></a> Podstawowe funkcje użytkowe
+ isArray
Sprawdza czy podany argument jest tablicą.
```js
// jQuery
$.isArray(array);
// Natywnie
Array.isArray(array);
```
+ isWindow
Sprawdza czy podany argument jest oknem.
```js
// jQuery
$.isWindow(obj);
// Natywnie
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window;
}
```
+ inArray
Szuka podanej wartości wewnątrz tablicy i zwraca jej indeks (lub -1 jeżeli nie znaleziono).
```js
// jQuery
$.inArray(item, array);
// Natywnie
array.indexOf(item) > -1;
// sposób ES6
array.includes(item);
```
+ isNumeric
Sprawdza czy podany argument jest wartością numeryczną.
Użyj `typeof` by sprawdzić typ lub przykładu `type` dla większej dokładności.
```js
// jQuery
$.isNumeric(item);
// Natywnie
function isNumeric(value) {
var type = typeof value;
return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));
}
```
+ isFunction
Sprawdza czy podany argument jest obiektem funkcji.
```js
// jQuery
$.isFunction(item);
// Natywnie
function isFunction(item) {
if (typeof item === 'function') {
return true;
}
var type = Object.prototype.toString(item);
return type === '[object Function]' || type === '[object GeneratorFunction]';
}
```
+ isEmptyObject
Sprawdza czy obiekt jest pusty (nie posiada żadnych wymiernych atrybutów).
```js
// jQuery
$.isEmptyObject(obj);
// Natywnie
function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}
```
+ isPlainObject
Sprawdza czy obiekt jest prostym obiektem (stworzonym przy pomocy “{}” lub “new Object”).
```js
// jQuery
$.isPlainObject(obj);
// Natywnie
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false;
}
if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}
return true;
}
```
+ extend
Scalenie zawartości dwóch lub większej ilości obiektów razem w pierwszy obiekt.
`Object.assign` należy do API ES6, więc można również użyć [wypełnienia](https://github.com/ljharb/object.assign).
```js
// jQuery
$.extend({}, defaultOpts, opts);
// Natywnie
Object.assign({}, defaultOpts, opts);
```
+ trim
Usuwa białe znaki z początku i końca ciągu znaków.
```js
// jQuery
$.trim(string);
// Natywnie
string.trim();
```
+ map
Przekształcenie wszystkich elementów tablicy lub obiektu w nową tablicę.
```js
// jQuery
$.map(array, (value, index) => {
});
// Natywnie
array.map((value, index) => {
});
```
+ each
Ogólna funkcja do iteracji, która może być użyta zarówno na obiektach jak i tablicach.
```js
// jQuery
$.each(array, (index, value) => {
});
// Natywnie
array.forEach((value, index) => {
});
```
+ grep
Zwraca elementy które przechodzą test podanej funkcji filtrującej.
```js
// jQuery
$.grep(array, (value, index) => {
});
// Natywnie
array.filter((value, index) => {
});
```
+ type
Ustala wewnętrzną klasę obiektu.
```js
// jQuery
$.type(obj);
// Natywnie
function type(item) {
const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase();
}
```
+ merge
Scala zawartość dwóch tablic w jedną.
```js
// jQuery
$.merge(array1, array2);
// Natywnie
// Funkcja concat nie usuwa duplikatów.
function merge(...args) {
return [].concat(...args)
}
```
+ now
Zwraca liczbę reprezentującą bieżący czas.
```js
// jQuery
$.now();
// Natywnie
Date.now();
```
+ proxy
Pobiera funkcję jako argument i zwraca nową funkcję, która będzie miała zawsze określony kontekst.
```js
// jQuery
$.proxy(fn, context);
// Natywnie
fn.bind(context);
```
+ makeArray
Konwertuje obiekt tablico-podobny w tablicę.
```js
// jQuery
$.makeArray(arrayLike);
// Natywnie
Array.prototype.slice.call(arrayLike);
// sposób ES6
Array.from(arrayLike);
```
- [6.2](#6.2) <a name='6.2'></a> Zawieranie
Sprawdza czy dany element DOM jest potomkiem innego elementu DOM.
```js
// jQuery
$.contains(el, child);
// Natywnie
el !== child && el.contains(child);
```
- [6.3](#6.3) <a name='6.3'></a> Globalna ewaluacja
Wykonuje kod Javascript z globalnym kontekstem.
```js
// jQuery
$.globaleval(code);
// Natywnie
function Globaleval(code) {
const script = document.createElement('script');
script.text = code;
document.head.appendChild(script).parentNode.removeChild(script);
}
// Używaj eval, chociaż kontekst eval jest lokalny, a kontekst $.Globaleval jest globalny.
eval(code);
```
- [6.4](#6.4) <a name='6.4'></a> parse
+ parseHTML
Przetwarza łańcuch znaków w tablicę węzłów DOM.
```js
// jQuery
$.parseHTML(htmlString);
// Natywnie
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();
// Ustaw href elementu na stworzony dokument, żeby przetworzone elementy z URL
// były oparte o URL dokumentu
const base = context.createElement('base');
base.href = document.location.href;
context.head.appendChild(base);
context.body.innerHTML = string;
return context.body.children;
}
```
+ parseJSON
Pobiera ciąg znaków reprezentujący JSON i zwraca wynikową wartość Javascript.
```js
// jQuery
$.parseJSON(str);
// Natywnie
JSON.parse(str);
```
**[⬆ powrót](#spis-treści)**
## Obietnice
Obietnice (_ang. Promises_) reprezentują ewentualny wynik asynchronicznej operacji. jQuery posiada własny system zarządzania obietnicami. Natywny Javascript implementuje minimalną warstwę API do obsługi obietnic według specyfikacji [Promises/A+](http://promises-aplus.github.io/promises-spec/).
- [7.1](#7.1) <a name='7.1'></a> done, fail, always
`done` jest wywoływane gdy obietnica zostanie zakończona sukcesem, `fail` jest wywoływane gdy obietnica jest odrzucona, `always` gdy obietnica jest zakończona z dowolnym wynikiem.
```js
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
// Natywnie
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
```
- [7.2](#7.2) <a name='7.2'></a> when
`when` wykorzystuje się do obsługi wielu obietnic jednocześnie. Zakończy się sukcesem, jeżeli wszystkie podane obietnice zostaną również zakończone sukcesem; zakończy się odrzuceniem, jeżeli jakakolwiek z obietnic zostanie odrzucona.
```js
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});
// Natywnie
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
```
- [7.3](#7.3) <a name='7.3'></a> Deferred
Deferred (_pl. Odłożenie_) jest metodą tworzenia obietnic.
```js
// jQuery
function asyncFunc() {
const defer = new $.Deferred();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);
return defer.promise();
}
// Natywnie
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (true) {
resolve('some_value_computed_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}
// sposób z Deferred
function defer() {
const deferred = {};
const promise = new Promise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});
deferred.promise = () => {
return promise;
};
return deferred;
}
function asyncFunc() {
const defer = defer();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);
return defer.promise();
}
```
**[⬆ powrót](#spis-treści)**
## Animacja
- [8.1](#8.1) <a name='8.1'></a> Show i Hide
```js
// jQuery
$el.show();
$el.hide();
// Natywnie
// Po więcej szczegółów o tej metodzie odnieś się do https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
```
- [8.2](#8.2) <a name='8.2'></a> Toggle
Wyświetla lub ukrywa element.
```js
// jQuery
$el.toggle();
// Natywnie
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
el.style.display = 'none';
}
```
- [8.3](#8.3) <a name='8.3'></a> FadeIn i FadeOut
```js
// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);
// Natywnie
el.style.transition = 'opacity 3s';
// FadeIn
el.style.opacity = '1';
// FadeOut
el.style.opacity = '0';
```
- [8.4](#8.4) <a name='8.4'></a> FadeTo
Dostosowuje przezroczystość elementu w czasie.
```js
// jQuery
$el.fadeTo('slow',0.15);
// Natywnie
el.style.transition = 'opacity 3s'; // przyjęto że 'slow' trwa 3 sekundy
el.style.opacity = '0.15';
```
- [8.5](#8.5) <a name='8.5'></a> FadeToggle
Wyświetla lub ukrywa element przez animowanie jego przezroczystości.
```js
// jQuery
$el.fadeToggle();
// Natywnie
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
}
```
- [8.6](#8.6) <a name='8.6'></a> SlideUp i SlideDown
```js
// jQuery
$el.slideUp();
$el.slideDown();
// Natywnie
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
```
- [8.7](#8.7) <a name='8.7'></a> SlideToggle
Wyświetla lub ukrywa element przez przesunięcie.
```js
// jQuery
$el.slideToggle();
// Natywnie
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
}
else {
el.style.height = '0px';
}
```
- [8.8](#8.8) <a name='8.8'></a> Animate
Wykonuje własną animację zbioru atrybutów CSS.
```js
// jQuery
$el.animate({ params }, speed);
// Natywnie
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) => {
el.style[key] = params[key];
});
```
## Alternatywy
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Przykłady wykonania powszechnych zdarzeń, elementów, ajax itd. z użyciem zwykłego Javascript.
* [npm-dom](http://github.com/npm-dom) oraz [webmodules](http://github.com/webmodules) - Indywidualne moduły DOM na NPM.
## Wsparcie przeglądarek
![Chrome][chrome-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
# Licencja
MIT
[chrome-image]: https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png
[firefox-image]: https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png
[ie-image]: https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png
[opera-image]: https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png
[safari-image]: https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png
================================================
FILE: README-ru.md
================================================
## Вам не нужен jQuery
В наше время среда front-end разработки быстро развивается, и современные браузеры достаточно хорошо реализовали работу с DOM/BOM API. Вам не нужно изучать jQuery с нуля для манипуляцией DOM'ом или объектами событий. В то же время, благодаря лидирующим front-end библиотекам, таким как React, Angular и Vue, манипуляция DOM'ом напрямую становится антипаттерном, а jQuery теряет свою значимость. Этот проект объединяет большинство альтернативных методов jQuery в нативном исполнении с поддержкой IE 10+.
## Содержание
1. [Переводы](#Переводы)
1. [Query Selector](#query-selector)
1. [CSS & Style](#css--style)
1. [Манипуляция с DOM](#манипуляции-с-dom)
1. [Ajax](#ajax)
1. [События](#События)
1. [Утилиты](#Утилиты)
1. [Альтернативы](#Альтернативы)
1. [Поддержка браузеров](#Поддержка-браузеров)
## Переводы
* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)
## Query Selector
Для часто используемых селекторов, таких как class, id или attribute мы можем использовать `document.querySelector` или `document.querySelectorAll` для замены. Разница такова:
* `document.querySelector` возвращает первый совпавший элемент
* `document.querySelectorAll` возвращает все совпавшие элементы как список узлов (NodeList). Его можно конвертировать в массив, используя `Array.prototype.slice.call(document.querySelectorAll(selector));`
* Если никакие элементы не совпадут, jQuery и `document.querySelectorAll` вернет `[]` где `document.querySelector` вернет `null`.
> Заметка: `document.querySelector` и `document.querySelectorAll` достаточно **МЕДЛЕННЫ**, старайтесь использовать `getElementById`, `document.getElementsByClassName` или `document.getElementsByTagName` если хотите улучшить производительность.
- [1.0](#1.0) <a name='1.0'></a> Query by selector
```js
// jQuery
$('selector');
// Нативно
document.querySelectorAll('selector');
```
- [1.1](#1.1) <a name='1.1'></a> Запрос по классу
```js
// jQuery
$('.class');
// Нативно
document.querySelectorAll('.class');
// или
document.getElementsByClassName('class');
```
- [1.2](#1.2) <a name='1.2'></a> Запрос по ID
```js
// jQuery
$('#id');
// Нативно
document.querySelector('#id');
// или
document.getElementById('id');
```
- [1.3](#1.3) <a name='1.3'></a> Запрос по атрибуту
```js
// jQuery
$('a[target=_blank]');
// Нативно
document.querySelectorAll('a[target=_blank]');
```
- [1.4](#1.4) <a name='1.4'></a> Найти среди потомков
```js
// jQuery
$el.find('li');
// Нативно
el.querySelectorAll('li');
```
- [1.5](#1.5) <a name='1.5'></a> Родственные/Предыдущие/Следующие Элементы
+ Родственные элементы
```js
// jQuery
$el.siblings();
// Нативно
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
```
+ Предыдущие элементы
```js
// jQuery
$el.prev();
// Нативно
el.previousElementSibling;
```
+ Следующие элементы
```js
// jQuery
$el.next();
// Нативно
el.nextElementSibling;
```
- [1.6](#1.6) <a name='1.6'></a> Ближайший
Возвращает первый совпавший элемент по предоставленному селектору, проходя от текущего элемента до документа.
```js
// jQuery
$el.closest(selector);
// Нативно - только последние версии браузеров, без IE
el.closest(selector);
// Нативно - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
```
- [1.7](#1.7) <a name='1.7'></a> Родители до
Получить родителей каждого элемента в текущем результате совпавших элементов, но не включая элемент, совпавший с указанным селектором, узлом DOM'а, или объектом jQuery.
```js
// jQuery
$el.parentsUntil(selector, filter);
// Нативно
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// Совпадать начиная от родителя
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
```
- [1.8](#1.8) <a name='1.8'></a> Форма
+ Input/Textarea
```js
// jQuery
$('#my-input').val();
// Нативно
document.querySelector('#my-input').value;
```
+ Получить индекс e.currentTarget между `.radio`
```js
// jQuery
$('.radio').index(e.currentTarget);
// Нативно
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
```
- [1.9](#1.9) <a name='1.9'></a> Содержимое Iframe
`$('iframe').contents()` возвращает `contentDocument` именно для этого iframe
+ Контент Iframe
```js
// jQuery
$iframe.contents();
// Нативно
iframe.contentDocument;
```
+ Iframe Query
```js
// jQuery
$iframe.contents().find('.css');
// Нативно
iframe.contentDocument.querySelectorAll('.css');
```
- [1.10](#1.10) <a name='1.10'></a> Найти body
```js
// jQuery
$('body');
// Нативно
document.body;
```
- [1.11](#1.11) <a name='1.11'></a> Получение и изменение атрибута
+ Найти атрибут
```js
// jQuery
$el.attr('foo');
// Нативно
el.getAttribute('foo');
```
+ Добавление атрибута
```js
// jQuery, помните, это происходит в памяти без изменения DOM
$el.attr('foo', 'bar');
// Нативно
el.setAttribute('foo', 'bar');
```
+ Найти `data-` атрибут
```js
// jQuery
$el.data('foo');
// Нативно (используя `getAttribute`)
el.getAttribute('data-foo');
// Нативно (используя `dataset`, если не требуется поддержка ниже IE 11)
el.dataset['foo'];
```
**[⬆ Наверх](#Содержание)**
## CSS & Style
- [2.1](#2.1) <a name='2.1'></a> CSS
+ Получить стили
```js
// jQuery
$el.css('color');
// Нативно
// ЗАМЕТКА: Известная ошибка, возвращает 'auto' если значение стиля 'auto'
const win = el.ownerDocument.defaultView;
// null означает не возвращать псевдостили
win.getComputedStyle(el, null).color;
```
+ Присвоение style
```js
// jQuery
$el.css({ color: '#f01' });
// Нативно
el.style.color = '#f01';
```
+ Получение/Присвоение стилей
Заметьте что если вы хотите присвоить несколько стилей за раз, вы можете сослаться на [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) метод в пакете oui-dom-utils.
+ Добавить класс
```js
// jQuery
$el.addClass(className);
// Нативно
el.classList.add(className);
```
+ Удалить class
```js
// jQuery
$el.removeClass(className);
// Нативно
el.classList.remove(className);
```
+ Имеет ли класс
```js
// jQuery
$el.hasClass(className);
// Нативно
el.classList.contains(className);
```
+ Переключить класс
```js
// jQuery
$el.toggleClass(className);
// Нативно
el.classList.toggle(className);
```
- [2.2](#2.2) <a name='2.2'></a> Ширина и Высота
Ширина и высота теоретически имеют общие свойства, например возьмем высоту:
+ Высота окна
```js
// Высота окна
$(window).height();
// без полосы прокрутки, ведет себя как jQuery
window.document.documentElement.clientHeight;
// вместе с полосой прокрутки
window.innerHeight;
```
+ Высота документа
```js
// jQuery
$(document).height();
// Нативно
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);
```
+ Высота элемента
```js
// jQuery
$el.height();
// Нативно
function getHeight(el) {
const styles = window.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// С точностью до целого числа（когда `border-box`, это `height - border`; когда `content-box`, это `height + padding`）
el.clientHeight;
// С точностью до десятых（когда `border-box`, это `height`; когда `content-box`, это `height + padding + border`）
el.getBoundingClientRect().height;
```
- [2.3](#2.3) <a name='2.3'></a> Позиция и смещение
+ Position
Получить текущие координаты элемента относительно смещения его родителя
```js
// jQuery
$el.position();
// Нативно
{ left: el.offsetLeft, top: el.offsetTop }
```
+ Offset
Получить текущие координаты элемента относительно документа
```js
// jQuery
$el.offset();
// Нативно
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
};
}
```
- [2.4](#2.4) <a name='2.4'></a> Прокрутка вверх
```js
// jQuery
$(window).scrollTop();
// Нативно
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
```
**[⬆ Наверх](#Содержание)**
## Манипуляции с DOM
- [3.1](#3.1) <a name='3.1'></a> Remove
Удаление элемента из DOM.
```js
// jQuery
$el.remove();
// Нативно
el.parentNode.removeChild(el);
```
- [3.2](#3.2) <a name='3.2'></a> Text
+ Получить текст
Получить текстовое содержимое элемента, включая его потомков,
```js
// jQuery
$el.text();
// Нативно
el.textContent;
```
+ Присвоить текст
```js
// jQuery
$el.text(string);
// Нативно
el.textContent = string;
```
- [3.3](#3.3) <a name='3.3'></a> HTML
+ Получить HTML
```js
// jQuery
$el.html();
// Нативно
el.innerHTML;
```
+ Присвоить HTML
```js
// jQuery
$el.html(htmlString);
// Нативно
el.innerHTML = htmlString;
```
- [3.4](#3.4) <a name='3.4'></a> Append
Добавить родительскому элементу новый дочерний элемент.
```js
// jQuery
$el.append('<div id="container">Hello World</div>');
// Нативно (строка HTML)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
// Нативно (элемент)
el.appendChild(newEl);
```
- [3.5](#3.5) <a name='3.5'></a> Prepend
Добавить родительскому элементу новый дочерний элемент перед остальными
```js
// jQuery
$el.prepend('<div id="container">Hello World</div>');
// Нативно (строка HTML)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
// Нативно (элемент)
el.insertBefore(newEl, el.firstChild);
```
- [3.6](#3.6) <a name='3.6'></a> insertBefore
Вставка нового элемента перед выбранным элементом
```js
// jQuery
$newEl.insertBefore(selector);
// Нативно (строка HTML)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
// Нативно (элемент)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}
```
- [3.7](#3.7) <a name='3.7'></a> insertAfter
Вставка новго элемента после выбранного элемента
```js
// jQuery
$newEl.insertAfter(selector);
// Нативно (строка HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');
// Нативно (элемент)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}
```
- [3.8](#3.8) <a name='3.8'></a> is
Возвращает `true` если совпадает с селектором запроса
```js
// jQuery - заметьте что `is` так же работает с `function` или `elements` которые не имеют к этому отношения
$el.is(selector);
// Нативно
el.matches(selector);
```
**[⬆ Наверх](#Содержание)**
## Ajax
[Fetch API](https://fetch.spec.whatwg.org/) - новый стандарт, заменяющий XMLHttpRequest для ajax. Работает в Chrome и Firefox, вы можете использовать полифилы, для поддержки старых браузеров.
Попробуйте [github/fetch](http://github.com/github/fetch) для IE9+ или [fetch-ie8](https://github.com/camsong/fetch-ie8/) для IE8+, [fetch-jsonp](https://github.com/camsong/fetch-jsonp) для JSONP-запросов.
- [4.1](#4.1) <a name='4.1'></a> Загрузить данные с сервера и поместить полученный HTML в элемент.
```js
// jQuery
$(selector).load(url, completeCallback)
// Нативно
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)
```
**[⬆ Наверх](#Содержание)**
## События
Для полной замены пространства имен и делегирования, используйте [oui-dom-events](https://github.com/oneuijs/oui-dom-events)
- [5.0](#5.0) <a name='5.0'></a> Готовность документа по событию `DOMContentLoaded`
```js
// jQuery
$(document).ready(eventHandler);
// Нативно
// Проверяем, что событие DOMContentLoaded было выполнено
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
```
- [5.1](#5.1) <a name='5.1'></a> Связать событие используя `on`
```js
// jQuery
$el.on(eventName, eventHandler);
// Нативно
el.addEventListener(eventName, eventHandler);
```
- [5.2](#5.2) <a name='5.2'></a> Отвязать событие используя `off`
```js
// jQuery
$el.off(eventName, eventHandler);
// Нативно
el.removeEventListener(eventName, eventHandler);
```
- [5.3](#5.3) <a name='5.3'></a> Trigger
```js
// jQuery
$(el).trigger('custom-event', {key1: 'data'});
// Нативно
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}
el.dispatchEvent(event);
```
**[⬆ Наверх](#Содержание)**
## Утилиты
Большинство из утилит, представленных в jQuery также могут быть найдены в нативном API. Более продвинутые функции могут быть выбраны из других, более актуальных библиотек, направленных на согласованность данных и производительность. Например, [Lodash](https://lodash.com) является рекомендуемой заменой.
- [6.1](#6.1) <a name='6.1'></a> Basic utilities
+ isArray
Определить, является ли аргумент массивом.
```js
// jQuery
$.isArray(array);
// Нативно
Array.isArray(array);
```
+ isWindow
Определить, является ли аргумент окном.
```js
// jQuery
$.isWindow(obj);
// Нативно
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window;
}
```
+ inArray
Поиск определенного значения в массиве и возвращение его индекса (или -1 если значение не найдено)
```js
// jQuery
$.inArray(item, array);
// Нативно
array.indexOf(item) > -1;
// В нотации ES6
array.includes(item);
```
+ isNumeric
Determine if the argument passed is numerical.
Use `typeof` to decide the type or the `type` example for better accuracy. Определить, является ли переданный аргумент числовым. Используйте `typeof` для определения типа или `type` для большей точности.
```js
// jQuery
$.isNumeric(item);
// Нативно
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
```
+ isFunction
Определить, является ли переданный аргумент функцией(объектом) JavaScript.
```js
// jQuery
$.isFunction(item);
// Нативно
function isFunction(item) {
if (typeof item === 'function') {
return true;
}
var type = Object.prototype.toString.call(item);
return type === '[object Function]' || type === '[object GeneratorFunction]';
}
```
+ isEmptyObject
Проверить, является ли объект пустым (не содержащим перечесляемых свойств)
```js
// jQuery
$.isEmptyObject(obj);
// Нативно
function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}
```
+ isPlainObject
Проверить, является ли объект простым / 'ванильным' (созданным с помощью “{}” или “new Object”)
```js
// jQuery
$.isPlainObject(obj);
// Нативно
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false;
}
if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}
return true;
}
```
+ extend
Объединить содержимое двух или более объектов в новый объект, не изменяя ни один из аргументов.
object.assign является частью ES6 API, также можно использовать [полифилл](https://github.com/ljharb/object.assign).
```js
// jQuery
$.extend({}, object1, object2);
// Нативно
Object.assign({}, object1, object2);
```
+ trim
Убрать символы пробелов из начала и конца строки.
```js
// jQuery
$.trim(string);
// Нативно
string.trim();
```
+ map
Преобразовать все элементы массива или объекта в новый массив.
```js
// jQuery
$.map(array, (value, index) => {
});
// Нативно
array.map((value, index) => {
});
```
+ each
Общая (generic) функция итератора, которую можно использовать для последовательной итерации как по объектам, так и по массивам.
```js
// jQuery
$.each(array, (index, value) => {
});
// Нативно
array.forEach((value, index) => {
});
```
+ grep
Найти элементы массива которые удовлетворяют функции-фильтру.
```js
// jQuery
$.grep(array, (value, index) => {
});
// Нативно
array.filter((value, index) => {
});
```
+ type
Определите внутренний класс JavaScript объекта.
```js
// jQuery
$.type(obj);
// Нативно
function type(item) {
const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase();
}
```
+ merge
Объединить содержимое двух массивов в первый массив.
```js
// jQuery, не удаляя дубликаты
$.merge(array1, array2);
// Нативно, не удаляя дубликаты
function merge(...args) {
return [].concat(...args)
}
// В нотации ES6, не удаляя дубликаты
array1 = [...array1, ...array2]
// Версия с удалением дубликатов
function merge(...args) {
return Array.from(new Set([].concat(...args)))
}
```
+ now
Вернуть текущее время в числовом формате.
```js
// jQuery
$.now();
// Нативно
Date.now();
```
+ proxy
По заданной функции, создает другую такую же, cохраняя контекст.
```js
// jQuery
$.proxy(fn, context);
// Нативно
fn.bind(context);
```
<a name="makeArray"></a>+ makeArray
Конвертирует объекты, похожие на массивы, в массивы JavaScript.
```js
// jQuery
$.makeArray(arrayLike);
// Нативно
Array.prototype.slice.call(arrayLike);
// В нотации ES6: Array.from() метод
Array.from(arrayLike);
// В нотации ES6: используя оператор распространения
[...arrayLike];
```
- [6.2](#6.2) <a name='6.2'></a> Contains
Проверяет, не является ли элемент DOM потомком другого элемента DOM.
```js
// jQuery
$.contains(el, child);
// Нативно
el !== child && el.contains(child);
```
- [6.3](#6.3) <a name='6.3'></a> Globaleval
Исполняет определенный JavaScript код глобально.
```js
// jQuery
$.globaleval(code);
// Нативно
function Globaleval(code) {
const script = document.createElement('script');
script.text = code;
document.head.appendChild(script).parentNode.removeChild(script);
}
// Используем eval, учитывая, что контекст eval текущий, а контекст $.Globaleval глобальный.
eval(code);
```
- [6.4](#6.4) <a name='6.4'></a> parse
+ parseHTML
Разбирает строку в массив узлов DOM.
```js
// jQuery
$.parseHTML(htmlString);
// Нативно
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();
// Устанавливает базовую ссылку для созданного документа, чтобы любые проанализированные элементы с URL-адресами
// основывались на URL-адресе документа.
const base = context.createElement('base');
base.href = document.location.href;
context.head.appendChild(base);
context.body.innerHTML = string;
return context.body.children;
}
```
- [6.5](#6.4) <a name='6.5'></a> exists
+ exists
Проверяет, существует ли элемент в DOM.
```js
// jQuery
if ($('selector').length) {
// exists
}
// Нативно
var element = document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
// exists
}
```
**[⬆ Наверх](#Содержание)**
## Промисы (Promises)
Промисы предоставляют собой удобный способ организации асинхронного кода. У jQuery есть свой способ обработки промисов. Нативный JavaScript реализует тонкий и минимальный API для обработки промисов в соответствии с [Promises/A+](http://promises-aplus.github.io/promises-spec/) спецификацией.
- [7.1](#7.1) <a name='7.1'></a> done, fail, always
`done` вызывается, когда промис разрешен,` fail` вызывается, когда промис отклонен, `always` вызывается, когда промис либо разрешен, либо отклонен.
```js
// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
// Нативно
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
```
- [7.2](#7.2) <a name='7.2'></a> when
`when` используется для обработки нескольких промисов. Он разрешится, когда будут выполнены все промисы, и отклонится, если один из промисов будет отклонен.
```js
// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});
// Нативно
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
```
- [7.3](#7.3) <a name='7.3'></a> Deferred
Отложенный способ создания промисов.
```js
// jQuery
function asyncFunc() {
const defer = new $.Deferred();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);
return defer.promise();
}
// Нативно
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (true) {
resolve('some_value_computed_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}
// Отложенным способом
function defer() {
const deferred = {};
const promise = new Promise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});
deferred.promise = () => {
return promise;
};
return deferred;
}
function asyncFunc() {
const defer = defer();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);
return defer.promise();
}
```
**[⬆ Наверх](#Содержание)**
## Анимации
- [8.1](#8.1) <a name='8.1'></a> Show & Hide
```js
// jQuery
$el.show();
$el.hide();
// Нативно
// За дополнительной информацией о методе show, пройдите по ссылке https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
```
- [8.2](#8.2) <a name='8.2'></a> Toggle
Показать или скрыть элемент.
```js
// jQuery
$el.toggle();
// Нативно
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
el.style.display = 'none';
}
```
- [8.3](#8.3) <a name='8.3'></a> FadeIn & FadeOut
```js
// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);
// Нативный fadeOut (исчезновение)
function fadeOut(el, ms) {
if (ms) {
el.style.transition = `opacity ${ms} ms`;
el.addEventListener(
'transitionend',
function(event) {
el.style.display = 'none';
},
false
);
}
el.style.opacity = '0';
}
// Нативный fadeIn (появление)
function fadeIn(elem, ms) {
elem.style.opacity = 0;
if (ms) {
let opacity = 0;
const timer = setInterval(function() {
opacity += 50 / ms;
if (opacity >= 1) {
clearInterval(timer);
opacity = 1;
}
elem.style.opacity = opacity;
}, 50);
} else {
elem.style.opacity = 1;
}
}
```
- [8.4](#8.4) <a name='8.4'></a> FadeTo
Регулировка непрозрачности элемента.
```js
// jQuery
$el.fadeTo('slow',0.15);
// Нативно
el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds
el.style.opacity = '0.15';
```
- [8.5](#8.5) <a name='8.5'></a> FadeToggle
Отображение или скрытие элемента через изменение его непрозрачности.
```js
// jQuery
$el.fadeToggle();
// Нативно
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
}
```
- [8.6](#8.6) <a name='8.6'></a> SlideUp & SlideDown
```js
// jQuery
$el.slideUp();
$el.slideDown();
// Нативно
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
```
- [8.7](#8.7) <a name='8.7'></a> SlideToggle
Отобразить или скрыть элемент скользящим движением (слайдом).
```js
// jQuery
$el.slideToggle();
// Нативно
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
} else {
el.style.height = '0px';
}
```
- [8.8](#8.8) <a name='8.8'></a> Animate
Perform a custom animation of a set of CSS properties. Применить пользовательский набор свойств анимации CSS.
```js
// jQuery
$el.animate({ params }, speed);
// Нативно
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) => {
el.style[key] = params[key];
});
```
## Альтернативы
* [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Примеры как исполняются частые события, элементы, ajax и тд с ванильным javascript.
* [npm-dom](http://github.com/npm-dom) и [webmodules](http://github.com/webmodules) - Отдельные DOM модули можно найти на NPM
## Поддержка браузеров
![Chrome][chrome-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
gitextract_dzv602xd/
├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE
├── README-es.md
├── README-fr.md
├── README-id.md
├── README-it.md
├── README-ja.md
├── README-kg.md
├── README-my.md
├── README-pl.md
├── README-ru.md
├── README-tr.md
├── README-vi.md
├── README.ko-KR.md
├── README.md
├── README.pt-BR.md
├── README.zh-CN.md
├── README.zh-TW.md
├── karma.conf.js
├── package.json
└── test/
├── README.md
├── css.spec.js
├── dom.spec.js
├── query.spec.js
└── utilities.spec.js
Condensed preview — 27 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (385K chars).
[
{
"path": ".babelrc",
"chars": 37,
"preview": "{\n presets: [\"es2015\", \"stage-0\"]\n}\n"
},
{
"path": ".eslintrc",
"chars": 314,
"preview": "{\n \"extends\": \"eslint-config-airbnb\",\n \"env\": {\n \"browser\": true,\n \"mocha\": true,\n \"node\": true\n },\n \"rules"
},
{
"path": ".gitignore",
"chars": 49,
"preview": ".DS_Store\n*.log\nnode_modules\ncoverage\nlogs\n.idea\n"
},
{
"path": "LICENSE",
"chars": 1075,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015 oneuijs\n\nPermission is hereby granted, free of charge, to any person obtaining"
},
{
"path": "README-es.md",
"chars": 29393,
"preview": "## Tú no necesitas jQuery\n\nEl desarrollo Frontend evoluciona día a día, y los navegadores modernos ya han implementado n"
},
{
"path": "README-fr.md",
"chars": 26747,
"preview": "## Vous n'avez pas besoin de jQuery\n\n\n\nDe nos jours, les environnements frontend évoluent si rapidement que les navigate"
},
{
"path": "README-id.md",
"chars": 14055,
"preview": "## Anda tidak memerlukan jQuery\n\nPerkembangan environment frontend sangatlah pesat, dimana banyak browser sudah mengimpl"
},
{
"path": "README-it.md",
"chars": 14476,
"preview": "## Non hai bisogno di jQuery\n\nIl mondo del Frontend si evolve rapidamente oggigiorno, i browsers moderni hanno gia' impl"
},
{
"path": "README-ja.md",
"chars": 25139,
"preview": "## jQueryは必要ない（You Don't Need jQuery）\r\n\r\n\r\nフロントエンドの開発環境はめまぐるしく進化していて、最近のブラウザでは十分な質、量のDOM/BOM APIが実装されています。もうDOM操作やイベント処理"
},
{
"path": "README-kg.md",
"chars": 16830,
"preview": "## jQuery'ге муктаждыгынар жок\n\n\nБиздин убакта фронт-энд чөйрөсү абдан ылдам өнүгүп жатат, ошонун менен бирге заманбап б"
},
{
"path": "README-my.md",
"chars": 13278,
"preview": "## Anda tidak memerlukan jQuery\n\nMutakhir ini perkembangan dalam persekitaran frontend berlaku begitu pesat sekali. Just"
},
{
"path": "README-pl.md",
"chars": 29400,
"preview": "## Nie Potrzebujesz jQuery\n\nŚrodowiska frontendowe rozwijają się błyskawicznie, nowsze przeglądarki zaimplementowały już"
},
{
"path": "README-ru.md",
"chars": 28279,
"preview": "## Вам не нужен jQuery\n\nВ наше время среда front-end разработки быстро развивается, и современные браузеры достаточно хо"
},
{
"path": "README-tr.md",
"chars": 14931,
"preview": "## jQuery'e İhtiyacınız Yok\n\nÖnyüz ortamları bugünlerde çok hızlı gelişiyor, öyle ki modern tarayıcılar DOM/DOM APİ'lere"
},
{
"path": "README-vi.md",
"chars": 14156,
"preview": "## You (Might) Don't Need jQuery\n\n## Bạn không cần jQuery nữa đâu\n\nNgày nay, môi trường lập trình front-end phát triển r"
},
{
"path": "README.ko-KR.md",
"chars": 29368,
"preview": "## You (Might) Don't Need jQuery\n\n오늘날 프론트엔드 개발 환경은 급격히 진화하고 있고, 모던 브라우저들은 이미 충분히 많은 DOM/BOM API들을 구현했습니다. 우리는 jQuery를 DO"
},
{
"path": "README.md",
"chars": 33643,
"preview": "## You (Might) Don't Need jQuery\n\nFrontend environments evolve rapidly nowadays and modern browsers have already impleme"
},
{
"path": "README.pt-BR.md",
"chars": 14020,
"preview": "## You (Might) Don't Need jQuery\n\nVocê não precisa de jQuery\n---\n\nAmbientes Frontend evoluem rapidamente nos dias de hoj"
},
{
"path": "README.zh-CN.md",
"chars": 25179,
"preview": "## 你也许不需要 jQuery （You (Might) Don't Need jQuery）\n\n前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由"
},
{
"path": "README.zh-TW.md",
"chars": 28427,
"preview": "## You (Might) Don't Need jQuery\n\n當今的前端環境發展迅速，現代瀏覽器已經提供了夠好用的 DOM/BOM API，我們不需要為了 DOM 操作或事件處理而從頭開始學 jQuery。同時，由於 React、An"
},
{
"path": "karma.conf.js",
"chars": 2539,
"preview": "// Karma configuration\n// Generated on Sun Nov 22 2015 22:10:47 GMT+0800 (CST)\nrequire('babel-core/register');\nprocess.e"
},
{
"path": "package.json",
"chars": 1621,
"preview": "{\n \"name\": \"You-Dont-Need-jQuery\",\n \"version\": \"2.0.0\",\n \"description\": \"Examples of how to do query, style, dom, aja"
},
{
"path": "test/README.md",
"chars": 149,
"preview": "# Test cases for all the tips\n\n## Usage\n\nrun all tests once\n```\nnpm run test\n```\n\nrun tests on TDD(Test Driven Developme"
},
{
"path": "test/css.spec.js",
"chars": 23,
"preview": "// test for CSS related"
},
{
"path": "test/dom.spec.js",
"chars": 33,
"preview": "// test for CSS and style related"
},
{
"path": "test/query.spec.js",
"chars": 2094,
"preview": "// tests for Query Selector related\nimport { expect } from 'chai';\nimport $ from 'jquery';\n\ndescribe('query selector', ("
},
{
"path": "test/utilities.spec.js",
"chars": 29,
"preview": "// test for Utilities related"
}
]
About this extraction
This page contains the full source code of the camsong/You-Dont-Need-jQuery GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 27 files (356.7 KB), approximately 114.8k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.