10 hasznos jQuery függvény
Ha már belekóstoltál a jQuery világába, és úgy gondolod ez az ami neked való, akkor itt az ideje, hogy egy szinttel feljebb lépj. Most 20 függvényt nézünk át, amelyeket talán még nem használtál!
1. after() / before
Van úgy, hogy be szeretnél illeszteni egy új elemet a DOM-ba, azonban nem áll rndelkezésre id amire hivatkozni tudnál. Ilyenkor jön jól ez a két függvény, segítségükkel közvetlenül egy elem elé vagy mögé tudsz beszúrni, így az új elem a régi sibling-je / ikertestvére lesz.
1. 2. | $('#child').after($('<p />')).text('Ez lesz #child ikertestvére.')); $('#child').before($('<p />')).text('Ez szintén, csak #child elé kerül, nem pedig utána.')); |
Ugyanezt egy másik módon is meg tudod oldani, insertAfter és insertBefor segítségével.
1. | $('<p>#child ikertesója leszek</p>').insertAfter($('#child')); |
2. change()
Ez egy esemény kezelő, mint a click() vagy a hover(). Textarea-ra, input mezőkre, selectekre használható, és akkor fog elsülni, ha az elem értéke megváltozik. Hasznos validációkor, mert nem hívódik meg akkor mikor bele kattintunk az elembe, vagy pedig félre kattintunk belőle.
1. 2. 3. 4. 5. | $('input[type=text]').change(function () { switch (this.id) { /* valamilyen validációs kód */ } }); |
3. eq()
Ha egy elemeket tartalmazó tömbön belül konkrét elemet keresel, és az indexét átadod az eq() függvénynek, visszakapod a keresett elemet. Ha negatív értéket adsz meg paraméterként, a tömbben visszafele fog keresni.
1. 2. 3. | var ps = $('p'); console.log(ps.length); // logs 3; ps.eq(1).addClass('uj_class'); // a második elem class-ához hozzáadja az új class-t. |
Selectorként is használhatod az :eq() kifejezést, ezzel az előbbi példa a következő képpen nézne ki:
1. | $('p:eq(1)').addClass('uj_class'); |
4. grep()
Egy tömb elemei között tudunk szűrni a függvény segítségével. Első paraméterként a tömböt adjuk át neki, másodikként a szűrő függvényt. A szűrő függvény 2 paramétert vár: egy elemet a tömbből, és az indexét. Elvégez egy összehasonlítást, majd visszatér igaz vagy hamis értékkel. Alapértemezettként minden elem ami true-val tér vissza meg lesz tartva. Harmadik, opcionális paraméterként adhatsz egy igazat, így invertálod a működést, és csak azok az elemek maradnak meg amik hamis értékkel térnek vissza.
1. 2. 3. 4. 5. 6. 7. 8. 9. | var nums = '1,2,3,4,5,6,7,8,9,10'.split(','); nums = $.grep(nums, function(num, index) { // num = aktuális elem értéke // index = aktuális elm indexe return num > 5; // booleant ad vissza }); console.log(nums) // 6,7,8,9,10 |
5. map()
A map() egy függvényt vár paraméterként. A függvény futásának eredménye fogja helyettesíteni azokat az elemeket amikre futtatuk a map()-ot
1. 2. 3. | $('ul#nav li a').map(function() { return $(this).attr('title'); }); // a visszatérési értékek a title atribútumok értékei |
6. Pseudo-selectorok
Sizzle a neve a CSS selector motornak ami a jQuery-ben működik. Segítségével könnyebben tudunk elemeket kiszűrni a DOM-ból.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. | $(':animated'); // éppen animált elemeket adja vissza $(':contains(en)'); // visszaad minden eleme ami tartalmazza a szöveget 'en' $(':empty'); // visszaadja az összes olyan elemet aminek nincs gyereke vagy szövege $(':parent'); // visszaad minden elemet ami rendelkezik gyerekkel vagy szöveggel $('li:even'); // adott elemfajtából minden másodikat adja vissza $('li:odd'); // adott elemfajtából a páratlanokat adja vissza $(':header'); // a header elemeket adja vissza $('li:gt(4)'); // visszaad minden elemet aminek az indexe nagyobb mint az adott szám /0-tól kezdve/ $('li:lt(4)'); // visszaad minden elemet aminek az indexe kisebb mint az adott szám $(':only-child'); // visszaad minden elemet ami egyke |
7. isArray() / isEmptyObject() / isFunction()
Van hogy meg akarunk bizonyosodni arról, hogy a paramtérként kapott változó megfelelő típusú e.
1. 2. 3. | $.isArray([1, 2, 3]); // igazat ad vissza $.isEmptyObject({}); // igazat ad vissza $.isFunction(function () { /****/ }); // igazat ad vissza |
8. replaceAll() / replaceWith()
Ha DOM elemeket szeretnél kicserélni valami másra, azt a következő képpen kell tenni. Meghívhatjuk a replaceAll() függvényt olyan elemen amit létrehoztunk, paraméterként pedig egy selectort adunk ami rászűr a lecserélni kívánt elemekre. A példából érthetőbb lesz:
1. | $('<span class="fixed">A hiba ki lett javítva</span>').replaceAll('.error'); |
A replaceWith() ugyanezt csinálja, csak megcseréli a paraméter és az elem helyét:
1. | $('.error').replaceWith('<span class="fixed">A hiba ki lett javítva</span>'); |
9. serialize() / serializeArray()
A serialize() függvény segítségével egy form mezőinek értékeit stringben kaphatjuk vissza.
HTML
1. 2. 3. 4. | <form><input type="hidden" name="phpMyAdmin" value="da56dea1e0f8990b85cea0a498c5ae43" /> <input type="text" name="name" value="John Doe" /> <input type="text" name="url" value="http://www.example.com" /> </form> |
JavaScript
1. | console.log($('form').serialize()); // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com |
A serializeArray() segítségével a form értékeit egy tömbbe kapjuk vissza
1. 2. | console.log($('form').serializeArray()); # // logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ] |
10. siblings()
Ennek a segítségével az adott elemmel egy szinten lévő elemeket kapjuk vissza.
1. 2. 3. | <div> . . . </div> <p> . . . </p> <span> . . . </span> |
1. 2. | console.log($('form').serializeArray()); # // logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ] |
Végszó
Sokban megkönnyítik ezek a függvények a programozást, érdemes használni őket. Sok sikert.
