JQuery aloitus

Julkaistu kirjoittanut Petri Mäki

Tässä viestissä käydään lävitse JQueryn asennus ja käyttöönotto, sekä yksinkertainen Hello World JQuerylla. Kaikki allaolevat koodit ovat vapaasti käytettävissä.

JQuery asennus ja käyttöönotto
Aluksi lataa JQuery osoitteesta http://www.jquery.com ja tallenna se. Itse tallensin kyseisen tiedoston /js kansioon index.html tiedoston alle, jonka loin samalla. Nyt olet asentanut JQueryn.

JQuery hello world

<!DOCTYPE html>
<html>
    <head>
		<title>Hello JQuery world</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
			<script type ="text/javascript">
				$(document).ready(function(){
					$("#msgid").html("Hello world from JQuery");
				});

			</script>
			<p>HTML text</p>

			<div id="msgid"></div>
	</body>
</html>

Fadeout & Lomakkeen arvon lukeminen

Seuraavassa esimerkissä luetaan lomakkeesta arvo. Mikäli arvo on ”salainen” niin kerrotaan käyttäjälle että se on oikein. Muistathan että kyseinen ratkaisu ei ole tietoturvallinen salasanojen kyselyyn!

<!DOCTYPE html>
<html>
    <head>
		<title>Hello JQuery world</title>
		<style>span {display:none;}</style>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
  <form action="javascript:alert('Oikein!');">
    <div>

	  <p>Salainen sana: <input type="password" /><br> <span id="vinkki" ></span></p>
      <input type="submit" />
    </div>
  </form>
  <span id="result"></span>
<script>

$("form").submit(function() {
  if ($("input:first").val() == "salainen") {
    $("#result").text("Oikein...").show(); //Tulostetaan span id="result" kenttään
    return true;
  }
  $("#result").text("Pieleen meni! Muista salainen").show().fadeOut(1000); //fadeOut = 1000 ms
  return false;
});

$("p").focusin(function() {
	$("#vinkki").text("Vinkki: Salaisen sanan tulee olla salainen").show().fadeOut(6000); //fadeOut = 6000 ms
});
</script>

</body>
</html>

Yksinkertaista lukujen kertomista

Syöttämällä 2 lukua JQuery kertoo ne.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Yksinkertaista kertomista</title>
  <style>

  p { color:blue; margin:8px; }
  	</style>
  <script src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
  Anna luku1: <input id="first" type="text" value="2"/><br><br>
  Anna luku2:<input id="second" type="text" value="3"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var firstValue = $("#first").val();
	  var secondValue = $("#second").val();
	  if($.isNumeric(firstValue)&&$.isNumeric(secondValue)) //Vain numeerisia arvoja
	  {
		var result = firstValue * secondValue;
	        $("p").text("Tulos: " + result);
	  } else {
		$("p").text("Vain numeroita!");
	  }
    }).keyup();
</script>

</body>
</html>

Lähteet

http://api.jquery.com/
http://www.terokarvinen.com

Lisenssi

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html

Jätä kommentti