- Jegyzet: http://gabor.molnar.es/blog/2013/05/12/javascript-programozas-jegyzet-a-jquery-fuggvenykonyvtar/
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="in">
<div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>- példa
CSS és form tartalom módosítása:
- a négyzet színének megváltoztatása
- a beviteli mező értékének megváltoztatása:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="in">
<div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
var negyzet = $('#negyzet');
negyzet.css('background-color', 'green');
var input = $('#in');
input.val('Hello world!');
</script>
</body>
</html>- példa
Eseménykezelés:
- a négyzetre kattintva felugró ablakban megjelenik a beviteli mező tartalma
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="in">
<div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
$('#negyzet').on('click', function() {
var t = $('#in').val();
alert(t);
});
</script>
</body>
</html>- feladat
- a négyzet felé húzva az egeret változzon meg a színe
- ha a kurzor elhagyja a négyzetet, a négyzet színe változzon vissza
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="in">
<div id="negyzet" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
$('#negyzet').on('mouseenter', function() {
$('#negyzet').css('background-color', 'green');
});
$('#negyzet').on('mouseleave', function() {
$('#negyzet').css('background-color', 'red');
});
</script>
</body>
</html>- feladat
Számológép program:
- 3 beviteli mezőből áll és gombból áll
- az 1. és a 3. mező számokat vár
- a 2. mező egy műveleti jelet (+, -, /, *)
- a gombra kattintva felugró ablakban jelenjen meg a számolás eredménye
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="szam1">
<input id="muvelet">
<input id="szam2">
<button>Számolj!</button>
<script>
$('button').on('click', function() {
var szam1 = Number($('#szam1').val()),
szam2 = Number($('#szam2').val()),
muvelet = $('#muvelet').val();
var eredmeny;
if (muvelet === '+') {
eredmeny = szam1 + szam2;
} else if (muvelet === '-') {
eredmeny = szam1 - szam2;
} else if (muvelet === '*') {
eredmeny = szam1 * szam2;
} else if (muvelet === '/') {
eredmeny = szam1 / szam2;
}
alert(eredmeny);
});
</script>
</body>
</html>- feladat
Visszaszámláló:
- a felhasználói felület egy beviteli mezőből és egy gombból áll
- a felhasználó beír egy számot a mezőbe, majd megnyomja a gombot
- ennek hatására elindul a visszaszámlálás, ami egészen 0-ig tart
- 0-nál a háttér elkezd színesen villogni
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input id="szamlalo">
<button>Visszaszámlálás!</button>
<script>
$('button').on('click', function() {
var szamlalo = Number($('#szamlalo').val());
setInterval(function() {
szamlalo = szamlalo - 1;
if (szamlalo >= 0) {
// A számláló még nem járt le
$('#szamlalo').val(szamlalo);
} else {
// A számláló már lejárt, mert negatív az értéke
if (szamlalo % 2 === 0) {
$('body').css('background-color', 'red');
} else {
$('body').css('background-color', 'green');
}
}
}, 1000);
});
</script>
</body>
</html>Ráadás: számláló horrorfilm stílusban :)