Kode

10 JQuery uddrag hver designer skal vide

jQuery bruges på tusindvis af tusindvis af websider. Det er et af de mest almindelige biblioteker at indsætte i sider, og det gør DOM-manipulationen en snap.

Selvfølgelig er en del af jQuery's popularitet dens enkelhed. Det lader til, at vi kan gøre næsten alt, hvad vi kan lide med dette kraftfulde bibliotek.

For alle de muligheder der er åbne for os, er der nogle uddrag, vi har tendens til at komme tilbage til gang på gang. I dag vil jeg gerne give dig 10 uddrag, som alle nybegyndere til guruer vil bruge gang på gang.

1) Tilbage til toppen knap

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

//Create an anchor tag
Back to top

Som du kan se ved hjælp af animerede og scrollTop funktioner i jQuery behøver vi ikke et plugin for at skabe en simpel rulle til top animation.

Ved at ændre scrollTop- værdien kan vi ændre, hvor vi vil have rullebjælken til at lande, i mit tilfælde har jeg brugt en værdi på 0, fordi jeg vil have det til toppen øverst på vores side, men hvis jeg ville have en forskydning på 100px, kunne jeg bare skriv 100px i funktionen.

Så alt, hvad vi virkelig gør, er at animere kroppen i vores dokument i løbet af 800ms, indtil det ruller hele vejen til toppen af ​​dokumentet.

2) Kontrollerer, om billederne er indlæst

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

Nogle gange skal du kontrollere, om dine billeder er fuldt indlæst for at kunne fortsætte med dine scripts. Denne tre linje jQuery uddrag kan gøre det for dig nemt.

Du kan også kontrollere om et bestemt billede er indlæst ved at erstatte img-taggen med et ID eller en klasse.

3) Fastgør brudte billeder automatisk

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

Lejlighedsvis har vi tidspunkter, når vi har brudte billedforbindelser på vores hjemmeside, og det er ikke let at erstatte dem en efter en, så at tilføje dette enkle stykke kode kan spare dig for meget hovedpine.

Selv hvis du ikke har nogen ødelagte links tilføjer dette ikke gør nogen skade.

4) Skift klasse på sværv

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

Vi vil normalt ændre visningen af ​​et klikbart element på vores side, når brugeren svæver over, og dette jQuery-uddrag gør det netop, det tilføjer en klasse til dit element, når brugeren svæver og når brugeren stopper det, fjerner han klassen, så alt du skal gøre er at tilføje de nødvendige stilarter i din CSS-fil.

5) Deaktivering af inputfelter

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

Af og til kan du have, at afsendelsesknappen til en formular eller endda en af ​​dens tekstindtastninger skal deaktiveres, indtil brugeren har udført en bestemt handling (se afkrydsningsfeltet "Jeg har læst vilkårene" for eksempel), og denne linie kode opnår at; det tilføjer deaktiverede attributter til din indtastning, så du kan aktivere det, når du vil.

For at gøre det er alt, hvad du skal gøre, køre funktionen removeAttr på input med deaktiveret som parameter:

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

6) Stop læsning af links

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

Nogle gange vil vi ikke have links til at gå til en bestemt side eller endda genindlæse den, vi vil have dem til at gøre noget andet som at udløse et andet script, og i så fald vil dette stykke kode gøre det trick at forhindre standard handling.

7) Skift fade / dias

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

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

Slides and Fades er noget vi bruger meget i vores animationer ved hjælp af jQuery, nogle gange vil vi blot vise et element, når vi klikker på noget, og for det er fadeIn og slideDown metoderne perfekte, men hvis vi vil have elementet til at vises på det første klik og Så forsvinder i andet, vil dette stykke kode fungere fint.

8) Enkelt accordeon

// 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;
});

Ved at tilføje dette script alt hvad du virkelig har brug for at på din side er den nødvendige HTML, få det til at fungere.

Som du kan se i dette stykke, lukkede jeg for første gang alle panelerne i vores accordeon og derefter på klikhændelsen lavede jeg det indhold, der er knyttet til den pågældende skiftekontakt, og alle de andre glider op. Det er en simpel metode til et hurtigt accordeon.

9) Lav to divs i samme højde

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

Nogle gange vil du have to divs til at have samme højde, uanset hvad indhold de har i dem, gør dette lille stykke bare det; i dette tilfælde sætter den minhøjden, hvilket betyder at den kan være større end den største div, men aldrig mindre. Dette er fantastisk til murværk som hjemmesider.

10) Zebra strippet uordnet liste

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

Med denne lille uddrag kan du nemt oprette zebra stripede uordnede lister. Dette placerer baggrunden du definerer på hvert ulige listepost, så du kan placere standardværdien for de lige i din CSS-fil. Du kan føje dette kodestykke til enhver form for markering, fra tabeller til almindelige divs, alt hvad du vil være zebra strippet.

Konklusion

Dette er de stykker af jQuery-kode, jeg finder mig selv ved hjælp af igen og igen i mine projekter. Jeg håber du bogmærker denne side og kommer tilbage, når du har brug for en af ​​disse uddrag.

Hvilke jQuery uddrag er du afhængige af? Har du bedre kode for disse scenarier? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, nyttigt billede via Shutterstock.

jquery jquery uddrag nybegynder jquery lære jquery nyttig jquery