Seçilen nesneyi gizler.
2) show metodu ():
Gizlenen nesneyi gösterir.
Bu iki metodunda kullanıldığı bir kodla açıklayalım:
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(500);
});
$("#show").click(function(){
$("p").show(500);
});
});
</script>
<p>Hide tıklayınca gizlenecek,show ile tekrar gösterilecek.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
***Kodun Açıklaması****
$("#hide").click(function(){
$("p").hide(500);/// hide butonuna tıklandığında nesne gizlenecek.() içinde gizlenme hızı veriliyor.
$("#show").click(function(){
$("p").show(500);//// show butonuna tıklanınca gizlenenen nesne gösteriliyor.() içinnde görüntülenme
hızı veriliyor.
***Ekran Alıntısı***
3) fadeOut () metodu:
Seçilen nesneyi karartma şiddetini azaltarak(yavaşlatarak) kaybeder.
4) fadeIn() metodu :
Seçilen nesneyi karartma şiddetini azaltarak(yavaşlatarak) geri getirir.
Bu iki metodu örnek bir kodla açıklayalım:
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(500)
});
$(".btn2").click(function(){
$("p").fadeIn(500);
});
});
</script>
</head>
<body>
<p>fade Out la kaybolan fade In le geri gelen nesne </p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
***Kod Açıklaması***
$(".btn1").click(function(){
$("p").fadeOut(500)////// fadeOut butonuna tıklayınca ,nesne () içinde belitilen hızda kayboluyor.
$(".btn2").click(function(){
$("p").fadeIn(500);///// fadeIn e tıklayınca nesne belirtilen hızda geri getiriliyor.
***Ekran Alıntısı****
henüz hiç bir butona tıklamadık:
fadeIn ' e tıklayınca nesne geri getrildi:
Seçilen nesneyi saydamlaştırır.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").fadeTo(1000,0.4);
});
});
</script>
<button>fadeTo</button>
<h2><p>saydamlaşacak baslık</p></h2>
</body>
</html>
***Kodun Açıklaması***
$("button").click(function(){
$("p").fadeTo(1000,0.4);//// fadeTo butonuna tıklandığına 0,4 oranında saydamlaştır.
yine parantez içindeki ilk değer hızı belirtir.
***Ekran Alıntsı***
ilk durumda sayfa:
6) slideUp () metodu:
Seçilen nesneyi yukarıya doğru kaybeder.
7) slideDown () metodu :
Seçilen nesneyi yukarıya doğru kaybeder.Bu iki metodu örnek bir kodda açıklayalım:
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
div{ padding: 10px 10px ; width:120; display:block ; background:blue ;}
</style>
</head>
<body>
<div></div> <div></div> <div></div> <div></div> <div></div>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("div").slideUp();
});
$(".btn2").click(function(){
$("div").slideDown();
});
});
</script>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
</html>
***Kodun Açıklaması***
<style> tagında "div" ile oluşturulacak bölümün görsel özellikleri tanımlandı.
$(".btn1").click(function(){
$("div").slideUp();////// slideUp butonuna basıldığına bu bölüm yukarı doğru gizlenecek.
$(".btn2").click(function(){
$("div").slideDown();////slideDown butonuna basıldığında bu bölüm aşağı doğru görüntülenecek.
***Ekran Alıntısı***
slideUp butonuna tıklanınca;
8) animate() metodu:
Seçilen nesnenin belitilen özelliklerde görünümünü ,stilini değiştirir.
!!!!! css() metodu bu değişimi anında yaparken ,animate() süreye göre ayarlanır ve
animasyon özelliği kazanır. !!!!!!!
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function()
{
$("#btn1").click(function(){
$("#box").animate({width:"300px"});
});
});
</script>
<button id="btn1">Animate</button>
<div id="box" style="background:yellow;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
***Kodun Açıklaması***
<div> tagında ekranda görünecek bölümün özellikleri verildi.
$("#btn1").click(function(){
$("#box").animate({width:"300px"});//butona tıklandığında ,animate() metoduyla genişliği değiştirildi.
***Ekran Alıntısı***
ilk özellikleri ile sayfa;
Butona tıklanınca animate() ile değişen görünümü;
listeye 5 eleman eklendiği kullanıcıya mesaj olarak verildi.
!!!!! css() metodu bu değişimi anında yaparken ,animate() süreye göre ayarlanır ve
animasyon özelliği kazanır. !!!!!!!
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function()
{
$("#btn1").click(function(){
$("#box").animate({width:"300px"});
});
});
</script>
<button id="btn1">Animate</button>
<div id="box" style="background:yellow;height:100px;width:100px;margin:6px;">
</div>
</body>
</html>
***Kodun Açıklaması***
<div> tagında ekranda görünecek bölümün özellikleri verildi.
$("#btn1").click(function(){
$("#box").animate({width:"300px"});//butona tıklandığında ,animate() metoduyla genişliği değiştirildi.
***Ekran Alıntısı***
ilk özellikleri ile sayfa;
9) size () metodu:
Seçilen nesnelerin sayısını verir.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("li").size());
});
});
</script>
<button>size</button>
<ul>
<li>size</li>
<li>kac</li>
<li>eleman</li>
<li>olduğunu</li>
<li>verir</li>
</ul>
</body>
</html>
***Kodun Açıklaması***
$(document).ready(function(){
$("button").click(function(){
alert($("li").size());///// butona tıklanınca size() metodu, <li> ile kaç eleman eklendiğini alert()
komutuyla kullanıcıya mesaj olarak veriyor.
***Ekran Alıntısı***
listeye 5 eleman eklendiği kullanıcıya mesaj olarak verildi.
10) each döngüsü
JQuery nesnesi üzerinde döngü işlemlerini gerçekleştirir.Elemanları tek tek işler.
***Örnek Kod***
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
<button>each</button>
<ul>
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
<li>Bursa</li>
<li>Adana</li>
</ul>
</body>
</html>
***Ekran Alıntısı***
Hiç yorum yok:
Yorum Gönder