mq(selector/callback/objekt) mq(function(){ var element = mq('nav article a'); console.log( element ); //Vypíše element(y) var css3 = mq('html body > header div.col-md-3:nth-child(3) a'); }); myQuery(function( mySelector ){ //Pri načitani dokumentu sa zavola funkcia, v ktorej parameter bude myQuery selektor var element = mySelector('a'); console.log(element); }); /* * Zakladne selektory : myQuery, mq */ -funkcia mq() zavolá myQuery, môže obsahovať parameter s funkciou ktorá sa spustí pri načitani dokumentu, alebo selektor pri ktorom funkcia vráti vybraný element. Pri vloženi elementu/objektu do mq() bude daný objekt prototypovaný na myQuery. Selektor podporuje #id, .class, element + vnáranie (div span a...) a CSS3 Selektor
find(selector) var acka = mq('div').find('a'); console.log(acka); //Vypiše všetky a elementy vo všetkych div elementoch -funkcia find() vyhľada všetky elementy v danom elemente.
not(selector) var divka = mq('div').not('.auto'); //Vyberie všetky div elementy okrem toho ktorý ma class .auto var divka = mq('div').not('#lietadlo'); //Vyberie všetky div elementy okrem toho ktorý ma id #lietadlo var divka = mq('div').child().not('span'); //Vyberie všetky deti zo všetkych div elementov okrem dieťaťa typu "span" -funkcia not() vynecha všetky nechcene elementy.
each(callback) , mq.each(object, callback) //Prechadzanie elementov var acka = mq('div').find('a'); acka.each(function(index, element){ //Prebehne všetky a elementy a vykona pre každý danu funkciu var a = this; console.log(a); //Vypiše dane a-čko, ktoré už je prototypované na myQuery v this }); //Prechadzanie objektu var object = { 1 : { 'meno' : 'Marek', 'heslo' : 'tralalala' }, 2 : { 'meno' : 'Juro', 'heslo' : 12345 } } mq.each(object, function(index, key, object){ //... }) -funkcia each() prebehne všetky elementy a vykonáva pre každý zavolanu funkciu.
attr(selector, value) var element = mq('#element'); element.attr('href', 'www.google.sk') //Zapíše do elementu atribút href s hodnotou google... var href = element.attr('href') //Vypíše atribút href z daného elementu console.log(href); -funkcia attr() uloži alebo vyberie atribút pre dany element/y.
prop(objekt/selektor, názov objektu) mq('nav').prop({ 'height' : '10px', 'width' : '10px' }, 'style'); //je to iste ako: mq('nav')[0].style.height = '10px'; mq('nav')[0].style.width = '10px'; //Vracia hodnotu height z objektu style mq('nav').prop('height', 'style') -funkcia prop() uloži do objektu daneho elementu danu hodnotu. Ak miesto objektu bude vloženy názov objektu tak funkcia vrati hodnotu daneho objektu.
parent(multiple) mq('nav').parent(); //Vráti rodiča z prvého vybraného nav elementu mq('nav').parent(true); //Vráti rodičov zo všetkych vybraných nav elementov -funkcia parent() vracia rodiča daneho elementu
child(index/multiple) mq('nav').child(); //Vráti všetky deti z prvého vybranného nav elementu mq('nav').child(3); //Vráti tretie dieťa v prvého vybranného nav elementu nav('nav').childs(true) //Vráti všetky deti zo všetkych vybranných nav elementov -funkcia child() vracia deti daneho elementu, pri vloženi indexu dieťaťa bude vratene dieťa v danom poradí.
slice(index) mq('a').slice(0, 3); //Vrati prvý druhý a tretí element z celkového počtu elementov -funkcia slice() vracia všetky elementy v danom intervale elementov.
eq(index) mq('a').eq(3); //Vráti tretí "a" element zo všetkých vybraných "a" elementov mq('a').eq(-1); //Vráti posledný "a" element zo všetkých vybraných "a" elementov -funkcia eq() vracia element zo všetkých vybraných elementov z daným poradovím umiestnením.
index(index) mq('div .class2').index(); //Vrati poradie z deťoch daneho elementu ".class2" v rodiči mq('div a').index(3); //Vrati tretí element z rodiča daneho lementu mq('div a').index(-1); //Vráti posledný element z rodiča daneho elementu. mq('div a').index('last'); //Vráti posledný element z rodiča daneho elementu. -funkcia index() pracuje s rodičom a vybera elementy v danom rodiči podľa poradového čísla. Ak nie je vložene poradie elementu tak bude vrátena hodnota na akom poradi sa nachádza dany element v rodiči.
pos(index) mq('div .class2').pos(2); //Element ktorý je o dva elementy ďalej od daneho elementu mq('div .class2').pos(-2); //Element ktorý je o dva elementy za daným elementu -funkcia pos() vybera element ktorý je vzdialeny o poradie vloženého indexu od daneho elementu.
first() mq('div .class2').first(); //Vybera prvý element v danom rodiči. -funkcia first() vybera prvý element z rodiča daneho elementu.
last() mq('div .class2').last(); //Vybera posledný element v danom rodiči -funkcia last() vybera posledný element z rodiča daneho elementu.
next(index) mq('div .class2').next(); //Vyberie element za daným elementom mq('div .class2').next(2); //Vyberie element ktory je vzdialeny o 2 elementy za danym elementom -funkcia next() vybera element element za daným elementom
prev(index) mq('div .class2').prev(); //Vyberie element pred daným elementom mq('div .class2').prev(2); //Vyberie element ktory je vzdialeny o 2 elementy pred danym elementom -funkcia prev() vybera element element pred daným elementom
remove() mq('nav a').prev(); //Vymaže všetky "a" elementy v danom elemente -funkcia remove() slúži na mazanie elementov.
inParent(selector) var parent = mq('.class1').inParent('nav'); //Ak sa dany element ".class1" nachádza v rodiči "nav" tak funkcia vrati daneho rodiča if (parent.length==1) return true; else return false; -funkcia inParent() vracia true alebo, false ak sa dany element nachádza vo vybranom rodiči, alebo v prípade, že je druhý parameter true, tak funkcia vracia rovno daneho rodiča.
isElement(selector) mq('.class1').isElement('div'); //Ak je dany elementt "div" tak funkcia vracia true, ak nie tak false -funkcia isElement() vracia true, alebo false podľa toho či je dany typ elementu zhodný s daným parametrom.
hasClass(class) mq('.auto').hasClass('auto'); //Ak ma dany element class auto, tak vracia true, ak nema tak false. -funkcia hasClass() vracia true, alebo false podľa toho či je element obsahuje dany class.
hasId(id) mq('#auto').hasId('auto'); //Ak dany element obsahuje id s hodnotou "auto", tak vracia true, ak nie tak false. -funkcia hasId() vracia true, alebo false podľa toho či je element obsahuje dané id.
addClass(class) mq('#element').addClass('auto'); //Prida do daneho elementu class "auto" -funkcia addClass() pridáva do elementu class.
removeClass(class) mq('#element').removeClass('auto'); //Zmaže z daneho elementu class "auto" -funkcia removeClass() maže z elementu class.
toggleClass(class) mq('#element').toggleClass('auto'); //Ak dany element obsahuje class, tak bude zmazany, no ak neobsahuje tak bude pridaný. -funkcia toggleClass() maže, alebo pridava class podľa toho či ho už ten element obsahuje.
css(object) mq('#element').css({ height : 10, width : '15px', left : 5 }); //Zadefinuje elementu css hodnoty ktore su v objekte -funkcia css() pridava do objektu css hodnoty.
scrollTop() mq(document).scrollTop(); //Vrati na akej Y pozicii sa nachádza okno mq('#element').scrollTop() //Vráti na akej pozicií sa nachádza dany element; -funkcia scrollTo() vráti poziciu elemenu pri skrolovani, alebo vrati poziciu skrollu.
scrollTo(object/positionTop, duration/callback, callback) mq(document).scrollTop( mq('.box'), 1000 ); //Za 1 sekundu sa odskroluje stránka k elementu ".box" mq(document).scrollTop(500, 300) //Stranka bude odskrolovaná na 500px zhora v podobe 300ms -funkcia scrollTo() odskroluje stránku na určitu polohu
scrollTo(object/positionTop, duration/callback, callback) mq(document).scrollTop( mq('.box'), 1000 ); //Za 1 sekundu sa odskroluje stránka k elementu ".box" mq(document).scrollTop(500, 300) //Stranka bude odskrolovaná na 500px zhora v podobe 300ms -funkcia scrollTo() odskroluje stránku na určitu polohu
scrollPosition() var position = mq('div#ahoj').scrollPosition(); //Vrati skrolovaciu poziciu k rodiču elementa position.top //pozicia z hora position.left //pozicia z ľava //Vrati pozíciu medzi daneho elementu v body var position1 = mq('div#ahoj').scrollPosition(document.body); //Vrati pozíciu medzi daneho elementu v html var position2 = mq('div#ahoj').scrollPosition(mq('html')); -funkcia scrollPosition() vracia poziciu elementu
position() var position = mq('div#ahoj').position(); //Vrati poziciu k rodiču elementa position.top //pozicia z hora position.left //pozicia z ľava -funkcia position() vracia poziciu elementu
delay(callback, duration, onceTime) mq('#element').delay(function(){ //Tento script sa vykoná s neskorením jednej sekundy }, 1000); //1000 ms for (var i=0;i<10;i++){ mq('#element').delay(function(){ //Tento script sa vykoná s neskorením jednej sekundy ale iba raz }, 1000, true); //ak je tretí parameter true, tak sa vždy spustí iba posledný delay. Čize ak sa zavolá 10 delayov v jednej sekunde, nevykonajú sa 10 krat ale iba posledný. } -funkcia delay() skryje element.
toggleText() mq('#element').toggleText('a', 'b', 'c'); //nastavi hodnotu a mq('#element').toggleText('a', 'b', 'c'); //nastavi hodnotu b mq('#element').toggleText('a', 'b', 'c'); //nastavi hodnotu c mq('#element').toggleText('a', 'b', 'c'); //nastavi hodnotu a -funkcia toggleText() postupne mení hodnoty innerHTML elementu od prvého argumentu po posledný a následne dookola.
toggleVal() mq('#element').toggleVal('a', 'b', 'c'); //nastavi hodnotu a mq('#element').toggleVal('a', 'b', 'c'); //nastavi hodnotu b mq('#element').toggleVal('a', 'b', 'c'); //nastavi hodnotu c mq('#element').toggleVal('a', 'b', 'c'); //nastavi hodnotu a -funkcia toggleVal() postupne mení hodnoty value elementu od prvého argumentu po posledný a následne dookola.
toggle() mq('#element').toggle(); //Zobrazí, alebo skryje dany element -funkcia toggle() zobrazuje, alebo skrýva element podľa toho či už je zobrazený alebo nie.
animate(duration, callback/animationType, animationType) mq('#element').animate({ height : 100, width: 500, left: 5 }, 2000, function(){ //Všetky css parametre, ktoré su v objekte budu vyanimované v podobe 2000ms }); mq('#element').animate({ height : 100, width: 500, left: 5 }, 2000, function(){ //Všetky css parametre, ktoré su v objekte budu vyanimované v podobe 2000ms + bounce animácia }, 'bounce'); -funkcia animate() slúži na vyanimovanie css parametrov v danom časovom úseku Zoznam animácií: linear, sine, cosine, tan, wobble, circle, pulsate, expo, loop, bounce, swing (default), swingTo, swingToFrom
fadeIn(duration, callback/animationType, animationType) mq('#element').fadeIn(1000); //Zobrazí element aj s animaciou, v čase 1 sekundy mq('#element').fadeIn(1000, 'swingToFrom'); //Zobrazí element aj s animaciou, v čase 1 sekundy, s typom animacie mq('#id').fadeIn(500, function(){ //Toto sa vykona keď sa dany element zobrazi }); mq('#id').fadeIn(500, function(){ //... }, 'linear'); -funkcia fadeIn() zobrazuje element s animáciou v danom časovom úseku. Pre Zoznam animácií kliknite tu.
fadeOut(duration, callback/animationType, animationType) mq('#element').fadeOut(1000); //Skryje element aj s animaciou, v čase 1 sekundy mq('#element').fadeOut(1000, 'circ'); // + linear mq('#id').fadeOut(500, function(){ //Toto sa vykona keď sa dany element skryje }); -funkcia fadeOut() skrýva element s animáciou v danom časovom úseku Pre Zoznam animácií kliknite tu.
fadeToggle(duration, callback/animationType, animationType) mq('#element').fadeToggle(1000); //Skryje alebo zobrazi element podľa toho či už je zobrazeny v danom časovom úseku. mq('#element').fadeToggle(1000, 'bounce'); // + bounce mq('#id').fadeTogge(500, function(){ //Toto sa vykona keď sa dany element skryje/zobrazi }); -funkcia fadeToggle() skrýva, alebo zobrazuje element s animáciou v danom časovom úseku. Pre Zoznam animácií kliknite tu.
slideUp(duration, callback/animationType, animationType) mq('#element').slideUp(1000); //Zasunie element aj s animaciou, v čase 1 sekundy mq('#element').slideUp(1000, 'swingToFrom'); //Zasunie element aj s animaciou, v čase 1 sekundy, s typom animacie mq('#id').slideUp(500, function(){ //Toto sa vykona keď sa dany element zasunie }); mq('#id').slideUp(500, function(){ //... }, 'linear'); -funkcia slideUp() zasuva element s animáciou v danom časovom úseku. Pre Zoznam animácií kliknite tu.
slideDown(duration, callback/animationType, animationType) mq('#element').slideDown(1000); //Vysunie element aj s animaciou, v čase 1 sekundy mq('#element').slideDown(1000, 'circ'); // + linear mq('#id').slideDown(500, function(){ //Toto sa vykona keď sa dany element vysunie }); -funkcia slideDown() vysunie element s animáciou v danom časovom úseku Pre Zoznam animácií kliknite tu.
slideToggle(duration, callback/animationType, animationType) mq('#element').slideToggle(1000); //Vysunie alebo zasunie element podľa toho či už je zobrazeny v danom časovom úseku. mq('#element').slideToggle(1000, 'bounce'); // + bounce mq('#id').fadeTogge(500, function(){ //Toto sa vykona keď sa dany element vysunie/zasunie }); -funkcia slideToggle() zasúva, alebo vysúva element s animáciou v danom časovom úseku. Pre Zoznam animácií kliknite tu.
click(callback, removeEvent) mq('a').click(function(){ this.fadeOut(); return false; //Zakaže presmerovanie }); //Po kliknuti na "a" element sa dany element skryje. mq('#id').click(function(){ this.fadeOut(); return false; }, true); //Po kliknuty sa dany element skryje, ale kliknutie plati len raz, pretože je druhy parameter true. mq('a').click(); //Vytvori falošný click event -funkcia click() vytvara event onclick, a zavola danu funkciu ak sa tento event vykona. Ak je druhý parameter true, tak sa dany event po vykonani automaticky zmaže.
submit(callback) mq('form').submit(function(){ alert("Formulár sa odoslal..."); return false; //Zakaže presmerovanie }); //Po odoslani formulára sa vykona dana funkcia mq('form').submit() //Vytvori falošny submit event -funkcia submit() je fukncia ktorá sa používa pri formulároch, kde pri odoslani vytvara event onsubmit, a zavola danu funkciu ak sa tento event vykona.
on(event, callback/element, callback mq('a').on('click', function(e){ //Vytvori event onclick console.log(e); }); mq('select').on('change', function(e){ //Vytvori event onchange var value = this.val(); console.log(value); //Vyberie danu hodnotu zo selektu }); mq('body').on('click', '.class', function(){ //Vytvori sa event pre kliknutie na body, pri ktorom sa callback spusti len pri kliknuti na dany element. }); -funkcia on() vytvara eventlistenery pre dany element, alebo pre rodiča v ktorom sa dany element môže, alebo nemusí nachadzať. Zoznam listenerov: http://www.w3schools.com/jsref/dom_obj_event.asp
off(event, callback/element) var mojEvent = function(e){ //Po vykonani dany event vymaže this.off(); } //Vytvori event onclick var a = mq('a').on('click', mojEvent); //Okamžite vymaže event z daneho elementu a.off('click', mojEvent); -funkcia off() sa postará o vymazanie eventu z daneho elementu.
html(string) mq('#class').html('<div>Toto je môj nový element!</div>'); //V elemente ".class" bude zmeneny obsah html na danu hodnotu. mq('#class').html(); //Vyberie html z daneho elementu -funkcia html() vklada html obsah do daneho elementu, ak nie je vloženy obsah tak funkcia vráti obsah elementu.
val(string) mq('input').val('hodnota'); //V inpute sa zmeni hodnota na vloženy parameter mq('input').val(); //Vráti hodnotu z daneho inputu -funkcia val() vklada hodnotu do inputu, alebo ju vracia, podľa vloženého parametra.
focus() mq('input').focus() //Označi dany element -funkcia focus() slúži na označenie daneho elementu.
clone() var mq('.class').clone(); //Element bude odklonovaný -funkcia clone() vytvara presný klon elementu.
merge() mq('div').merge('a'); //K vybraným "div" elementom prida všetky "a" elementy var divs = mq('div'); mq('a').merge(divs); //K všetkym vybraným "a" elementom, prida už vybrane "div" elementy -funkcia merge() prida už do vybraných elementov cez myquery ďalšie lementy, alebo ulúči dva myQuery objekty.
before(element/string) mq('p').before('<div>Ahoj Svet!</div>'); //Pred element p sa vlozi dany element z parametra var element = mq('.class'); mq('p').before(element); //pred element p sa vlozi element z parametrea vo forme objektu -funkcia before() vklada obsah, alebo element pred dany element.
after(element/string) mq('p').after('<div>Ahoj Svet!</div>'); //Za element p sa vlozi dany element z parametra var element = mq('.class'); mq('p').after(element); //Za element p sa vlozi element z parametrea vo forme objektu -funkcia after() vklada obsah, alebo element za dany element.
append(element/string) mq('body').append('<div>Ahoj Svet!</div>'); //Na koniec daneho elementu sa vložy element alebo obsah ktorý bol vloženy do parametra. var element = mq('.class'); mq('body').append(element); //Na koniec elementu vloži ďalší už existujúci element; -funkcia append() vklada obsah, alebo element na koniec daneho elementu.
prepend(element/string) mq('body').prepend('<div>Ahoj Svet!</div>'); //Na začiatok daneho elementu sa vložy element alebo obsah ktorý bol vloženy do parametra. var element = mq('.class'); mq('body').prepend(element); //Na začiatok elementu vloži ďalší už existujúci element; -funkcia prepend() vklada obsah, alebo element na začiatok daneho elementu.
sendForm(action, callback) mq('form').submit(function(){ //Jednoduchý callback this.sendForm('/adresa/', function(e){ //Tato funkcia spracuje a odošle celý formular cez ajax var html = e.response; console.log(e); }); //Callback v podobe objektu this.sendForm('/adresa/', { success : function(e) { }, progress : function(e) { console.log(e+'%') }, // Vráti na koľko % je formulár odoslany, výhodne pri veľkom prenose dát. error : function(e){ //Vráti chybu pri requeste } }); }); -funkcia sendForm() Sa postara o rýchle a jednoduche spracovanie celeho formulára vratane súborov, a všetko zabezpečí za Vás, po odoslani bude vrateny výsledok zo servera. 1. Adresa môze zostať aj prázdna a formular bude odoslany na adresu na ktorej sa práve nachádza. 2. Funkcia automaticky rozhoduje či sa jedna o GET, alebo POST podľa toho ako ja parameter nastavený vo formulári. (Default je GET)
mq.ajax(action, data/callback, callback, properties) //POST - bez súborov mq.ajax('/adresa/', { 'meno' : 'Jan Novák', 'heslo' : 12345 }, function(e){ var html = e.response; console.log(response); }); //POST so súbormi mq.ajax('adresa', { 'files' : [file1, file2, file3], 'datum' : 'xx.xx.xx' }, { success : function(e) { }, progress : function(e) { console.log(e+'%') }, // Vráti na koľko % je formulár odoslany, výhodne pri veľkom prenose dát. error : function(e){ //Vráti chybu pri requeste } }); //GET mq.ajax('/adresa/?value=1&meno=Marek', function(e){ console.log(e); }, null, { withCredentials : true, //Nastavi špecialné parametre ajax requestu }); -funkcia ajax() sa postara o jednoduchy requiest pri ktorom automaticky rozhodne či sa jedno a GET, alebo POST podľa toho či su vložene dáta.
mq.merge(object/array, object/array, length) mq.merge({ a : 'a', 'b' : 'b' }, { c : 'c', 'd' : 'd' }); // Vráti { a : 'a', 'b' : 'b', c : 'c', 'd' : 'd' } mq.merge({ a : 'a', 'b' : 'b' }, { c : 'c', 'd' : 'd' }, true); // Vráti {a: 'a', b: 'b', c: 'c', d: 'd', length: 4} mq.merge(['a', 'b'], ['c', 'd']) // Vráti ['a', 'b', 'c', 'd'] -funkcia mq.merge() zlúči polia do jedneheho poľa, alebo zlúčuje objekty. Ak sa jedna o objekt, a treti parameter length bude true, tak v objekte bude vratena hodnota dlžky objektu.
mq.browser var browser = mq.browser; browser.name; //Vráti nazov browseru browser.version; //Vráti verziu browseru, ak sa jedna o Internet Explorer -objekt mq.browser() slúži na jednoduche rozpoznanie prowseru
mq.parseJSON mq.parseJSON('json format...') //Vyparsuje string do objektu -objekt mq.parseJSON() slúži na prevedenie JSON stringy do objektu. Ak bol bložený do parametra zly formát, funkcia sa postara o vrátenie prazdneho objektu miesto chyby
mq.is.email(email) mq.is.email('email@email.com') //Vraťi true mq.is.email('emal\/.$.com') //vrati false mq.is.email('ahoj.sk') //false -funkcia mq.is.email vracia true, alebo false, podľa toho či ja hodnota vo formate emailu.
mq.is.numeric(number) mq.is.numeric(5) //true mq.is.numeric('dada') //false mq.is.numeric(0) //true -funkcia mq.is.numeric vracia true, alebo false, podľa toho či je hodnota vo forme čísla.
mq.is.object(object) mq.is.object({}) //true mq.is.object(document.getElementsById('id')) //false mq.is.object(0) //false -funkcia mq.is.object vracia true, alebo false, podľa toho či je hodnota vo forme objektu, funkcia je vhodne pre staršie browsery ktore nemusia vraciať správny typeof.
Tvorba vlastných funkcií (pluginov) mq.fn.tancuj = function(text){ return this.each(function(){ //Prebehňu sa všetky elementy pre ktore sa vykona dana funkcia this.fadeOut(1000, function(){ this.fadeIn(1000); }); this.html('Tancujeeem!'+text); }); } mq('a').tancuj('Teraz'); //Funkcia sa zavola -Nová funkcia sa vytvara pomocou mq.fn.nazov, ktorá bude platiť pre celý objekt myQuery.