Maken van een website allen over u met Visual Studio (HTML, CSS, JQUERY) (7 / 8 stap)

Stap 7: Toevoegen Javascript (Jquery)

U kunt uw site nog mooier maken door het interactieve. We gaan dit doen door toevoeging van Jquery. JQuery is niet een taal, maar het is een bibliotheek geschreven in Javascript. Jquery's officiële website kunt u bezoeken door op de onderstaande link te klikken.

JQuery

U hoeft niet om het te downloaden omdat we kunt koppelen met behulp van code.

Laten we beginnen met het toevoegen van een acript link naar jquery. Voeg dit onder de link tag gebruikten we de laatste stap.

 <script> </script> 

Voeg vervolgens script-tags net onder het ding dat u zojuist hebt toegevoegd:

 <input type="submit" class="inputMail"> 

Binnen deze tags zijn we gonna toevoegen van onze javascript-script. We moeten eerst onze input type update: 'submit'. Wij hebben om toe te voegen klasse: 'inputMail'. Dus onze tag er zo uitzien moet:

 $(document).ready(function() { }); 

Nu gaan we naar javascript binnen de scriptcode toevoegen. We beginnen met het toevoegen van deze code in de script-tag:

 $('.inputMail').click(function() { }); 

Dit betekent dat het zal de functie uitvoeren als het document volledig is geladen. De $(document) betekent het iets genaamd document zoekt, dan gebruikt de functie klaar om te controleren of het document klaar is. Tussen de vierkante haken zetten we onze volgende Jquery code. Dus nu voeg we de volgende code tussen de vierkante haken:

 $('.inputMail').animate({height: '+=100px', opacity: '0.4'}, "slow"); $('.inputMail').animate({width: '+=100px', opacity: '1.0'}, "slow"); $('.inputMail').animate({height: '-=100px', opacity: '0.4'}, "slow"); $('.inputMail').animate({width: '-=100px', opacity: '1.0'}, "slow"); 

Deze code wordt gezocht naar een klasse met de naam inputMail (de stip betekent dat het is een klasse waar we zoekt). Wanneer Jquery dat object gevonden zal controleren als het wordt geklikt. Wanneer er voert wordt geklikt het de functie. Dus binnen die functie kunnen we laten de knop doen een kleine truc. Dus voor de truc we deze code binnen de functie toe te voegen zullen:

 <script> $(document).ready(function () { $('.inputMail').click(function () { $('.inputMail').animate({ height: '+=100px', opacity: '0.4' }, "slow"); $('.inputMail').animate({ width: '+=100px', opacity: '1.0' }, "slow"); $('.inputMail').animate({ height: '-=100px', opacity: '0.4' }, "slow"); $('.inputMail').animate({ width: '-=100px', opacity: '1.0' }, "slow"); }); }); </script> 

Nu ook lijkt voor de klasse inputMail en het draait een aangepaste animatie. Dus laat het uitchecken! Dit is hoe hele uw script-tag zou moeten uitzien:

Dat is het! Leuk! Volgende stap gaan we kijken hoe je het html-bestand.