Koodi

10 JQuery -leikkaukset Jokaisen suunnittelijan tulisi tietää

jQuerya käytetään tuhansien ja tuhansien verkkosivujen avulla. Se on yksi tavallisimmista kirjastoista, jotka voidaan lisätä sivuiksi, ja tekee DOM-manipuloinnista snap.

Tietysti jQueryn suosio on sen yksinkertaisuus. Vaikuttaa siltä, ​​että voimme tehdä melkein mitä haluamme tämän tehokkaan kirjaston avulla.

Kaikille meille avoinna olevista vaihtoehdoista meillä on joitain katkelmia, joista meillä on tapana palata aika ajoin. Tänään haluaisin antaa sinulle 10 kappaletta, jotka kaikki, gurujen aloittelijat, käyttävät aina uudelleen.

1) Takaisin alkuun -näppäin

// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
Back to top

Kuten voit nähdä animaatio- ja scrollTop- toimintojen käyttämisessä jQueryssä , emme tarvitse lisäosaa, jotta voisimme luoda yksinkertaisen vierityksen yläanimaatioon .

Muuttamalla scrollTop- arvoa voimme muuttaa missä haluamme vierityspalkin laskeutumaan. Minun tapauksessani käytin 0: n arvoa, koska haluan sen siirtyvän sivun yläosaan, mutta jos halusin 100px: n kompensoinnin, voisin vain tyypin 100px toiminnossa.

Joten kaikki, mitä todella teemme, on animoitava asiakirjaamme koko 800 ms: n ajan, kunnes se kääntyy aina dokumentin kärkeen.

2) Tarkista, onko kuvia ladattu

$(‘img’).load(function() {
console.log(‘image load successful’);
});

Joskus sinun on tarkistettava, ovatko kuvat latautuneet, jotta voit jatkaa käsikirjoituksia, tämä kolmen rivin jQuery-koodinpätkä voi tehdä sen sinulle helposti.

Voit myös tarkistaa, onko jokin tietty kuva ladattu korvaamalla img-tunniste ID: llä tai luokalla.

3) Korjaa rikkinäiset kuvat automaattisesti

$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});

Joskus meillä on aikoja, kun olemme rikki kuva linkkejä verkkosivuillamme ja korvaaminen yksi kerrallaan ei ole helppoa, joten lisäämällä tämä yksinkertainen koodi voi säästää paljon päänsärkyä.

Vaikka sinulla ei olisi vioittuneita linkkejä lisäämällä tämä ei aiheuta mitään haittaa.

4) Vaihda luokka hoverissa

$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);

Haluamme yleensä vaihtaa napsautettavan elementin visuaalisen sivun, kun käyttäjä hypelee yli ja tämä jQuery-koodinpätkä tekee juuri tämän, se lisää luokan elementtiin, kun käyttäjä liikkuu ja kun käyttäjä pysäyttää sen, poistaa luokan. sinun tarvitsee vain lisätä tarvittavat tyylit CSS-tiedostoosi.

5) Syöttökenttien poistaminen käytöstä

$('input[type="submit"]').attr("disabled", true);

Joskus haluat, että lomakkeen lähetyspainike tai jokin sen tekstinsyöttöistä poistetaan käytöstä, kunnes käyttäjä on suorittanut tietyn toimenpiteen (tarkistamalla "Olen lukenut ehdot" -valintaruudun) ja tämä rivi suoritetaan että; se lisää invalidti- attribuutin syötteesi, jotta voit ottaa sen käyttöön, kun haluat.

Tehdäksesi kaikki sinun tarvitsee vain suorittaa parametrilla poistetun parametrin removeAttr-toiminto:

$('input[type="submit"]').removeAttr("disabled”);

6) Lopeta linkkien lataaminen

$(‘a.no-link').click(function(e){
e.preventDefault();
});

Joskus emme halua, että linkit siirtyvät tiettyyn sivulle tai lataamme sen uudelleen, haluamme, että ne tekevät jotain muuta, kuten laukaista jokin muu käsikirjoitus ja siinä tapauksessa tämä koodikappale tekee tempun estääkseen oletustoiminnon.

7) Vaihda haalistuminen / liukumäki

// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});

// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});

Diat ja haalistumiset ovat jotain, jota käytämme runsaasti animaatioissamme jQueryn avulla, joskus haluamme vain näyttää elementin, kun napsautamme jotain ja että fadeIn ja slideDown-menetelmät ovat täydellisiä, mutta jos haluamme, että elementti näkyy ensimmäisellä napsautuksella ja sitten katoavat toisella tällä koodilla toimii vain hieno.

8) Yksinkertainen harmonikka

// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});

Lisäämällä tämä käsikirjoitus, joka todella tarvitset sivullasi, on välttämätön HTML-tiedosto, jotta tämä toimisi.

Kuten näet tässä koodinpätkässä, suljin ensin kaikki paneelimme harmonikassamme ja napsautamme napsautustapahtumaa tekemällä sisällön, joka on linkitetty kyseiseen otsikkolevyvalintaan, ja kaikki muut liukuvat ylös. Se on yksinkertainen menetelmä nopealle harmonikalle.

9) Tee kaksi divs samaa korkeutta

$(‘.div').css('min-height', $(‘.main-div').height());

Joskus haluat, että kahdella divilla on sama korkeus riippumatta siitä, mitä sisältöä heillä on, tämä pieni pilkku mahdollistaa juuri tämän; tässä tapauksessa se asettaa min-height, mikä tarkoittaa, että se voi olla isompi kuin main div, mutta ei koskaan pienempi. Tämä on hyvä muuraus kuin verkkosivuilla.

10) Zebra riisuttu järjestämättömät luettelot

$('li:odd').css('background', '#E8E8E8’);

Tämän pienen koodinpätkän avulla voit luoda helposti zebra-raidoituja järjestämättömiä luetteloita, joten määrität taustan, joka määritellään jokaisessa parittomassa listan kohteessa, jotta voit sijoittaa oletusarvon tasaisille CSS-tiedostolle. Voit lisätä tämän katkelman mihin tahansa tyyppiseen merkintään, taulukoista tavallisiin div-tiedostoihin, mikä tahansa haluat olla seepra riisuttu.

johtopäätös

Nämä ovat jQuery-koodin palasia, joita löydän itsestäni uudestaan ​​ja uudestaan ​​projektissani. Toivottavasti tallennat tämän sivun kirjanmerkiksi ja tulevat takaisin aina, kun tarvitset yhden näistä katkelmista.

Mitä jQuery-katkelmia luotat? Onko sinulla parempaa koodia näille skenaarioille? Kerro meille kommentit.

Esitetty kuva / pienoiskuva, hyödyllinen kuva kautta Shutterstock.

jQuery jquery-katkelmat aloittelija jquery oppia jquery hyödyllinen jquery