{"id":27048464,"url":"https://github.com/nefe/You-Dont-Need-jQuery","last_synced_at":"2025-04-05T07:01:50.595Z","repository":{"id":38359954,"uuid":"46622323","full_name":"camsong/You-Dont-Need-jQuery","owner":"camsong","description":"Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.","archived":false,"fork":false,"pushed_at":"2023-04-13T03:37:44.000Z","size":727,"stargazers_count":20314,"open_issues_count":3,"forks_count":1747,"subscribers_count":530,"default_branch":"master","last_synced_at":"2025-02-05T23:11:27.296Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/camsong.png","metadata":{"files":{"readme":"README-es.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-21T16:02:26.000Z","updated_at":"2025-02-05T02:13:46.000Z","dependencies_parsed_at":"2022-07-12T17:27:39.732Z","dependency_job_id":"cb921729-dab1-4fcb-8cde-5816ce9d8083","html_url":"https://github.com/camsong/You-Dont-Need-jQuery","commit_stats":null,"previous_names":["nefe/you-dont-need-jquery","oneuijs/you-dont-need-jquery"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2FYou-Dont-Need-jQuery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2FYou-Dont-Need-jQuery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2FYou-Dont-Need-jQuery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camsong%2FYou-Dont-Need-jQuery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camsong","download_url":"https://codeload.github.com/camsong/You-Dont-Need-jQuery/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299829,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-05T07:01:27.356Z","updated_at":"2025-04-05T07:01:50.490Z","avatar_url":"https://github.com/camsong.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","工具选择"],"sub_categories":["You-Dont-Need"],"readme":"## Tú no necesitas jQuery [![Build Status](https://api.travis-ci.org/nefe/You-Dont-Need-jQuery.svg)](https://travis-ci.org/nefe/You-Dont-Need-jQuery)\n\nEl 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+.\n\n## Tabla de Contenidos\n\n1. [Traducción](#traducción)\n1. [Query Selector](#query-selector)\n1. [CSS \u0026 Estilo](#css--estilo)\n1. [Manipulación DOM](#manipulación-dom)\n1. [Ajax](#ajax)\n1. [Eventos](#eventos)\n1. [Utilidades](#utilidades)\n1. [Promesas](#promesas)\n1. [Animaciones](#animaciones)\n1. [Alternativas](#alternativas)\n1. [Navegadores soportados](#navegadores-soportados)\n\n## Traducción\n\n* [한국어](./README.ko-KR.md)\n* [正體中文](./README.zh-TW.md)\n* [简体中文](./README.zh-CN.md)\n* [Bahasa Melayu](./README-my.md)\n* [Bahasa Indonesia](./README-id.md)\n* [Português(PT-BR)](./README.pt-BR.md)\n* [Tiếng Việt Nam](./README-vi.md)\n* [Español](./README-es.md)\n* [Русский](./README-ru.md)\n* [Кыргызча](./README-kg.md)\n* [Türkçe](./README-tr.md)\n* [Italiano](./README-it.md)\n* [Français](./README-fr.md)\n* [日本語](./README-ja.md)\n* [Polski](./README-pl.md)\n\n## Query Selector\n\nEn lugar de los selectores comunes como clase, id o atributos podemos usar `document.querySelector` o `document.querySelectorAll` como alternativas. Las diferencias radican en:\n* `document.querySelector` devuelve el primer elemento que cumpla con la condición\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) || []);`\n* 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) || []`\n\n\u003e Nota: document.querySelector y document.querySelectorAll son bastante LENTOS, procuree utilizar getElementById, document.getElementsByClassName o document.getElementsByTagName si desea obtener un mejor rendimiento.\n\n- [1.0](#1.0) \u003ca name='1.0'\u003e\u003c/a\u003e Buscar por selector\n\n  ```js\n  // jQuery\n  $('selector');\n\n  // Nativo\n  document.querySelectorAll('selector');\n  ```\n\n- [1.1](#1.1) \u003ca name='1.1'\u003e\u003c/a\u003e Buscar por Clase\n\n  ```js\n  // jQuery\n  $('.class');\n\n  // Nativo\n  document.querySelectorAll('.class');\n\n  // Forma alternativa\n  document.getElementsByClassName('class');\n  ```\n\n- [1.2](#1.2) \u003ca name='1.2'\u003e\u003c/a\u003e Buscar por id\n\n  ```js\n  // jQuery\n  $('#id');\n\n  // Nativo\n  document.querySelector('#id');\n\n  // Forma alternativa\n  document.getElementById('id');\n  ```\n\n- [1.3](#1.3) \u003ca name='1.3'\u003e\u003c/a\u003e Buscar por atributo\n\n  ```js\n  // jQuery\n  $('a[target=_blank]');\n\n  // Nativo\n  document.querySelectorAll('a[target=_blank]');\n  ```\n\n- [1.4](#1.4) \u003ca name='1.4'\u003e\u003c/a\u003e Buscar en descendientes\n\n    ```js\n    // jQuery\n    $el.find('li');\n\n    // Nativo\n    el.querySelectorAll('li');\n    ```\n\n- [1.5](#1.5) \u003ca name='1.5'\u003e\u003c/a\u003e Elementos Hermanos/Previos/Siguientes\n\n  + Elementos hermanos\n\n    ```js\n    // jQuery\n    $el.siblings();\n\n    // Nativo\n    Array.prototype.filter.call(el.parentNode.children, (child) =\u003e\n      child !== el\n    );\n    ```\n\n  + Elementos previos\n\n    ```js\n    // jQuery\n    $el.prev();\n\n    // Nativo\n    el.previousElementSibling;\n    ```\n\n  + Elementos siguientes\n\n    ```js\n    // jQuery\n    $el.next();\n\n    // Nativo\n    el.nextElementSibling;\n    ```\n\n- [1.6](#1.6) \u003ca name='1.6'\u003e\u003c/a\u003e Más cercano\n\n  Retorna el elemento más cercano que coincida con la condición, partiendo desde el nodo actual hasta document.\n\n  ```js\n  // jQuery\n  $el.closest(selector);\n\n  // Nativo - Sólo el último, NO IE\n  el.closest(selector);\n\n  // Nativo - IE10+\n  function closest(el, selector) {\n    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;\n\n    while (el) {\n      if (matchesSelector.call(el, selector)) {\n        return el;\n      } else {\n        el = el.parentElement;\n      }\n    }\n    return null;\n  }\n  ```\n\n- [1.7](#1.7) \u003ca name='1.7'\u003e\u003c/a\u003e Padres hasta\n\n  Obtiene los ancestros de cada elemento en el set actual de elementos que cumplan con la condición, sin incluir el actual\n\n  ```js\n  // jQuery\n  $el.parentsUntil(selector, filter);\n\n  // Nativo\n  function parentsUntil(el, selector, filter) {\n    const result = [];\n    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;\n\n    // Partir desde el elemento padre\n    el = el.parentElement;\n    while (el \u0026\u0026 !matchesSelector.call(el, selector)) {\n      if (!filter) {\n        result.push(el);\n      } else {\n        if (matchesSelector.call(el, filter)) {\n          result.push(el);\n        }\n      }\n      el = el.parentElement;\n    }\n    return result;\n  }\n  ```\n\n- [1.8](#1.8) \u003ca name='1.8'\u003e\u003c/a\u003e Formularios\n\n  + Input/Textarea\n\n    ```js\n    // jQuery\n    $('#my-input').val();\n\n    // Nativo\n    document.querySelector('#my-input').value;\n    ```\n\n  + Obtener el índice de e.currentTarget en `.radio`\n\n    ```js\n    // jQuery\n    $('.radio').index(e.currentTarget);\n\n    // Nativo\n    Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);\n    ```\n\n- [1.9](#1.9) \u003ca name='1.9'\u003e\u003c/a\u003e Contenidos de Iframe\n\n  `$('iframe').contents()` devuelve `contentDocument` para este iframe específico\n\n  + Contenidos de Iframe\n\n    ```js\n    // jQuery\n    $iframe.contents();\n\n    // Nativo\n    iframe.contentDocument;\n    ```\n\n  + Buscar dentro de un Iframe\n\n    ```js\n    // jQuery\n    $iframe.contents().find('.css');\n\n    // Nativo\n    iframe.contentDocument.querySelectorAll('.css');\n    ```\n\n- [1.10](#1.10) \u003ca name='1.10'\u003e\u003c/a\u003e Obtener body\n\n  ```js\n  // jQuery\n  $('body');\n\n  // Nativo\n  document.body;\n  ```\n\n- [1.11](#1.11) \u003ca name='1.11'\u003e\u003c/a\u003e Obtener y establecer atributos\n\n  + Obtener un atributo\n\n    ```js\n    // jQuery\n    $el.attr('foo');\n\n    // Nativo\n    el.getAttribute('foo');\n    ```\n  + Establecer un atributo\n\n    ```js\n    // jQuery, note que esto funciona en memoria sin cambiar el DOM\n    $el.attr('foo', 'bar');\n\n    // Nativo\n    el.setAttribute('foo', 'bar');\n    ```\n\n  + Obtener un atributo `data-`\n\n    ```js\n    // jQuery\n    $el.data('foo');\n\n    // Nativo\n    el.getAttribute('data-foo');\n\n    // Nativo (Utilice `dataset` solamente si necesita dar soporte a IE 11+)\n    el.dataset['foo'];\n    ```\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## CSS \u0026 Estilo\n\n- [2.1](#2.1) \u003ca name='2.1'\u003e\u003c/a\u003e CSS\n\n  + Obtener Estilo\n\n    ```js\n    // jQuery\n    $el.css(\"color\");\n\n    // Nativo\n    // NOTA: Bug conocido, retornará 'auto' si el valor de estilo es 'auto'\n    const win = el.ownerDocument.defaultView;\n\n    // null significa que no retorne pseudo estilos\n    win.getComputedStyle(el, null).color;\n    ```\n\n  + Establecer estilo\n\n    ```js\n    // jQuery\n    $el.css({ color: \"#ff0011\" });\n\n    // Nativo\n    el.style.color = '#ff0011';\n    ```\n\n  + Obtener/Establecer Estilos\n\n    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.\n\n\n  + Agregar clase\n\n    ```js\n    // jQuery\n    $el.addClass(className);\n\n    // Nativo\n    el.classList.add(className);\n    ```\n\n  + Quitar Clase\n\n    ```js\n    // jQuery\n    $el.removeClass(className);\n\n    // Nativo\n    el.classList.remove(className);\n    ```\n\n  + Consultar si tiene clase\n\n    ```js\n    // jQuery\n    $el.hasClass(className);\n\n    // Nativo\n    el.classList.contains(className);\n    ```\n\n  + Toggle class\n\n    ```js\n    // jQuery\n    $el.toggleClass(className);\n\n    // Nativo\n    el.classList.toggle(className);\n    ```\n\n- [2.2](#2.2) \u003ca name='2.2'\u003e\u003c/a\u003e Width \u0026 Height\n\n  Ancho y Alto son teóricamente idénticos. Usaremos el Alto como ejemplo:\n\n  + Alto de Ventana\n\n    ```js\n    // alto de ventana\n    $(window).height();\n\n    // Con scrollbar, se comporta como jQuery\n    window.document.documentElement.clientHeight;\n\n    // Sin scrollbar\n    window.innerHeight;\n    ```\n\n  + Alto de Documento\n\n    ```js\n    // jQuery\n    $(document).height();\n\n    // Native\n    const body = document.body;\n    const html = document.documentElement;\n    const height = Math.max(\n      body.offsetHeight,\n      body.scrollHeight,\n      html.clientHeight,\n      html.offsetHeight,\n      html.scrollHeight\n    );\n    ```\n\n  + Alto de Elemento\n\n    ```js\n    // jQuery\n    $el.height();\n\n    // Nativo\n    function getHeight(el) {\n      const styles = window.getComputedStyle(el);\n      const height = el.offsetHeight;\n      const borderTopWidth = parseFloat(styles.borderTopWidth);\n      const borderBottomWidth = parseFloat(styles.borderBottomWidth);\n      const paddingTop = parseFloat(styles.paddingTop);\n      const paddingBottom = parseFloat(styles.paddingBottom);\n      return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;\n    }\n\n    // Precisión de entero（para `border-box`, es `height - border`; con content-box`, es `height + padding`）\n    el.clientHeight;\n\n    // Precisión de decimal（para `border-box`, es `height`; con `content-box`, es `height + padding + border`）\n    el.getBoundingClientRect().height;\n    ```\n\n- [2.3](#2.3) \u003ca name='2.3'\u003e\u003c/a\u003e Posición y Offset\n\n  + Posición\n\n    Obtiene las coordenadas actuales del elemento, en relación con el padre.\n\n    ```js\n    // jQuery\n    $el.position();\n\n    // Nativo\n    { left: el.offsetLeft, top: el.offsetTop }\n    ```\n\n  + Offset\n\n    Obtiene las coordenadas actuales del elemento, en relación con el documento.\n\n    ```js\n    // jQuery\n    $el.offset();\n\n    // Nativo\n    function getOffset (el) {\n      const box = el.getBoundingClientRect();\n\n      return {\n        top: box.top + window.pageYOffset - document.documentElement.clientTop,\n        left: box.left + window.pageXOffset - document.documentElement.clientLeft\n      }\n    }\n    ```\n\n- [2.4](#2.4) \u003ca name='2.4'\u003e\u003c/a\u003e Posición vertical del scroll\n\n  Obtiene la posición vertical actual de la barra de scroll para el elemento.\n\n  ```js\n  // jQuery\n  $(window).scrollTop();\n\n  // Nativo\n  (document.documentElement \u0026\u0026 document.documentElement.scrollTop) || document.body.scrollTop;\n  ```\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## Manipulación DOM\n\n- [3.1](#3.1) \u003ca name='3.1'\u003e\u003c/a\u003e Eliminar\n\n  Elimina el elemento del DOM\n\n  ```js\n  // jQuery\n  $el.remove();\n\n  // Nativo\n  el.parentNode.removeChild(el);\n  ```\n\n- [3.2](#3.2) \u003ca name='3.2'\u003e\u003c/a\u003e Texto\n\n  + Obtener Texto\n\n    Obtiene los contenidos de texto combinado del elemento, incluyendo sus decendientes.\n\n    ```js\n    // jQuery\n    $el.text();\n\n    // Nativo\n    el.textContent;\n    ```\n\n  + Establecer Texto\n\n    Establece el contenido del elemento al texto especificado\n\n    ```js\n    // jQuery\n    $el.text(string);\n\n    // Nativo\n    el.textContent = string;\n    ```\n\n- [3.3](#3.3) \u003ca name='3.3'\u003e\u003c/a\u003e HTML\n\n  + Obtener HTML\n\n    ```js\n    // jQuery\n    $el.html();\n\n    // Nativo\n    el.innerHTML;\n    ```\n\n  + Establecer HTML\n\n    ```js\n    // jQuery\n    $el.html(htmlString);\n\n    // Nativo\n    el.innerHTML = htmlString;\n    ```\n\n- [3.4](#3.4) \u003ca name='3.4'\u003e\u003c/a\u003e Añadir al final\n\n  Añadir elemento hijo después del último hijo del elemento padre\n\n  ```js\n  // jQuery\n  $el.append('\u003cdiv id=\"container\"\u003eHello World\u003c/div\u003e');\n\n  // Nativo (string de HTML)\n  el.insertAdjacentHTML('beforeend', '\u003cdiv id=\"container\"\u003eHello World\u003c/div\u003e');\n\n  // Nativo (Elemento)\n  el.appendChild(newEl);\n  ```\n\n- [3.5](#3.5) \u003ca name='3.5'\u003e\u003c/a\u003e Añadir al inicio\n\n  ```js\n  // jQuery\n  $el.prepend('\u003cdiv id=\"container\"\u003eHello World\u003c/div\u003e');\n\n  // Nativo (String HTML)\n  el.insertAdjacentHTML('afterbegin', '\u003cdiv id=\"container\"\u003eHello World\u003c/div\u003e');\n\n  // Nativo (Elemento)\n  el.insertBefore(newEl, el.firstChild);\n  ```\n\n- [3.6](#3.6) \u003ca name='3.6'\u003e\u003c/a\u003e Insertar Antes\n\n  Insertar un nuevo nodo antes de los elementos seleccionados\n\n  ```js\n  // jQuery\n  $newEl.insertBefore(selector);\n\n  // Nativo (String HTML)\n  el.insertAdjacentHTML('beforebegin ', '\u003cdiv id=\"container\"\u003eHello World\u003c/div\u003e');\n\n  // Native (Elemento)\n  const el = document.querySelector(selector);\n  if (el.parentNode) {\n    el.parentNode.insertBefore(newEl, el);\n  }\n  ```\n\n- [3.7](#3.7) \u003ca name='3.7'\u003e\u003c/a\u003e Insertar después\n\n  Insertar un nuevo nodo después de los elementos seleccionados\n\n  ```js\n  // jQuery\n  $newEl.insertAfter(selector);\n\n  // Nativo (String HTML)\n  el.insertAdjacentHTML('afterend', '\u003cdiv id=\"container\"\u003eHello World\u003c/div\u003e');\n\n  // Nativo (Elemento)\n  const el = document.querySelector(selector);\n  if (el.parentNode) {\n    el.parentNode.insertBefore(newEl, el.nextSibling);\n  }\n  ```\n\n- [3.8](#3.8) \u003ca name='3.8'\u003e\u003c/a\u003e es\n\n  Retorna `true` si coincide con el selector de la búsqueda\n\n  ```js\n  // jQuery - Nota `is` también funciona con `funciones` o `elementos` que no veremos aquí\n  $el.is(selector);\n\n  // Nativo\n  el.matches(selector);\n  ```\n- [3.9](#3.9) \u003ca name='3.9'\u003e\u003c/a\u003e Clonar\n\n  Crea una copia profunda del elemento\n\n  ```js\n  // jQuery\n  $el.clone();\n\n  // Nativo\n  el.cloneNode();\n\n  // Para hacer copia profunda , establece como parametro `true`\n  ```\n\n- [3.10](#3.10) \u003ca name='3.10'\u003e\u003c/a\u003e Vaciar\n\n  Elimina todos los nodos hijo\n\n  ```js\n  // jQuery\n  $el.empty();\n\n  // Nativo\n  el.innerHTML = '';\n  ```\n\n- [3.11](#3.11) \u003ca name='3.11'\u003e\u003c/a\u003e Envolver\n\n  Crea una estructura HTML alrededor de cada elemento\n\n  ```js\n  // jQuery\n  $('.inner').wrap('\u003cdiv class=\"wrapper\"\u003e\u003c/div\u003e');\n\n  // Nativo\n  Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) =\u003e {\n    const wrapper = document.createElement('div');\n    wrapper.className = 'wrapper';\n    el.parentNode.insertBefore(wrapper, el);\n    el.parentNode.removeChild(el);\n    wrapper.appendChild(el);\n  });\n  ```\n\n- [3.12](#3.12) \u003ca name='3.12'\u003e\u003c/a\u003e Desenvolver\n\n  Elimina los padres de una serie de elementos seleccionados del DOM\n\n  ```js\n  // jQuery\n  $('.inner').unwrap();\n\n  // Nativo\n  Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) =\u003e {\n    Array.prototype.forEach.call(el.childNodes, (child) =\u003e {\n      el.parentNode.insertBefore(child, el);\n    });\n    el.parentNode.removeChild(el);\n  });\n  ```\n\n- [3.13](#3.13) \u003ca name='3.13'\u003e\u003c/a\u003e Remplazar con\n\n  Remplaza cada elemento en una serie de elementos seleccionados con nuevo contenido.\n\n  ```js\n  // jQuery\n  $('.inner').replaceWith('\u003cdiv class=\"outer\"\u003e\u003c/div\u003e');\n\n  // Nativo\n  Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) =\u003e {\n    const outer = document.createElement('div');\n    outer.className = 'outer';\n    el.parentNode.insertBefore(outer, el);\n    el.parentNode.removeChild(el);\n  });\n  ```\n\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## Ajax\n\n+[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.\n\nEs 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.\n\n- [4.1](#4.1) \u003ca name='4.1'\u003e\u003c/a\u003e Carga datos desde un servidor y coloca el HTML regresado en el elemento seleccionado.\n\n  ```js\n  // jQuery\n  $(selector).load(url, completeCallback)\n\n  // Nativo\n  fetch(url).then(data =\u003e data.text()).then(data =\u003e {\n    document.querySelector(selector).innerHTML = data\n  }).then(completeCallback)\n  ```\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## Eventos\n\nPara un reemplazo completo con namespace y delegación, utilizar https://github.com/oneuijs/oui-dom-events\n\n- [5.0](#5.0) \u003ca name='5.0'\u003e\u003c/a\u003e Document ready by `DOMContentLoaded`\n\n  ```js\n  // jQuery\n  $(document).ready(eventHandler);\n\n  // Nativo\n  // Verifica que DOMContentLoaded ya se ha completado\n  if (document.readyState !== 'loading') {\n    eventHandler();\n  } else {\n    document.addEventListener('DOMContentLoaded', eventHandler);\n  }\n  ```\n\n- [5.1](#5.1) \u003ca name='5.1'\u003e\u003c/a\u003e Asignar un evento con \"on\"\n\n  ```js\n  // jQuery\n  $el.on(eventName, eventHandler);\n\n  // Nativo\n  el.addEventListener(eventName, eventHandler);\n  ```\n\n- [5.2](#5.2) \u003ca name='5.2'\u003e\u003c/a\u003e Desasignar un evento con \"off\"\n\n  ```js\n  // jQuery\n  $el.off(eventName, eventHandler);\n\n  // Nativo\n  el.removeEventListener(eventName, eventHandler);\n  ```\n\n- [5.3](#5.3) \u003ca name='5.3'\u003e\u003c/a\u003e Trigger\n\n  ```js\n  // jQuery\n  $(el).trigger('custom-event', {key1: 'data'});\n\n  // Nativo\n  if (window.CustomEvent) {\n    const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});\n  } else {\n    const event = document.createEvent('CustomEvent');\n    event.initCustomEvent('custom-event', true, true, {key1: 'data'});\n  }\n\n  el.dispatchEvent(event);\n  ```\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## Utilidades\n\nLa 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.\n\n- [6.1](#6.1) \u003ca name='6.1'\u003e\u003c/a\u003e Utilidades Básicas\n\n  + isArray\n\n  Determina si el lemento es un vector(array).\n\n  ```js\n  // jQuery\n  $.isArray(array);\n\n  // Nativo\n  Array.isArray(array);\n  ```\n\n  + isWindow\n\n  Determina si el argumento en una ventana(window).\n\n  ```js\n  // jQuery\n  $.isWindow(obj);\n\n  // Nativo\n  function isWindow(obj) {\n    return obj !== null \u0026\u0026 obj !== undefined \u0026\u0026 obj === obj.window;\n  }\n  ```\n\n  + inArray\n\n  Busca un valor específico en el array y retorna su índice (o -1 si no lo encuentra).\n\n  ```js\n  // jQuery\n  $.inArray(item, array);\n\n  // Nativo\n  array.indexOf(item) \u003e -1;\n\n  // ES6\n  array.includes(item);\n  ```\n\n  + isNumeric\n\n  Determina si el argumento es un número.\n  Utiliza `typeof` para decidir el tipo del `type` ejemplo para mayor precisión.\n\n  ```js\n  // jQuery\n  $.isNumeric(item);\n\n  // Nativo\n  function isNumeric(value) {\n    var type = typeof value;\n\n    return (type === 'number' || type === 'string') \u0026\u0026 !Number.isNaN(value - Number.parseFloat(value));\n  }\n  ```\n\n  + isFunction\n\n  Determina si el argumento es objecto función de Javascript.\n\n  ```js\n  // jQuery\n  $.isFunction(item);\n\n  // Nativo\n  function isFunction(item) {\n    if (typeof item === 'function') {\n      return true;\n    }\n    var type = Object.prototype.toString(item);\n    return type === '[object Function]' || type === '[object GeneratorFunction]';\n  }\n  ```\n\n  + isEmptyObject\n\n  Verifica que un objeto esté vacío(contiene propiedades no enumerables).\n\n  ```js\n  // jQuery\n  $.isEmptyObject(obj);\n\n  // Nativo\n  function isEmptyObject(obj) {\n    return Object.keys(obj).length === 0;\n  }\n  ```\n\n  + isPlainObject\n\n  Verifica si un objeto es un objeto plano (creado utilizando “{}” o “new Object”).\n\n  ```js\n  // jQuery\n  $.isPlainObject(obj);\n\n  // Nativo\n  function isPlainObject(obj) {\n    if (typeof (obj) !== 'object' || obj.nodeType || obj !== null \u0026\u0026 obj !== undefined \u0026\u0026 obj === obj.window) {\n      return false;\n    }\n\n    if (obj.constructor \u0026\u0026\n        !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {\n      return false;\n    }\n\n    return true;\n  }\n  ```\n\n  + extend\n\n  Combina los contenidos de dos o mas objetos en el primer objeto.\n  object.assign es una API de ES6, puedes utilizar [polyfill](https://github.com/ljharb/object.assign) también.\n\n  ```js\n  // jQuery\n  $.extend({}, defaultOpts, opts);\n\n  // Nativo\n  Object.assign({}, defaultOpts, opts);\n  ```\n\n  + trim\n\n  Elimina los espacios en blanco del inicio y final de un string.\n\n  ```js\n  // jQuery\n  $.trim(string);\n\n  // Nativo\n  string.trim();\n  ```\n\n  + map\n\n  Traslada todos los elementos en un arreglo u objeto a un nuevo arreglo de elementos.\n\n  ```js\n  // jQuery\n  $.map(array, (value, index) =\u003e {\n  });\n\n  // Nativo\n  array.map((value, index) =\u003e {\n  });\n  ```\n\n  + each\n\n  Una función genérica de iteración, que puede ser utilizada de manera similar para iterar en objetos o arreglos.\n\n  ```js\n  // jQuery\n  $.each(array, (index, value) =\u003e {\n  });\n\n  // Nativo\n  array.forEach((value, index) =\u003e {\n  });\n  ```\n\n  + grep\n\n  Encuentra los elementos de un arreglo que satisfacen una función filtro.\n\n  ```js\n  // jQuery\n  $.grep(array, (value, index) =\u003e {\n  });\n\n  // Nativo\n  array.filter((value, index) =\u003e {\n  });\n  ```\n\n  + type\n\n  Determina la clase [Class]  interna de Javascript de un objeto.\n\n  ```js\n  // jQuery\n  $.type(obj);\n\n  // Nativo\n  function type(item) {\n    const reTypeOf = /(?:^\\[object\\s(.*?)\\]$)/;\n    return Object.prototype.toString.call(item)\n      .replace(reTypeOf, '$1')\n      .toLowerCase();\n  }\n  ```\n\n  + merge\n\n  Combina los contenidos de dos o mas arreglos en el primero.\n\n  ```js\n  // jQuery\n  $.merge(array1, array2);\n\n  // Nativo\n  // Pero la función concat no elimina elementos duplicados.\n  function merge(...args) {\n    return [].concat(...args)\n  }\n  ```\n\n  + now\n\n  Retorna un número que representa la hora actual.\n\n  ```js\n  // jQuery\n  $.now();\n\n  // Native\n  Date.now();\n  ```\n\n  + proxy\n\n  Toma una función y regresa una nueva que siempre tendrá un contexto particular.\n\n  ```js\n  // jQuery\n  $.proxy(fn, context);\n\n  // Nativo\n  fn.bind(context);\n  ```\n\n  + makeArray\n\n  Convierte un objeto similar a un arreglo en un verdarero arreglo de Javascript.\n\n  ```js\n  // jQuery\n  $.makeArray(arrayLike);\n\n  // Nativo\n  Array.prototype.slice.call(arrayLike);\n\n  // ES6\n  Array.from(arrayLike);\n  ```\n\n- [6.2](#6.2) \u003ca name='6.2'\u003e\u003c/a\u003e Contenedores\n\n  Verifica si un elemento del DOM es descendiente de otro elemento del DOM.\n\n  ```js\n  // jQuery\n  $.contains(el, child);\n\n  // Nativo\n  el !== child \u0026\u0026 el.contains(child);\n  ```\n\n- [6.3](#6.3) \u003ca name='6.3'\u003e\u003c/a\u003e Globaleval\n\n  Ejecuta el mismo código Javascript de manera global.\n\n  ```js\n  // jQuery\n  $.globaleval(code);\n\n  // Nativo\n  function Globaleval(code) {\n    const script = document.createElement('script');\n    script.text = code;\n\n    document.head.appendChild(script).parentNode.removeChild(script);\n  }\n\n  // Utilzando eval, pero el contexto de eval es el actual, el contexto de $.Globaleval es global.\n  eval(code);\n  ```\n\n- [6.4](#6.4) \u003ca name='6.4'\u003e\u003c/a\u003e parse\n\n  + parseHTML\n\n  Parsea un string ien un arreglo de nodos DOM.\n\n  ```js\n  // jQuery\n  $.parseHTML(htmlString);\n\n  // Nativo\n  function parseHTML(string) {\n    const context = document.implementation.createHTMLDocument();\n\n    // Se establece la base href para el documento creado, así todos los elementos parseados con URLs\n    // estarán basados en ña URL del documento\n    const base = context.createElement('base');\n    base.href = document.location.href;\n    context.head.appendChild(base);\n\n    context.body.innerHTML = string;\n    return context.body.children;\n  }\n  ```\n\n  + parseJSON\n\n  Toma un string de JSON *bien formado* y retorna el valor resultante de Javascript.\n\n  ```js\n  // jQuery\n  $.parseJSON(str);\n\n  // Native\n  JSON.parse(str);\n  ```\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## Promesas\n\nUna 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/).\n\n- [7.1](#7.1) \u003ca name='7.1'\u003e\u003c/a\u003e done, fail, always\n\n  `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.\n\n  ```js\n  // jQuery\n  $promise.done(doneCallback).fail(failCallback).always(alwaysCallback)\n\n  // Nativo\n  promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)\n  ```\n\n- [7.2](#7.2) \u003ca name='7.2'\u003e\u003c/a\u003e when\n\n  `when` se utiliza para manipular múltiples promesas. Se resolverá cuando todas las promesas sean resueltas y se rechazará si alguna es rechazada.\n\n  ```js\n  // jQuery\n  $.when($promise1, $promise2).done((promise1Result, promise2Result) =\u003e {\n  });\n\n  // Nativo\n  Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] =\u003e {});\n  ```\n\n- [7.3](#7.3) \u003ca name='7.3'\u003e\u003c/a\u003e Deferred\n\n  Deferred es una manera de crear promesas.\n\n  ```js\n  // jQuery\n  function asyncFunc() {\n    const defer = new $.Deferred();\n    setTimeout(() =\u003e {\n      if(true) {\n        defer.resolve('some_value_computed_asynchronously');\n      } else {\n        defer.reject('failed');\n      }\n    }, 1000);\n\n    return defer.promise();\n  }\n\n  // Nativo\n  function asyncFunc() {\n    return new Promise((resolve, reject) =\u003e {\n      setTimeout(() =\u003e {\n        if (true) {\n          resolve('some_value_computed_asynchronously');\n        } else {\n          reject('failed');\n        }\n      }, 1000);\n    });\n  }\n\n  // Deferred\n  function defer() {\n    const deferred = {};\n    const promise = new Promise((resolve, reject) =\u003e {\n      deferred.resolve = resolve;\n      deferred.reject = reject;\n    });\n\n    deferred.promise = () =\u003e {\n      return promise;\n    };\n\n    return deferred;\n  }\n\n  function asyncFunc() {\n    const defer = defer();\n    setTimeout(() =\u003e {\n      if(true) {\n        defer.resolve('some_value_computed_asynchronously');\n      } else {\n        defer.reject('failed');\n      }\n    }, 1000);\n\n    return defer.promise();\n  }\n  ```\n\n**[⬆ volver al inicio](#tabla-de-contenidos)**\n\n## Animaciones\n\n- [8.1](#8.1) \u003ca name='8.1'\u003e\u003c/a\u003e Mostrar y ocultar\n\n  ```js\n  // jQuery\n  $el.show();\n  $el.hide();\n\n  // Native\n  // Para mas detalles acerca del método show, refierase a https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363\n  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';\n  el.style.display = 'none';\n  ```\n\n- [8.2](#8.2) \u003ca name='8.2'\u003e\u003c/a\u003e Toggle\n\n  Muestra u oculta el elemento\n\n  ```js\n  // jQuery\n  $el.toggle();\n\n  // Nativo\n  if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {\n    el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';\n  } else {\n    el.style.display = 'none';\n  }\n  ```\n\n- [8.3](#8.3) \u003ca name='8.3'\u003e\u003c/a\u003e FadeIn \u0026 FadeOut\n\n  ```js\n  // jQuery\n  $el.fadeIn(3000);\n  $el.fadeOut(3000);\n\n  // Nativo\n  el.style.transition = 'opacity 3s';\n  // fadeIn\n  el.style.opacity = '1';\n  // fadeOut\n  el.style.opacity = '0';\n  ```\n\n- [8.4](#8.4) \u003ca name='8.4'\u003e\u003c/a\u003e FadeTo\n\n  Ajusta la opacidad del elemento\n\n  ```js\n  // jQuery\n  $el.fadeTo('slow',0.15);\n  // Nativo\n  el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds\n  el.style.opacity = '0.15';\n  ```\n\n- [8.5](#8.5) \u003ca name='8.5'\u003e\u003c/a\u003e FadeToggle\n\n  Muestra u oculta el emento animando su opacidad.\n\n  ```js\n  // jQuery\n  $el.fadeToggle();\n\n  // Nativo\n  el.style.transition = 'opacity 3s';\n  const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);\n  if (opacity === '1') {\n    el.style.opacity = '0';\n  } else {\n    el.style.opacity = '1';\n  }\n  ```\n\n- [8.6](#8.6) \u003ca name='8.6'\u003e\u003c/a\u003e SlideUp \u0026 SlideDown\n\n  ```js\n  // jQuery\n  $el.slideUp();\n  $el.slideDown();\n\n  // Nativo\n  const originHeight = '100px';\n  el.style.transition = 'height 3s';\n  // slideUp\n  el.style.height = '0px';\n  // slideDown\n  el.style.height = originHeight;\n  ```\n\n- [8.7](#8.7) \u003ca name='8.7'\u003e\u003c/a\u003e SlideToggle\n\n  Muestra u oculta el elemento con una animación de deslizamiento.\n\n  ```js\n  // jQuery\n  $el.slideToggle();\n\n  // Nativo\n  const originHeight = '100px';\n  el.style.transition = 'height 3s';\n  const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);\n  if (parseInt(height, 10) === 0) {\n    el.style.height = originHeight;\n  }\n  else {\n   el.style.height = '0px';\n  }\n  ```\n\n- [8.8](#8.8) \u003ca name='8.8'\u003e\u003c/a\u003e Animate\n\n  Realiza una animación personalizada de un conjunto de propiedades CSS.\n\n  ```js\n  // jQuery\n  $el.animate({ params }, speed);\n\n  // Nativo\n  el.style.transition = 'all ' + speed;\n  Object.keys(params).forEach((key) =\u003e {\n    el.style[key] = params[key];\n  });\n  ```\n\n## Alternativas\n\n* [Quizá no necesites jQuery](http://youmightnotneedjquery.com/) - Ejemplos de como hacer un evento común, un elemento, ajax, etc, con Javascript puro.\n* [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.\n\n## Navegadores soportados\n\n![Chrome][chrome-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]\n--- | --- | --- | --- | --- |\nÚltima ✔ | Última ✔ | 10+ ✔ | Última ✔ | 6.1+ ✔ |\n\n# Licencia\n\nMIT\n\n[chrome-image]: https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\n[firefox-image]: https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\n[ie-image]: https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png\n[opera-image]: https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png\n[safari-image]: https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnefe%2FYou-Dont-Need-jQuery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnefe%2FYou-Dont-Need-jQuery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnefe%2FYou-Dont-Need-jQuery/lists"}