Cred că nu sunt singurul care a început să folosească JavaScript prin jquery. Biblioteca JQuery a fost crucială pentru dezvoltarea în față, a permis dezvoltatorilor să facă aproape tot ceea ce ne-am dorit într-un mod rapid, simplu și fără să vă îngrijorați de browsere. Singurul dezavantajul pe care l-am avut a fost că ar trebui să percepem biblioteca, care nu a fost deosebit de ușoară și care a încetinit povara și utilizarea web-ului în cauză.
datorită dezvoltării „unui păr” JavaScript ( Numit vanilie js, sau JS simplu) acum putem renunța la jQuery și continuă să ne bucurăm de ușurința de utilizare, dar încă la mine, mă costă să iau jquery la vanillajs și este deja mulți ani de blocare a modului jQuery.
Pentru a încerca să amelioreze această schimbare, am colectat una dintre funcții care au folosit deja recursiv pe jquery, pe care le fac asta codul JS este mai curat și asemănător cu mai mult am vrut să îngheț.
i-am pus pe toți (și alții care vor veni) într-un dosar care leagă proiectele mele și astfel mă pot referi Aceste funcții pe tot parcursul proiectului.
<script src="/js/plainJS.js" />
Selectați elementele dom CES trebuie să facem și cu jQuery a fost la fel de simplu ca și utilizarea funcției $. Acum, cu JavaScript, putem folosi toată această putere prin Document.QuerySelector și Document.QuerySelectorall, dar trebuie să scriem multe personaje de fiecare dată când vrem să o folosim. De aceea putem crea o funcție de $ și $ 1 (sau așa cum doriți să o numiți) care vă face mai eficientă.
// 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);}
Exemple:
// 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);
sursă.
Adăugați, ștergeți și verificați clasele
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; }}
Exemple:
var el = document.querySelector('div');if (!hasClass(el, 'foo')){ addClass(el, 'foo');}
Sursa.
Manipulați 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;};
Obțineți poziția
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 }}
Ascunderea sau afișarea elementelor
Exemple:
hide( elem );show( elem, 'block' );toggleVisibility( elem, 'block' );
sursă.
Puneți stiluri CSS la un
function css(el, styles) { for (var property in styles) { el.style = styles; }}
Exemple:
var el = document.querySelector('div');css(el, { background: 'green', display: 'none', 'border-radius': '5px' });
sursă.
Încurajați o proprietate de element
// 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) &amp;amp;amp;amp;lt; 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) &amp;amp;amp;amp;gt; 1 ) { s.opacity = 1; } else { setTimeout(fade, 25); } })();}
Exemple:
iv id = „bd2aefae5b”
sursă.
Ajax Cereri
divid id = „6446fbe9ad”>
exemple:
divid id = „5b9ABD7C23”>
sursă.
meriar două obiecte
function extend(obj, src) { Object.keys(src).forEach(function(key) { obj = src; }); return obj;}
crea, Obțineți și ștergeți cookie-urile
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); }