jQuery Nedir? jqeri dersi tek blogda ogren!
Ne Bilmem Gerekiyor?
jQuery ile çalışabilmek için HTML, CSS ve temel düzeyde JavaScript bilmeniz gereklidir. Bunlar hakkında yeterli bilgiye sahip değilseniz, menüde yer alan bağlantılar yoluyla HTML, CSS ve JavaScript derslerini takip edebilirsiniz.jQuery Nedir?
Bir JavaScript kütüphanesidir. Daha az yaz, daha çok iş yap şeklinde bir sloganı da var. Amaç, javaScript kodları ile boğuşmadan bazı işleri kısa kodlarla yapmaktır.Bir site kodlarken birçok javascript kodu gerekebilir. Bir nesneyi bulmak, nesne üzerinde işlem yapmak, veri almak ve vermek gibi... Tabiki bu kısım, siteyi kodlarken sizi uğraştıracaktır. jQuery, size zaman kazandıracak bir kütüphanedir. Öyle ki içinde bu işlemleri tek bir kodla yapabilmenize yarayan birçok fonksiyon var.
Neden jQuery?
Tüm işletim sistemlerinde, tarayıcılarda çalışan jQuery büyük firmalar Google, Microsoft vb. tarafından da aktif kullanılmaktadır. Sürekli güncellenen bir yapıya sahiptir. Sizi üzmez, sevindirir.Query'yi sitenizde kullanabilmek için kütüphaneyi kaynak kodlarınıza eklemelisiniz. Bunun için iki yol var:
- jQuery'yi Yükleyerek Kullanma
- jQuery'yi Uzaktan Çağırarak Kullanma
jQuery'yi Yükleyerek Kullanma
jQuery'yi yükleyin ve sayfanızın bulunduğu dizine atıp sayfanızda yer verin.jQuery çalıştırmak için gerekli kütüphaneyi yüklemek için resmi sitesini ziyaret edin.
Yükleme işi bittikten sonra sayfanızla aynı dizine yükleyin. Ardından sayfanızın kaynak kodlarında elementleri arasına şu kodu yerleştirin:
HTML Kodu
<script src="jquery-1.10.2.min.js"></script>
jQuery'yi Başka Siteden Bağlantı Yoluyla Çalıştırmak
Bazı siteler jQuery'yi uzaktan çağırmanıza izin verir. Google API bunlardan biridir. Örneğin jQuery kütüphanesi yüklemeden çalıştırabilmek için aşağıdaki kodu yazabilirsiniz.
HTML Kodu
jQuery ile HTML elementleri ile ilgili sorgular gönderir ve onlar üzerinde işlem yaparsınız. O halde temelde iki şey var: seçmek ve işlem belirtmek. İşte kod yapısı bu iki temel üzerine kurulu:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$(seçilen nesne).işlem()
- Buradaki $ işareti, jQuery'ye erişim için gereken bir işaret.
- (seçilen nesne), üzerinde işlem yapacağımız bir html elementi.
- işlem(), nesne üzerinde ne gibi bir eylem gerçekleştirileceğidir.
Örnekler:
- $(this).hide() - seçili elementi gizler.- $("p").hide() - tüm p elementlerini gizler.
- $(".test").hide() - class="test" olan tüm elementleri gizler.
- $("#test").hide() - id="test" olan tüm elementleri gizler.
Kod yapısını kısaca özetlersek;
- $ ile başlayan ifadeler jQuery içindir.
- Parantez içinde obje (element, class, id) yazar.
- Nokta (.) sonrası ise yapılacak işi belirtir (aksiyon)
- Tüm ifadeler JavaScript gibi noktalı virgül ile biter.
JavaScript kodlarının sorunsuz çalışabilmesi için internet sayfasının tam yüklenmiş olması gerekir. ready() fonksiyonu bize sayfanın hazır hale geldiğini, dolayısıyla artık işlem yapılabileceğini belirtir.
JavaScript Kodu
$(document).ready(function(){
// jQuery işlemleri buraya gelecek
});
// jQuery işlemleri buraya gelecek
});
Örneğin yukarıdaki kod belgemiz hazır olduğu sırada yapılması istenenler için kullanılabilir.
Yukarıdaki kodun kısa bir yolu da mevcut (Belge hazırsa yapılacaklar):
JavaScript Kodu
Öncelikle şunu söyleyelim. Sitemizde bu sayfalarda yer alan nesne, element, html parçacığı, tag gibi ifadeler aynı şeyi ifade ediyor. Bunlar HTML sayfasını oluşturan kodlardır ve <nesne> şeklinde yazılır.
$(function(){
// jQuery işlemleri buraya gelecek
});
// jQuery işlemleri buraya gelecek
});
jQuery için elementler üzerinde işlem yapıyor dedik. O halde elementleri seçmek de işin bir parçası. Elementleri jQuery'de ifade ederken $("nesne") şeklinde ifade ediyoruz. Şimdi örnekler yoluyla nasıl element seçtiğimizi öğrenelim.
$("this") kod hangi elementte kullanıldıysa o element.
$("*") tüm elementler
$("p") <p> elementleri
$("div") <div> elementleri
Buraya kadar iyiydi. Şimdi biraz daha özel elementler belirtelim:
$("div.yazi") class="yazi" olan <div> elementleri
$("p:first") belgemizdeki ilk <p> elementi
$("#txt") belgemizdeki id="txt" özelliğine sahip element
$("a[target='_blank']") target="_blank" özelliğine sahip <a> elementi
Görüldüğü gibi bir elementi belirtmenin birden fazla yolu var. Şimdi bir uygulama üzerinde belirtilmiş elementleri görelim:
JavaScript Kodu
HTML elementleri üzerinde işlem yapma ve onlara özellik kazandırma için fonksiyonlardan faydalanırız. Bir fonksiyon .islem() şeklinde ifade edilir.
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
$("button").click(function(){
$("p").hide();
});
});
Bir fonksiyon: $("p").click();
Yukarıda p elementleri için tıklama fonksiyonu var, peki ya tıklandığında ne olacak? İşte bu elemente tıklandığında bir şeyler yapılmasını istiyorsak parantez içinde yeni bir fonksiyon oluşturabiliriz. Örneğe bakalım:
JavaScript Kodu
$("p").click(function(){
// tıklandığında yapılacaklar
});
// tıklandığında yapılacaklar
});
function(){kodlar} şeklinde belirttiğimiz kod, click() fonksiyonuna bir işlev kazandırdı.
Önemli Fonksiyonlar:
Fare/Tıklamaclick, dblclick, mouseenter, mouseleave
Klavye/Tuş
keypress, keydown, keyup
Form
submit, change, focus, blur
Sayfa/Pencere
load, resize, scroll, unload
Örnekler:
Aşağıdaki kodda id="p1" olan elementin üzerine fare ile gelindiğinde uyarı verilmesi sağlandı:
JavaScript Kodu
$("#p1").mouseup(function(){
alert("fare id='p1' üzerinde!");
});
alert("fare id='p1' üzerinde!");
});
Aşağıdaki örnekte ise bir "input" elementine gelindiğinde arkaplan renginin değişmesi sağlandı:
JavaScript Kodu
Bir nesneyi gizlemek için .hide(), göstermek için .show() fonksiyonlarından faydalanılır. Bu fonksiyonların parantez arasında bu işlemin ne kadar süre alacağı belirtilebilir:
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$(this).css("background-color","#cccccc");
});
.hide() - Bir nesneyi gizler.
.hide(1000) - İçine yazacağımız süre (ms) içinde gizlenmesini sağlayan animasyon.
.show() - Gizli bir nesneyi gösterir.
.show(1000) - İçine süre yazılabilir.
Örnekler
ÖRNEK 1. Bir butona tıklandığında yazımızı gizlesin:
JavaScript Kodu
<p id="p1">Gizlenecek yazı...</p>
<button id="btn1">Beni Gizle!</button>
<script>
$("#btn1").click(function(){
$("#p1").hide(1000);
});
</script><br /><br />
<button id="btn1">Beni Gizle!</button>
<script>
$("#btn1").click(function(){
$("#p1").hide(1000);
});
</script><br /><br />
Kodu deneyin:
Gizlenecek yazı...
ÖRNEK 2. Gizleme - gösterme işini .toggle(süre) ile de yapmak mümkün.
Bu örnekte nesne görünürse gizler, gizliyse görünür hale getirir.
JavaScript Kodu
<p id="p2">Gizlenecek yazı...</p>
<button id="btn2">Beni Gizle!</button>
<script>
$("#btn2").click(function(){
$("#p2").toggle(1000);
});
</script><br /><br />
<button id="btn2">Beni Gizle!</button>
<script>
$("#btn2").click(function(){
$("#p2").toggle(1000);
});
</script><br /><br />
Kodu deneyin:
Gizlenecek yazı...
fadeIn() Fonksiyonu
"display: none;" belirtilip gizlenmiş bir nesneyi görünür hale getirir..fadeIn() - Gizlenmiş bir nesneyi görünür hale getirir.
.fadeIn(süre) - Nesne belirtilen sürede (ms) görünür hale gelir.
ÖRNEK
JavaScript Kodu
<p id="p3" style="display: none;">Gizli Yazı</p>
<button id="btn3">Yazıyı Göster</button>
<script>
$("#btn3").click(function(){
$("#p3").fadeIn(3000);
});
</script><br /><br /><br />
<button id="btn3">Yazıyı Göster</button>
<script>
$("#btn3").click(function(){
$("#p3").fadeIn(3000);
});
</script><br /><br /><br />
fadeOut() Fonksiyonu
Görünür bir nesneyi yavaş yavaş sönükleştirip gizler..fadeOut()
.fadeOut(süre) - Nesne belirtilen sürede gizlenir.
ÖRNEK
JavaScript Kodu
<p id="p4">Gizlenecek Yazı</p>
<button id="btn4">Yazıyı Sil</button>
<script>
$("#btn4").click(function(){
$("#p4").fadeOut(3000);
});
</script><br /><br /><br />
<button id="btn4">Yazıyı Sil</button>
<script>
$("#btn4").click(function(){
$("#p4").fadeOut(3000);
});
</script><br /><br /><br />
Gizlenecek Yazı
fadeToggle() Fonksiyonu
Görünmeyen bir nesneyi görünür hale getirir, görüneni ise görünmez yapar. Parantez içinde süre belirtilebilir.ÖRNEK
JavaScript Kodu
<p id="p5">Yaşamak, yaşattığın sürece güzel.</p>
<button id="btn5">Yazıyı göster / gizle</button>
<script>
$("#btn5").click(function(){
$("#p5").fadeToggle(1000);
});
</script><br /><br /><br />
<button id="btn5">Yazıyı göster / gizle</button>
<script>
$("#btn5").click(function(){
$("#p5").fadeToggle(1000);
});
</script><br /><br /><br />
Yaşamak, yaşattığın sürece güzel.
fadeTo() Fonksiyonu
Bir nesnenin transparanlığını değiştirir. Bu kodun .fadeTo(süre,transparanlık) şeklinde bir kullanımı vardır. Transparanlık değeri 0 ile 1 arasında bir değer olup 1 demek = 100% demektir.ÖRNEK
Yaşamak, yaşattığın sürece güzel.
slideDown() Fonksiyonu
Görünmeyen gizlenmiş bir nesneyi, görünür hale getirir. Bunu yaparken aşağıya doğru açılmasını sağlar. Parantez içinde ne kadar sürede açılacağı yazılabilir.ÖRNEK
JavaScript Kodu
<div id="d1" class="kutu">Buraya Tıkla</div>
<div id="d2" class="kutu2" style="display: none;">Açılır Bir Kutu</div>
<script>
$("#d1").click(function(){
$("#d2").slideDown(1000);
});
</script><br /><br /><br />
<div id="d2" class="kutu2" style="display: none;">Açılır Bir Kutu</div>
<script>
$("#d1").click(function(){
$("#d2").slideDown(1000);
});
</script><br /><br /><br />
Buraya Tıkla
slideUp() Fonksiyonu
Nesneyi yukarı doğru taşıyarak yavaşça kaybolmasını sağlar.ÖRNEK
JavaScript Kodu
<div id="d1" class="kutu">Buraya Tıkla</div>
<div id="d2" class="kutu2">Kapatılacak Bir Kutu</div>
<script>
$("#d1").click(function(){
$("#d2").slideUp(1000);
});
</script><br /><br /><br />
<div id="d2" class="kutu2">Kapatılacak Bir Kutu</div>
<script>
$("#d1").click(function(){
$("#d2").slideUp(1000);
});
</script><br /><br /><br />
Buraya Tıkla
Kapatılacak Bir Kutu
slideToggle() Fonksiyonu
Hem slideDown hem slideUp bir aradadır. Yani tıklandığında açıksa kapanır, kapalıysa açılır.ÖRNEK
JavaScript Kodu
<div id="d1" class="kutu">Buraya Tıkla</div>
<div id="d2" class="kutu2">Kapatılacak Bir Kutu</div>
<script>
$("#d1").click(function(){
$("#d2").slideUp(1000);
});
</script><br /><br /><br />
<div id="d2" class="kutu2">Kapatılacak Bir Kutu</div>
<script>
$("#d1").click(function(){
$("#d2").slideUp(1000);
});
</script><br /><br /><br />
Yazıyı Göster / Gizle
Merhaba Dünya!
Bir nesnenin stilinde yapacağımız değişiklikleri animasyon şeklinde yapar.
Kullanım: .animate(özellikler, hız);
ÖRNEK 1
ÖRNEK 2
Birden fazla değişikliği tek bir animate() ile yapabiliriz:
ÖRNEK 3
Elementin özelliği üzerinden işlem yapabiliriz.
ÖRNEK 4
Ayrıca hide, show ve toggle kullanılabilir (özellik olarak).
ÖRNEK 5
Belli işlemleri sırasıyla yapıp animasyon oluşturmasını sağlayabiliriz.
ÖRNEK 6
Yazı tipi boyutu ile ilgili oynamalar için fontSize kullanılmalıdır.
Kullanım: .animate(özellikler, hız);
ÖRNEK 1
JavaScript Kodu
<div id="d1a" class="kutu">Aşağıdaki kutunun yüksekliğini 50 piksel yap!</div>
<div id="d1b" class="kutu2"> </div>
<script>
$("#d1a").click(function(){
$("#d1b").animate({height: '50px'});
});
</script><br /><br /><br />
<div id="d1b" class="kutu2"> </div>
<script>
$("#d1a").click(function(){
$("#d1b").animate({height: '50px'});
});
</script><br /><br /><br />
Aşağıdaki kutunun yüksekliğini 50 piksel yap!
ÖRNEK 2
Birden fazla değişikliği tek bir animate() ile yapabiliriz:
JavaScript Kodu
<div id="d2a" class="kutu">Aşağıdaki kutuyu ayrıca transparan yap!</div>
<div id="d2b" class="kutu2"> </div>
<script>
$("#d2a").click(function(){
$("#d2b").animate({
height: '50px',
opacity: '0.5'
});
});
</script><br /><br /><br />
<div id="d2b" class="kutu2"> </div>
<script>
$("#d2a").click(function(){
$("#d2b").animate({
height: '50px',
opacity: '0.5'
});
});
</script><br /><br /><br />
Aşağıdaki kutuyu ayrıca transparan yap!
ÖRNEK 3
Elementin özelliği üzerinden işlem yapabiliriz.
JavaScript Kodu
<div id="d3a" class="kutu">Aşağıdaki kutunun yüksekliğini 50 arttır</div>
<div id="d3b" class="kutu2"> </div>
<script>
$("#d3a").click(function(){
$("#d3b").animate({
height: '+=50px'
});
});
</script><br /><br /><br />
<div id="d3b" class="kutu2"> </div>
<script>
$("#d3a").click(function(){
$("#d3b").animate({
height: '+=50px'
});
});
</script><br /><br /><br />
Aşağıdaki kutunun yüksekliğini 50 arttır
ÖRNEK 4
Ayrıca hide, show ve toggle kullanılabilir (özellik olarak).
JavaScript Kodu
<div id="d4a" class="kutu">Aşağıdaki kutuyu gizle/göster</div>
<div id="d4b" class="kutu2"> </div>
<script>
$("#d4a").click(function(){
$("#d4b").animate({
height: 'toggle'
});
});
</script><br /><br /><br />
<div id="d4b" class="kutu2"> </div>
<script>
$("#d4a").click(function(){
$("#d4b").animate({
height: 'toggle'
});
});
</script><br /><br /><br />
Aşağıdaki kutuyu gizle/göster
ÖRNEK 5
Belli işlemleri sırasıyla yapıp animasyon oluşturmasını sağlayabiliriz.
JavaScript Kodu
<div id="d5a" class="kutu">Aşağıdaki kutuyu oynat</div>
<div id="d5b" class="kutu2"> </div>
<script>
$("#d5a").click(function(){
var div=$("#d5b");
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><br /><br /><br />
<div id="d5b" class="kutu2"> </div>
<script>
$("#d5a").click(function(){
var div=$("#d5b");
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><br /><br /><br />
Aşağıdaki kutuyu oynat
ÖRNEK 6
Yazı tipi boyutu ile ilgili oynamalar için fontSize kullanılmalıdır.
JavaScript Kodu
<div id="d6a" class="kutu">Aşağıdaki yazının boyutunu arttır</div>
<div id="d6b" class="kutu2">Merhaba Dünya!</div>
<script>
$("#d6a").click(function(){
var div=$("#d6b");
div.animate({fontSize:'3em'},"slow");
});
</script><br /><br /><br />
<div id="d6b" class="kutu2">Merhaba Dünya!</div>
<script>
$("#d6a").click(function(){
var div=$("#d6b");
div.animate({fontSize:'3em'},"slow");
});
</script><br /><br /><br />
Aşağıdaki yazının boyutunu arttır
Merhaba Dünya!
Bir jQuery işlemi tamamlandığında yapılacakları belirtmek için geri-dönüş fonksiyonları kullanırız. Her fonksiyonun son parametresi bir fonksiyondur.
Örneğin .hide() işlemi için değişkenlerimiz .hide(hız, fonksiyon) olup buradaki fonksiyonu function(){ kodlar } şeklinde belirtiriz.
Aşağıdaki kodda hide() tamamlandığında fonksiyon devreye girecek ve uyarı verecektir.
Eğer callback kullanmadan bunu yapsaydık animasyon tamamlanmadan uyarı gelirdi:
Örneğin .hide() işlemi için değişkenlerimiz .hide(hız, fonksiyon) olup buradaki fonksiyonu function(){ kodlar } şeklinde belirtiriz.
Aşağıdaki kodda hide() tamamlandığında fonksiyon devreye girecek ve uyarı verecektir.
JavaScript Kodu
<div id="d1a" class="kutu">Gizlenecek bir kutu!</div>
<button id="d1b">Kutuyu kapatmak için tıklayın.</button>
<script>
$("#d1b").click(function(){
$("#d1a").hide("slow",function(){
alert("Yazı şu an gizlendi.");
});
});
</script><br /><br /><br />
<button id="d1b">Kutuyu kapatmak için tıklayın.</button>
<script>
$("#d1b").click(function(){
$("#d1a").hide("slow",function(){
alert("Yazı şu an gizlendi.");
});
});
</script><br /><br /><br />
Gizlenecek bir kutu!
Eğer callback kullanmadan bunu yapsaydık animasyon tamamlanmadan uyarı gelirdi:
JavaScript Kodu
<div id="d2a" class="kutu">Gizlenecek bir kutu!</div>
<button id="d2b">Kutuyu kapatmak için tıklayın.</button>
<script>
$("#d2b").click(function(){
$("#d2a").hide(1000);
alert("Yazı gizleniyor...");
});
</script><br /><br /><br />
<button id="d2b">Kutuyu kapatmak için tıklayın.</button>
<script>
$("#d2b").click(function(){
$("#d2a").hide(1000);
alert("Yazı gizleniyor...");
});
</script><br /><br /><br />
Gizlenecek bir kutu!
jQuery'de bir fonksiyon ardından yenisi kullanılabilir.
Yukarıdaki komutta önce CSS kodu, sonra kaybolma, sonra ortaya çıkma uygulanacaktır.
Eğer yukarıdaki kod karışık geliyorsa aşağıdakini de kullanabiliriz:
JavaScript Kodu
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
Yukarıdaki komutta önce CSS kodu, sonra kaybolma, sonra ortaya çıkma uygulanacaktır.
Eğer yukarıdaki kod karışık geliyorsa aşağıdakini de kullanabiliriz:
JavaScript Kodu
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
.slideUp(2000)
.slideDown(2000);
Yazıyı Göster / Gizle
Veri elde etmeye yarayan üç adet basit ancak işinizi çok kolaylaştıracak jQuery yöntemi mevcuttur.
text() - Belirtilen elementte yer alan içeriği verir.
html() - Belirtilen elementte yer alan içeriği verir (HTML kodları dahil).
val() - Form alanlarındaki nesnelerde yer alan değerleri verir.
Aşağıdaki örnek text() ve html() yöntemleri ile nasıl içeriğin elde edildiğini gösterir:
ÖRNEK: İki adet buton oluşturun ve isimlerini "btn1" ve "btn2" olarak verin. Bir de DIV elementi oluşturup ID değerini "veri" yapın. Sonra bir SCRIPT tagı içerisine aşağıdaki kodu yerleştirin:
Yukarıdaki örnekte 1. Butona basıldığında sadece yazı görünecek, ancak 2. Butona basıldığında Yazıyla birlikte HTML kodları da görünecektir.
ÖRNEK: val() yöntemi ile form değerlerini elde edebilirsiniz. İki adet INPUT oluşturun. Bu inputlardan biri TEXT diğeri BUTTON türünde olmalı. TEXT türünde olanın id özelliğini "txt" yapın, BUTTON türünde olanın özelliğini "btn" yapın. Ardından bir SCRIPT tagı açarak aşağıdaki kodu yazın:
Kod çalıştırıldığında butona bastığınızda id="txt" olan form nesnesinin değerini göreceksiniz.
Burada HREF="" ile belirtilen bir element özelliğidir. Bunu elde etmek için jQuery'de attr() fonksiyonunu kullanabiliriz.
ÖRNEK:
Google.COM.TR
Kod çalıştırıldığında ve butona basıldığında, HREF niteliği uyarı olarak gelecektir.
text() - Belirtilen elementte yer alan içeriği verir.
html() - Belirtilen elementte yer alan içeriği verir (HTML kodları dahil).
val() - Form alanlarındaki nesnelerde yer alan değerleri verir.
Aşağıdaki örnek text() ve html() yöntemleri ile nasıl içeriğin elde edildiğini gösterir:
ÖRNEK: İki adet buton oluşturun ve isimlerini "btn1" ve "btn2" olarak verin. Bir de DIV elementi oluşturup ID değerini "veri" yapın. Sonra bir SCRIPT tagı içerisine aşağıdaki kodu yerleştirin:
JavaScript Kodu
<div id="veri">Bu bir <b>jQuery</b> örneğidir.</div>
<input type="button" id="btn1" value="text()" />
<input type="button" id="btn2" value="text()" />
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Yazı: " + $("#veri").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#veri").html());
});
});
<script>
<input type="button" id="btn1" value="text()" />
<input type="button" id="btn2" value="text()" />
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Yazı: " + $("#veri").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#veri").html());
});
});
<script>
Bu bir jQuery örneğidir.
Yukarıdaki örnekte 1. Butona basıldığında sadece yazı görünecek, ancak 2. Butona basıldığında Yazıyla birlikte HTML kodları da görünecektir.
ÖRNEK: val() yöntemi ile form değerlerini elde edebilirsiniz. İki adet INPUT oluşturun. Bu inputlardan biri TEXT diğeri BUTTON türünde olmalı. TEXT türünde olanın id özelliğini "txt" yapın, BUTTON türünde olanın özelliğini "btn" yapın. Ardından bir SCRIPT tagı açarak aşağıdaki kodu yazın:
JavaScript Kodu
<input type="text" id="txt2" value="Selam!" /><br/>
<input type="button" id="btn2" value="Tıkla!" />
<script>
$(document).ready(function(){
$("#btn2").click(function(){
alert("Value: " + $("#txt2").val());
});
});
</script>
<input type="button" id="btn2" value="Tıkla!" />
<script>
$(document).ready(function(){
$("#btn2").click(function(){
alert("Value: " + $("#txt2").val());
});
});
</script>
Kod çalıştırıldığında butona bastığınızda id="txt" olan form nesnesinin değerini göreceksiniz.
Bir HTML Elementinin Özelliğini Elde Etmek (Attribute):
Bir HTML kodu düşünün, örneğin <A HREF="http://www.google.com.tr/">.Burada HREF="" ile belirtilen bir element özelliğidir. Bunu elde etmek için jQuery'de attr() fonksiyonunu kullanabiliriz.
ÖRNEK:
JavaScript Kodu
<a href="http://www.google.com.tr/" id="link">Google.COM.TR</a><br/>
<button>Adres</button>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#link").attr("href"));
});
});
</script>
<button>Adres</button>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#link").attr("href"));
});
});
</script>
Google.COM.TR
Kod çalıştırıldığında ve butona basıldığında, HREF niteliği uyarı olarak gelecektir.
Bir önceki derste bahsedilen üç yöntemi, nesnelerin değerlerini değiştirmek için de kullanabiliriz.
- text("eklenecek/değiştirilecek yazı") - Yazılar için
- html("eklenecek/değiştirilecek yazı") - HTML kodları dahil olan içerikler için
- val("eklenecek/değiştirilecek yazı") - Form nesneleri için
Aşağıdaki kodu deneyin.
Butonlara sırasıyla basarsanız. Önceden girilen değerlerin butonlara bastıkça değiştiğini göreceksiniz.
NOT: text() ve html() fonksiyonlarında bazen eski ve yeni değerlere ihtiyaç duyabiliriz. Bu durumda jQuery'de hazır bir callback fonksiyon kullanarak değişen değerleri kullanabiliriz. html() ve text() parantez içinde bir fonksiyon oluşturun:
attr() komutu da bir element özelliğini değiştirmek için kullanılabilir.
Aşağıdaki kod, button elementine tıklandığında id değeri "link" olan A elementinin HREF özelliğinin http://sitesi.web.tr/ olarak değişmesini sağlar:
attr() fonksiyonunda birden fazla niteliği aynı anda değiştirebilirsiniz. Bununla ilgili örnek kullanımı inceleyin:
Web Sitesi
Yukarıdaki örneğe göre hem HREF hem TITLE niteliklerini değiştirdik.
- text("eklenecek/değiştirilecek yazı") - Yazılar için
- html("eklenecek/değiştirilecek yazı") - HTML kodları dahil olan içerikler için
- val("eklenecek/değiştirilecek yazı") - Form nesneleri için
Aşağıdaki kodu deneyin.
JavaScript Kodu
<p id="test1">Bu bir paragraf</p>
<p id="test2">Bu diğer bir paragraf.</p>
<p>Form Veri Girişi:
<input type="text" id="test3" value="Bu da form verisi"></p>
<button id="btn1">Yazıyı değiştir</button>
<button id="btn2">HTML kodunu değiştir</button>
<button id="btn3">Form verisi değiştir</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Merhaba Ziyaretçi!");
});
$("#btn2").click(function(){
$("#test2").html("<b>jQuery Dersleri'ne Hoş Geldiniz.</b>");
});
$("#btn3").click(function(){
$("#test3").val("jQuery oldukça basit!");
});
});
</script>
<p id="test2">Bu diğer bir paragraf.</p>
<p>Form Veri Girişi:
<input type="text" id="test3" value="Bu da form verisi"></p>
<button id="btn1">Yazıyı değiştir</button>
<button id="btn2">HTML kodunu değiştir</button>
<button id="btn3">Form verisi değiştir</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Merhaba Ziyaretçi!");
});
$("#btn2").click(function(){
$("#test2").html("<b>jQuery Dersleri'ne Hoş Geldiniz.</b>");
});
$("#btn3").click(function(){
$("#test3").val("jQuery oldukça basit!");
});
});
</script>
Bu bir paragraf
Bu diğer bir paragraf.
Form Veri Girişi:
Butonlara sırasıyla basarsanız. Önceden girilen değerlerin butonlara bastıkça değiştiğini göreceksiniz.
NOT: text() ve html() fonksiyonlarında bazen eski ve yeni değerlere ihtiyaç duyabiliriz. Bu durumda jQuery'de hazır bir callback fonksiyon kullanarak değişen değerleri kullanabiliriz. html() ve text() parantez içinde bir fonksiyon oluşturun:
JavaScript Kodu
function(i,origText){
return "Eski yazı: " + origText + "
Yeni yazı: Hello world! (index: " + i + ")";
}
return "Eski yazı: " + origText + "
Yeni yazı: Hello world! (index: " + i + ")";
}
attr() komutu da bir element özelliğini değiştirmek için kullanılabilir.
Aşağıdaki kod, button elementine tıklandığında id değeri "link" olan A elementinin HREF özelliğinin http://sitesi.web.tr/ olarak değişmesini sağlar:
JavaScript Kodu
$("button").click(function(){
$("#link").attr("href","http://sitesi.web.tr/");
});
$("#link").attr("href","http://sitesi.web.tr/");
});
attr() fonksiyonunda birden fazla niteliği aynı anda değiştirebilirsiniz. Bununla ilgili örnek kullanımı inceleyin:
Web Sitesi
Yukarıdaki örneğe göre hem HREF hem TITLE niteliklerini değiştirdik.
jQuery ile HTML'nize yeni element ve içerik eklemek çok kolay!
Bunun için dört yöntemimiz var:
- append() - İçeriği seçili elementin sonuna ekler.
- prepend() - İçeriği seçili elementin başına ekler.
- after() - Seçilen elementten sonra içeriği ekler.
- before() - Seçili elementten önce içeriği ekler.
Şimdi bunları birer örnekle tanıyalım.
Örneği inceleyelim:
"Yeni nesne ekle" butonuna tıklandığında <OL></OL> elementleri arasına yeni bir LI değeri eklediği görülebilir.
Yukarıdaki örnekte $("ol").append(... olan kısımda append yazan yeri prepend olarak değiştirip deneyin. Bu kez içeriğin listenin sonuna değil başına eklendiğini göreceksiniz.
Sayfanıza append() kullanarak yeni HTML elementleri eklerken üç yol izleyebilirsiniz:
1. Yol: HTML Kullanmak
2. Yol: jQuery ile Eklemek
3. Yol: HTML DOM Kullanmak
Aşağıdaki örneği çalıştırarak aynı anda üç yöntemi de kullanarak üç adet element oluşturduğumuzu göreceksiniz.
Aşağıdaki örnek after() ve before() yöntemini anlamamızı kolaylaştıracaktır.
[BAŞLIK]
Kodu çalıştırdığınızda "btn1" idli butona bastığınızda BAŞLIK yazısının soluna, "btn2" idli butona bastığınızda BAŞLIK yazısının sağına içeriği («/») ekliyor.
after() ve before() yöntemlerini de yeni HTML elementleri eklemek için kullanabilirsiniz (Bu kullanım yukarıda append() komutunda anlatılmıştır).
Bunun için dört yöntemimiz var:
- append() - İçeriği seçili elementin sonuna ekler.
- prepend() - İçeriği seçili elementin başına ekler.
- after() - Seçilen elementten sonra içeriği ekler.
- before() - Seçili elementten önce içeriği ekler.
Şimdi bunları birer örnekle tanıyalım.
jQuery append() Yöntemi
Bir elementin bittiği yere içerik ekler.Örneği inceleyelim:
JavaScript Kodu
<ol>
<li>Nesne 1</li>
<li>Nesne 2</li>
<li>Nesne 3</li>
</ol>
<button id="btn1">Yeni nesne ekle</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("ol").append("<li>Yeni nesne</li>");
});
});
</script><br/><br/>
<li>Nesne 1</li>
<li>Nesne 2</li>
<li>Nesne 3</li>
</ol>
<button id="btn1">Yeni nesne ekle</button>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("ol").append("<li>Yeni nesne</li>");
});
});
</script><br/><br/>
- Nesne 1
- Nesne 2
- Nesne 3
"Yeni nesne ekle" butonuna tıklandığında <OL></OL> elementleri arasına yeni bir LI değeri eklediği görülebilir.
jQuery prepend() Yöntemi
Bir elementin başladığı yere içerik ekler.Yukarıdaki örnekte $("ol").append(... olan kısımda append yazan yeri prepend olarak değiştirip deneyin. Bu kez içeriğin listenin sonuna değil başına eklendiğini göreceksiniz.
Sayfanıza append() kullanarak yeni HTML elementleri eklerken üç yol izleyebilirsiniz:
1. Yol: HTML Kullanmak
JavaScript Kodu
var txt1="<p>Text.</p>";
2. Yol: jQuery ile Eklemek
JavaScript Kodu
var txt2=$("<p></p>").text("Text.");
3. Yol: HTML DOM Kullanmak
JavaScript Kodu
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
txt3.innerHTML="Text.";
Aşağıdaki örneği çalıştırarak aynı anda üç yöntemi de kullanarak üç adet element oluşturduğumuzu göreceksiniz.
JavaScript Kodu
<script>
function appendText()
{
var txt1="<p>Yöntem 1</p>";
var txt2=$("<p></p>").text("Yöntem 2");
var txt3=document.createElement("p");
txt3.innerHTML="Yöntem 3";
$("#div1").append(txt1,txt2,txt3);
}
</script><br/><br/>
<div id="div1"> </div>
<button onclick="appendText();">Elementleri Ekle</button><br/><br/>
function appendText()
{
var txt1="<p>Yöntem 1</p>";
var txt2=$("<p></p>").text("Yöntem 2");
var txt3=document.createElement("p");
txt3.innerHTML="Yöntem 3";
$("#div1").append(txt1,txt2,txt3);
}
</script><br/><br/>
<div id="div1"> </div>
<button onclick="appendText();">Elementleri Ekle</button><br/><br/>
jQuery after() Yöntemi
Bir HTML elementinden önce başka bir element ya da içerik eklemek için bu kodu kullanırız.jQuery before() Yöntemi
Bir HTML elementinden sonra başka bir element ya da içerik eklemek için bu kodu kullanırız.Aşağıdaki örnek after() ve before() yöntemini anlamamızı kolaylaştıracaktır.
JavaScript Kodu
<script>
$(document).ready(function(){
$("#btn7").click(function(){
$("#ana").before("<b>«</b>");
});
$("#btn8").click(function(){
$("#ana").after("<b>»</b>");
});
});
</script>
<span id="ana">[BAŞLIK]</span><br>
<button id="btn7">Öncesine Ekle</button>
<button id="btn8">Sonrasına Ekle</button><br/><br/>
$(document).ready(function(){
$("#btn7").click(function(){
$("#ana").before("<b>«</b>");
});
$("#btn8").click(function(){
$("#ana").after("<b>»</b>");
});
});
</script>
<span id="ana">[BAŞLIK]</span><br>
<button id="btn7">Öncesine Ekle</button>
<button id="btn8">Sonrasına Ekle</button><br/><br/>
[BAŞLIK]
Kodu çalıştırdığınızda "btn1" idli butona bastığınızda BAŞLIK yazısının soluna, "btn2" idli butona bastığınızda BAŞLIK yazısının sağına içeriği («/») ekliyor.
after() ve before() yöntemlerini de yeni HTML elementleri eklemek için kullanabilirsiniz (Bu kullanım yukarıda append() komutunda anlatılmıştır).
Elementleri ve içerikleri silmek için jQuery'de iki ana yöntem vardır.
Bunlar;
- remove() belirtilen element ve içindekileri siler.
- empty() sadece belirtilmiş elementin içindekileri siler.
[BAŞLIK]
Yukarıdaki örneğe bakarsanız btn1 etiketli butona tıklandığında ana etiketine sahip başlık içeriğinin html elementiyle birlikte kaldırıldığını göreceksiniz.
Bu örnekte de yukarıdakine benzer şekilde element içindeki her şey silinir. Ancak içindeki nesnelerin silinmesini istediğimiz element durur. Örnekte 1 piksellik kenarlık yaptık, butona bastıktan sonra dahi bu kenarlığın durduğunu göreceksiniz.
Örneğin birkaç paragraf bulunan bir içerikten sadece class="" tagı sil olanları silmek istesek:
Butona bastığınızda sadece 1. paragrafın silindiğini görebilirsiniz.
Bunlar;
- remove() belirtilen element ve içindekileri siler.
- empty() sadece belirtilmiş elementin içindekileri siler.
jQuery remove() Yöntemi
remove() yöntemi ile belirtilmiş bir html parçasının tamamı, bu html parçası da dahil olmak üzere siler.
JavaScript Kodu
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ana1").remove();
});
});
</script>
<span id="ana1">[BAŞLIK]</span><br>
<button id="btn1">Sil Bunu</button><br/><br/>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ana1").remove();
});
});
</script>
<span id="ana1">[BAŞLIK]</span><br>
<button id="btn1">Sil Bunu</button><br/><br/>
[BAŞLIK]
Yukarıdaki örneğe bakarsanız btn1 etiketli butona tıklandığında ana etiketine sahip başlık içeriğinin html elementiyle birlikte kaldırıldığını göreceksiniz.
jQuery empty() Yöntemi
Belirlediğimiz elementin silinmesini istemiyorsak içini boşaltabiliriz. Bunun için empty() fonksiyonunu kullanırız.
JavaScript Kodu
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("#ana2").empty();
});
});
</script>
<div style="border: 1px #000000 solid;" id="ana2">[BAŞLIK]</div><br>
<button id="btn2">Sil Bunu</button><br/><br/>
$(document).ready(function(){
$("#btn2").click(function(){
$("#ana2").empty();
});
});
</script>
<div style="border: 1px #000000 solid;" id="ana2">[BAŞLIK]</div><br>
<button id="btn2">Sil Bunu</button><br/><br/>
[BAŞLIK]
Bu örnekte de yukarıdakine benzer şekilde element içindeki her şey silinir. Ancak içindeki nesnelerin silinmesini istediğimiz element durur. Örnekte 1 piksellik kenarlık yaptık, butona bastıktan sonra dahi bu kenarlığın durduğunu göreceksiniz.
Sadece Belirli Elementleri Silmek
jQuery'de remove() fonksiyonunu kullanarak bir html elementinden istediklerimizi silmesini sağlayabiliriz.Örneğin birkaç paragraf bulunan bir içerikten sadece class="" tagı sil olanları silmek istesek:
JavaScript Kodu
<script>
$(document).ready(function(){
$("#btn3").click(function(){
$("p").remove(".sil");
});
});
</script>
<div style="border: 1px #000000 solid;" id="ana3">
<p class="sil">1. paragraf</p>
<p class="silme">2. paragraf</p>
</div><br>
<button id="btn3">Sil Bunu</button><br/><br/>
$(document).ready(function(){
$("#btn3").click(function(){
$("p").remove(".sil");
});
});
</script>
<div style="border: 1px #000000 solid;" id="ana3">
<p class="sil">1. paragraf</p>
<p class="silme">2. paragraf</p>
</div><br>
<button id="btn3">Sil Bunu</button><br/><br/>
1. paragraf
2. paragraf
Butona bastığınızda sadece 1. paragrafın silindiğini görebilirsiniz.
Elementlerin CSS Stillerini ekleme, değiştirme, silme gibi işlemler için dört ana fonksiyonumuz vardır.
- addClass() belirtilen elemente stil ekler.
- removeClass() belirtilen elementteki stili kaldırır.
- toggleClass() belirtilen elementte stili değiştirir.
- css() belirtilen element için stil belirlememize yarar.
Daha önceden stil belirtilmemiş bir HTML elementine stil eklemek için addClass("stil adı") kullanırız. Stil adı, önceden CSS stil dosyamızda ya da stillerimiz arasında belirtilmiş olmalıdır.
Bir stile sahip html elementinden bu stili silmek için removeClass("stil adı") kullanırız. Silmek istediğimiz stil adını doğru belirtmiş olmamız gereklidir.
Zaten bir stile sahip elementin stilini değiştirmek içinse toggleClass("stil adı") kullanırız.
Aşağıdaki örneği inceleyin:
Kodları uyguladığınızda 1. buton yazı rengini kırmızı yapar, 2. buton kırmızı olan yazı rengini tekrar siyaha dönüştürür, 3. butonsa stil ne olursa olsun mavi renge dönüştürür, tekrar tıklandığında stili geri siler.
NOT: Yukarıdaki örnekte CSS stil dosyası oluşturup şu stilleri yazmayı unutmayın:
div.kirmizi { color: #FF0000; }
div.mavi { color: #0000FF; }
Örneğin bir paragrafın arkaplan rengini beyazdan sarıya dönüştüren bir uygulama yapalım.
Peki birden fazla değişikliği tek bir fonksiyonla yapabilir miyiz? Evet! Bunun için {} işaretleri arasına "özellik":"değer" şeklinde, aralarında virgül olan bir ifade kullanabiliriz. Örneğin:
$("p").css({"background-color":"yellow","font-size":"200%"});
Üstteki örneği bir üst satırdaki gibi değiştirirseniz göreceğiniz şey hem yazının büyüdüğü hem arkaplanın sarı olduğudur.
- addClass() belirtilen elemente stil ekler.
- removeClass() belirtilen elementteki stili kaldırır.
- toggleClass() belirtilen elementte stili değiştirir.
- css() belirtilen element için stil belirlememize yarar.
Daha önceden stil belirtilmemiş bir HTML elementine stil eklemek için addClass("stil adı") kullanırız. Stil adı, önceden CSS stil dosyamızda ya da stillerimiz arasında belirtilmiş olmalıdır.
Bir stile sahip html elementinden bu stili silmek için removeClass("stil adı") kullanırız. Silmek istediğimiz stil adını doğru belirtmiş olmamız gereklidir.
Zaten bir stile sahip elementin stilini değiştirmek içinse toggleClass("stil adı") kullanırız.
Aşağıdaki örneği inceleyin:
Benim rengim nedir?
Kodları uyguladığınızda 1. buton yazı rengini kırmızı yapar, 2. buton kırmızı olan yazı rengini tekrar siyaha dönüştürür, 3. butonsa stil ne olursa olsun mavi renge dönüştürür, tekrar tıklandığında stili geri siler.
NOT: Yukarıdaki örnekte CSS stil dosyası oluşturup şu stilleri yazmayı unutmayın:
div.kirmizi { color: #FF0000; }
div.mavi { color: #0000FF; }
jQuery css() Fonksiyonu
css("özellik","değer") şeklinde kullanılan bu fonksiyon, bir elementin stilleri ile ilgili eklemeler ve değişiklikler yapmamızı sağlar.Örneğin bir paragrafın arkaplan rengini beyazdan sarıya dönüştüren bir uygulama yapalım.
Arkaplan rengi istiyorsan butona tıkla!
Peki birden fazla değişikliği tek bir fonksiyonla yapabilir miyiz? Evet! Bunun için {} işaretleri arasına "özellik":"değer" şeklinde, aralarında virgül olan bir ifade kullanabiliriz. Örneğin:
$("p").css({"background-color":"yellow","font-size":"200%"});
Üstteki örneği bir üst satırdaki gibi değiştirirseniz göreceğiniz şey hem yazının büyüdüğü hem arkaplanın sarı olduğudur.
AJAX, bir sunucu ile anlık bağlantı sağlanması ve verinin çevrimiçi alınmasını sağlayan sistemdir. Tüm sayfa yüklenmeden veri alma, değiştirme ve silme işlemi yapabildiğimiz bu sistemi jQuery ile kolay yoldan yapabiliriz.
Kullanım: $(nesne).load(adres, veri, dönüş fonksiyonu);
- adres, veriyi alacağımız internet sayfası adresi, dosya adı.
- veri
- dönüş fonksiyonu, veri yüklendikten sonra çalıştırılacak bir fonksiyon
* * *
Örneğin bir not defterinden butona tıkladığımızda veri alan şu sisteme bakalım.
Not defteri açıp adını "demo.txt" koyun ve içine şunları yazın:
Ardından HTML belgemizde aşağıdaki koda yer verelim:
Sayfamızı açtığımızda butona tıklayın ve not defterindeki verinin geldiğini görün.
demo.txt dosyasında yer verilen html elementleri arasından seçim yapıp dosya içinde sadece o yerin veri olarak alınmasını sağlayabiliriz. Bunun için dosya adından sonra nesneyi belirten bir ifade kullanırız:
Yukarıdaki örnekte bu değişikliği yaparsanız demo.txt içinde sadece Veri Alindi! kısmının göründüğünü göreceksiniz.
* * *
* * *
- GET - veriyi almak için
- POST - veri göndermek için
GET ile Veri Almak
$.get("adres",function(veri){ ifadeler }); şeklinde kullandığımız bu fonksiyon, bir sayfadan GET yöntemi ile veri almamızı sağlar.
Bunu bir örnekle anlatalım.
Bir asp dosyası hazırlayın ve içine şu bilgiyi koyun:
Ardından HTML dosyamızda şu kodlara yer verelim.
Butona tıklandığında demo.asp dosyasındaki verinin id="txt" olan div elementi içerisine yerleştirildiğini göreceksiniz.
* * *
POST ile Veri Göndermek
$.post("adres",{form_adı:"değer"},function(veri){ifadeler}); şeklinde kullandığımız POST yöntemi, bir internet sayfasına veri göndermemize yarar.
Şimdi örneğe geçelim:
Bir "demo.asp" dosyası yaratıp içine şunu yazın:
Ardından HTML dosyanıza şu kodu kopyalayın:
Böylelikle jQuery ile ilgili temel düzeyde bilgiyi sizlere vermiş olduk. Yeni programlama deneyimlerimizde görüşmek üzere...
jQuery load() fonksiyonu
load() fonksiyonu ile bir internet sayfasından anlık veri alabiliriz.Kullanım: $(nesne).load(adres, veri, dönüş fonksiyonu);
- adres, veriyi alacağımız internet sayfası adresi, dosya adı.
- veri
- dönüş fonksiyonu, veri yüklendikten sonra çalıştırılacak bir fonksiyon
* * *
Örneğin bir not defterinden butona tıkladığımızda veri alan şu sisteme bakalım.
Not defteri açıp adını "demo.txt" koyun ve içine şunları yazın:
HTML Kodu
<h2>Veri Alindi!</h2>
<p>Veriyi aldik, napalim?</p>
<p>Veriyi aldik, napalim?</p>
Ardından HTML belgemizde aşağıdaki koda yer verelim:
JavaScript Kodu
<div id="txt" style="border: 1px #000000 solid; margin:
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn">Veri Al</button>
<script>
$("#btn").click(function(){
$("#txt").load("demo.txt");
});
</script>
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn">Veri Al</button>
<script>
$("#btn").click(function(){
$("#txt").load("demo.txt");
});
</script>
Sayfamızı açtığımızda butona tıklayın ve not defterindeki verinin geldiğini görün.
demo.txt dosyasında yer verilen html elementleri arasından seçim yapıp dosya içinde sadece o yerin veri olarak alınmasını sağlayabiliriz. Bunun için dosya adından sonra nesneyi belirten bir ifade kullanırız:
JavaScript Kodu
<div id="txt2" style="border: 1px #000000 solid; margin:
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn2">Veri Al</button>
<script>
$("#btn2").click(function(){
$("#txt2").load("demo.txt h2");
});
</script>
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn2">Veri Al</button>
<script>
$("#btn2").click(function(){
$("#txt2").load("demo.txt h2");
});
</script>
Yukarıdaki örnekte bu değişikliği yaparsanız demo.txt içinde sadece Veri Alindi! kısmının göründüğünü göreceksiniz.
* * *
Dönüş Fonksiyonu
Bir load() yüklemesi yaptığımız zaman hata var mı diye kontrol etmek ya da veri yükledikten sonra işlem yapmak için load() içinde bir fonksiyona yer verebiliriz.
JavaScript Kodu
$("button").click(function(){
$("#div1").load("demo.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("İçerik başarıyla yüklendi.");
if(statusTxt=="error")
alert("Hata: "+xhr.status+": "+xhr.statusText);
});
});
$("#div1").load("demo.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("İçerik başarıyla yüklendi.");
if(statusTxt=="error")
alert("Hata: "+xhr.status+": "+xhr.statusText);
});
});
* * *
Veri Alma ve Veri Gönderme
jQuery ile AJAX kullanarak veri işlemek için önce şu kavramları tanımlayalım:- GET - veriyi almak için
- POST - veri göndermek için
GET ile Veri Almak
$.get("adres",function(veri){ ifadeler }); şeklinde kullandığımız bu fonksiyon, bir sayfadan GET yöntemi ile veri almamızı sağlar.
Bunu bir örnekle anlatalım.
Bir asp dosyası hazırlayın ve içine şu bilgiyi koyun:
ASP Kodu
<%
response.write("Bu disardan aldigimiz bir bilgidir.")
%>
response.write("Bu disardan aldigimiz bir bilgidir.")
%>
Ardından HTML dosyamızda şu kodlara yer verelim.
JavaScript Kodu
<div id="txt" style="border: 1px #000000 solid; margin:
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn">Veri Al</button>
<script>
$("#btn").click(function(){
$.get("demo.asp",function(veri){
$("#txt").html(veri);
});
});
</script><br/><br/>
3px; padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn">Veri Al</button>
<script>
$("#btn").click(function(){
$.get("demo.asp",function(veri){
$("#txt").html(veri);
});
});
</script><br/><br/>
Butona tıklandığında demo.asp dosyasındaki verinin id="txt" olan div elementi içerisine yerleştirildiğini göreceksiniz.
* * *
POST ile Veri Göndermek
$.post("adres",{form_adı:"değer"},function(veri){ifadeler}); şeklinde kullandığımız POST yöntemi, bir internet sayfasına veri göndermemize yarar.
Şimdi örneğe geçelim:
Bir "demo.asp" dosyası yaratıp içine şunu yazın:
ASP Kodu
<%
response.write("Adiniz " & Request.Form("ad") & ", soyadiniz " & Request.Form("soyad"))
%>
response.write("Adiniz " & Request.Form("ad") & ", soyadiniz " & Request.Form("soyad"))
%>
Ardından HTML dosyanıza şu kodu kopyalayın:
JavaScript Kodu
<div id="txt3" style="border: 1px #000000 solid; margin: 3px;
padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn3">Veri Al</button>
<script>
$("#btn3").click(function(){
$.post("demo.asp",
{
ad:"Murat",
soyad:"Elicaliskan"
},
function(data,status){
$("#txt3").html(data);
});
});
</script><br/><br/>
padding: 5px; width: 320px; height: 140px;"> </div>
<button id="btn3">Veri Al</button>
<script>
$("#btn3").click(function(){
$.post("demo.asp",
{
ad:"Murat",
soyad:"Elicaliskan"
},
function(data,status){
$("#txt3").html(data);
});
});
</script><br/><br/>
Böylelikle jQuery ile ilgili temel düzeyde bilgiyi sizlere vermiş olduk. Yeni programlama deneyimlerimizde görüşmek üzere...
Yorumlar
Yorum Gönder