jquery ornekleri
Post on 16-Aug-2015
51 Views
Preview:
TRANSCRIPT
jQuerry Nedir?
jQuery, John Resig tarafından 2006 yılında geliştirilmiş ve şu an geniş bir jQuery ekibi tarafından gelişimi sürdürülen bir açık kaynak javascript kütüphanesidir.
jQuery en popüler çapraz-paltform JavaScript kütüphanesidir. Ya da farklı bir JavaScript Framework'üdür. İstemci taraflı dinamik programlama yapmasını kolaylaştırmak ve standartlaştırmak için tasarlanmış ve tamamen Javascript dili ile geliştirilmiştir. HTML5, CSS, Microsoft Visual Studio, asp.net, mvc, ajax ve efekt gibi yerlerde de jQuery desteği vardır. jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi olarak kullanılan bu teknoloji ile foto galeri, tab menü, sayfa geçişleri, slâyt gibi birçok işlem yapılmaktadır.
jQuery boyutu ufak ve işlevi çok olduğundan ayrıca hazır eklentileri de çok olduğundan çok yaygındır.
2006 Yılından beri kullanılan jQuery 2012 yılına kadar inanılmaz bir kullanım artışı göstermiştir. Bugün dünyanın
en büyük sosyal ağı Facebook jQuery teknolojisi de kullanmaktadır. Jquery'nin site ya da uygulama içerisinde
sağladığı başlıca yararları şunlardır;
Nesne seçimlerini ve etkilenmelerini hızlandırır.
Html içinde animasyon yapımını kolaylaştırır.
Css ile birlikte kusursuz çalışır.
jQuery kütüphanesi kullanılarak geliştirilen jqueryui gibi daha gelişmiş ara yüzleri ve araçları daha kolay kullanabilmemize imkân veren ek kütüphanelerde mevcuttur.
Kullanımı gitgide yaygınlaşan bu teknolojinin bu kadar çok sevilmesinin belki de en büyük sebepleri, hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltmasıdır. Hatta bu durum JQuery’nin sloganını oluşturmaktadır: Az yaz, çok iş…
jQuery kullanan bazı siteler; Sosyal haber sitesi Digg, açık kaynak kodlu projelere ev sahipliği yapan SourceForge, blog sitelerini analiz eden Technorati, RSS kaynaklarımızı yönettiğimiz FeedBurner ve birçoğumuzun kullandığı blog yazılımı WordPress.
jQuery ve Seo
Flash kullananlar bilirler, websiteleri için flash kullanmak SEO açısından pek istenilen bir durum değildir. Çünkü flash objesinin içeriği google için değerli değildir. JQuery’de ise durum biraz farklıdır. JQuery bir javascript kütüphanesi olduğundan, okunamayan içerik durumu söz konusu değildir. Yani işin özü, JQuery tamamen SEO uyumlu bir teknolojidir.
JQuery Nasıl Kullanılır?
JQuery sadece 1 dosyadan oluşan .js uzantılı bir dosyadır. Sürekli güncellenen bu dosyayı JQuery nin resmi sitesinden indirebilirsiniz. İndirme işleminden sonra artık dosyayı kendi sayfanıza entegre etmeye gelmiştir.
jQuery ile çalışırken ilk olarak jQuery kütüphanesini sayfaya tanıtmalıyız. Bu işlem genellikle sayfanın head tagları arasında gerçekleşmektedir. Entegre işleminde indirdiğiniz dosyanın yolunu göstermelisiniz.
<script type="text/javascript" src="latest-jquery.js"></script>
Şimdi birkaç jQuery örneğine göz atalım:
1)Butona tıklayarak hide() metodu ile <p> olarak tanımlanan öğeleri gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
2) Butona tıklayarak hide() metodu ile id=”test” olarak tanımlanan öğeleri gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
3) Butona tıklayarak hide() metodu ile tipi ne olursa olsun “class=test” olarak tanımlanan nesneleri gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
4) Butona tıklayarak hide() metodu ile tıklanılan butonun kendini gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
5)Herhangi bir nesneye tıklayarak hide() ve click() metodları ile o nesneyi gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
6) Herhangi bir nesneye tıklayarak hide() ve dblclick() metodları ile o nesneyi gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
7) Bir nesnenin üstüne geldiğimizde mouseenter() metodu ile uyarı verdirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>
8) Bir nesnenin üstünden ayrıldığımızda mouseleave() metodu ile uyarı verdirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
9) Bir nesnenin üstüne gelindiği zaman hover() metodu uyarı veren ve ayrılırken uyarı verdirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
10) Textbox’a tıklanıldığı zaman blur() komutu ile textbox’ın arka plan rengini değiştirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
11) Bir nesneye tıklanıldığı zaman o nesneyi hide() metodu ile gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
12) Hide butonuna tıkladığımız zaman hide() metodu ile nesneleri gizleyen show butonuna tıkladığımız zaman show() metodu ile nesleri gösterelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
13) toggle() metodu ile nesneleri hem gizleyelim hem de gösterelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
14) Butona tıklayarak fadeToggle() komutu ile nesneleri farklı hızlarda soldurarak gizleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px; background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px; background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px; background-color:blue;"></div>
</body>
</html>
15)Butona tıklayarak fadeTo() komutu ile nesneleri farklı solukluklara getirelim.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
16)Bir nesneye tıklayarak slideToggle() metodu ile bir pencereyi açıp kapatalım.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</body>
</html>
17) Butona tıkladığımızda animate() komutu ile bir nesneyi kapatıp açalım.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
18) Butona tıkladığımızda birden fazla animasyon yaptıralım.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
19) Bir nesneye tıklayarak bir pencereyi açalım aynı zamanda o pencereyi açarken durduralım.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
Kaynaklar:
http://www.w3schools.com/jquery/jquery_examples.asp http://www.mustafaercel.com/2013/05/jquery-nedir/ http://www.eyurtsever.com/index.php/jquery-nedir-nasil-kullanilir http://www.cemdemir.net/jquery/jquery-nedir-nasil-kullanilir-nasil-ogrenilir-
465.html
top related