JQuery aloitus

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

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google photo

Olet kommentoimassa Google -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s