Funções alternativas básicas para viajar de jQuery para Javascript

Eu acho que não sou o único que começou a usar o JavaScript através do javory. A biblioteca JQuery tem sido crucial para o desenvolvimento na frente, permitiu que os desenvolvedores fizessem quase tudo o que queríamos de maneira rápida e simples e sem se preocupar com os navegadores. A única desvantagem que eu tinha era que devemos cobrar a biblioteca, o que não era particularmente leve, e que desacelerou o fardo e o uso da web em questão.

Graças ao desenvolvimento de javascript “um cabelo” Chamada de baunilha JS, ou lisa JS) agora podemos dispensar com jQuery e continuar desfrutando da facilidade de uso, mas ainda para mim, está me custando tomar JQuery para Vanillajs, e já é muitos anos trancando o modo jquery.

Para aliviar essa alteração, colecionei uma das funções que já usadas recursivamente no jQuery, que eles fazem isso Código JS é mais limpo e assemelhando-se um pouco mais que eu queria congelar.

Eu coloquei todos eles (e outros que virão) em um arquivo que links em meus projetos, e para que eu possa me referir a Estas funções durante todo o projeto.

<script src="/js/plainJS.js" />

Selecione Dom Elements

Esta é uma das tarefas que mais CES, devemos fazer, e com o jQuery era tão simples quanto usar a função $. Agora, com JavaScript, podemos usar todo esse poder através do documento.queryselector e document.queryselectorall, mas devemos escrever muitos caracteres toda vez que quisermos usá-lo. É por isso que podemos criar uma função $ e $ 1 (ou como você deseja chamá-lo) que torna você mais eficiente.

// Seleccionar una lista de elementos por medio de un selector CSS. El contexto es opcionalfunction $(selector, context) { return (context || document).querySelectorAll(selector);}// Seleccionar el primer elemento que tenga el selector CSS. El contexto es opcional:function $1(selector, context) { return (context || document).querySelector(selector);}

exemplos:

// Seleccionar todos los elementos '.bar' dentro de contenedores '.foo'var elems = $('.foo .bar');// ejemplo con contextovar container = $1('.foo');// seleccionar elementos '.bar' dentro del contenedorvar elems = $('.bar', container);

adicionar, excluir e verificar as classes

function hasClass(el, className) { return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className);}function addClasses(el, classesArray) { if ( classesArray instanceof Array ) { for ( var i = 0; i < classesArray.length; i++ ) { addClass(el, classesArray); } } else { addClass(el, classesArray); } } function addClass(el, className) { if ( el ) { if ( el.tagName ) { doAddClass(el, className); } else if ( el.length >= 1 ) { for ( var i = 0; i < el.length; i++ ) { doAddClass(el, className); } } }}function removeClasses(el, classesArray) { if ( classesArray instanceof Array ) { for ( var i = 0; i < classesArray.length; i++ ) { removeClass(el, classesArray); } } else { removeClass(el, classesArray); } } function removeClass(el, className) { if ( el ) { if ( el.tagName ) { doRemoveClass(el, className); } else if ( el.length >= 1 ) { for ( var i = 0; i < el.length; i++ ) { doRemoveClass(el, className); } } }}function doAddClass(el, className) { if (el.classList) { el.classList.add(className); } else if (!hasClass(el, className)) { el.className += ' ' + className; }}function doRemoveClass(el, className) { if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), '');}function toggleClass(el, className) { if ( hasClass(el, className) ) { removeClass(el, className); return false; } else { addClass(el, className); return true; }}

Exemplos:

var el = document.querySelector('div');if (!hasClass(el, 'foo')){ addClass(el, 'foo');}

fonte.

Lidar com o dom

function appendTo(wrap, newElem) { wrap.insertAdjacentHTML( 'beforeend', newElem);}function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);}// document.getElementById("my-element").remove();Element.prototype.remove = function() { this.parentElement.removeChild(this);};// document.getElementsByClassName("my-elements").remove();NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for(var i = this.length - 1; i >= 0; i--) { if(this && this.parentElement) { this.parentElement.removeChild(this); } }};// know if parents has a selector// var parents = getParents(elem, '.some-class');// var allParents = getParents(elem.parentNode);var getParents = function ( elem, selector ) {// Element.matches() polyfillif (!Element.prototype.matches) {Element.prototype.matches =Element.prototype.matchesSelector ||Element.prototype.mozMatchesSelector ||Element.prototype.msMatchesSelector ||Element.prototype.oMatchesSelector ||Element.prototype.webkitMatchesSelector ||function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),i = matches.length;while (--i >= 0 && matches.item(i) !== this) {}return i > -1;};}// Setup parents arrayvar parents = ;// Get matching parent elementsfor ( ; elem && elem !== document; elem = elem.parentNode ) {// Add matching parents to arrayif ( selector ) {if ( elem.matches( selector ) ) {parents.push( elem );}} else {parents.push( elem );}}return parents;};

obter posição

function offset(el, parentElem) { var rect = el.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.getElementById(parentElem).scrollTop || document.documentElement.scrollTop; return { top: rect.top + scrollTop, left: rect.left + scrollLeft }}

ocultar ou exibir itens

exemplos:

hide( elem );show( elem, 'block' );toggleVisibility( elem, 'block' );

Coloque estilos de CSS para um

Exemplos:

var el = document.querySelector('div');css(el, { background: 'green', display: 'none', 'border-radius': '5px' });

Incentive uma propriedade de elemento

// fade an element from the current state to full opacity in "duration" msfunction fadeOut(el, duration) { var s = el.style, step = 25/(duration || 300); s.opacity = s.opacity || 1; (function fade() { if ( ( s.opacity -= step) < 0 ) { s.display = "none"; } else { setTimeout(fade, 25); } })(); } // fade out an element from the current state to full transparency in "duration" ms // display is the display style the element is assigned after the animation is done function fadeIn(el, duration, display) { var s = el.style, step = 25/(duration || 300); s.opacity = s.opacity || 0; s.display = display || "block"; (function fade() { if ( ( s.opacity = parseFloat(s.opacity)+step) > 1 ) { s.opacity = 1; } else { setTimeout(fade, 25); } })();}

Exemplos:

fadeOut(elem, 500);fadeIn(elem, 500);

solicitações ajax

function getAjax(url, success) { var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText); }; //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send(); return xhr;}function getCORS(url, success) { var xhr = new XMLHttpRequest(); if (!('withCredentials' in xhr)) xhr = new XDomainRequest(); // fix IE8/9 xhr.open('GET', url); xhr.onload = success; xhr.send(); return xhr;}function postAjax(url, data, success) { // example request // postAjax('http://foo.bar/', 'p1=1&p2=Hello+World', function(data){ console.log(data); }); // example request with data object // postAjax('http://foo.bar/', { p1: 1, p2: 'Hello World' }, function(data){ console.log(data); }); var params = typeof data == 'string' ? data : Object.keys(data).map( function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data) } ).join('&'); var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open('POST', url); xhr.onreadystatechange = function() { if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); } }; //xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(params); return xhr;}

Exemplos:

getAjax('http://foo.bar/?p1=1&p2=Hello+World', function(respone){ var jsonData = JSON.parse(respone); console.log(respone); console.log(jsonData);});// example requestpostAjax('http://foo.bar/', 'p1=1&p2=Hello+World', function(data){ console.log(data); });// example request with data objectpostAjax('http://foo.bar/', { p1: 1, p2: 'Hello World' }, function(data){ console.log(data); });

fonte.

Mergulhe dois objetos

function extend(obj, src) { Object.keys(src).forEach(function(key) { obj = src; }); return obj;}

criar, Obter e excluir cookies

function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=(*)(;|$)'); return v ? v : null;}function setCookie(name, value, days) { var d = new Date(); d.setTime(d.getTime() + 24*60*60*1000*days); document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();}function deleteCookie(name) { setCookie(name, '', -1); }