Browse Tag

JQuery

jQuery ile Bir sınıftaki Öğelerden İstediğimizi Seçebilmek

Merhaba arkadaşlar bu yazımda sizlere kısaca jQuery kullanarak bir css sınıfındaki öğelerden yalnızca birini nasıl seçebileceğimizi anlatmaya çalışacağım. Bildiğiniz gibi eğer kullanmak istediğimiz öğeye özgü bir stil oluşturmak ya da yalnızca o öğeyle ilgili işlemler yapmak istiyorsa id kullanmak daha mantıklı bir yoldur, ancak bazı durumlarda sınıf olarak belirtilmiş bir öğe üzerinde de işlem yapmamız gerekebilir. Bunu nasıl yapabileceğimizi aşağıdaki kodla anlatmaya başlıyorum.

Öncelikle boş bir HTML sayfası oluşturup en başına da aşağıdaki css kodlarını yazalım

<style type="text/css">
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

.sag {
	background-color:#E8E8E8;
}

.sol_baslik {
	background-color:#DFE0A9;
}

.sol_baslik:hover {
	background-color:#F491DE;
}

</style>

CSS kodumuzda önemli olan iki sınıfımız var. Birinci sag adını verdiğim sınıf ve bunlarla divlerimi oluşturacağım sınıf; ikincisi de sol_baslik sınıfı ki üzerinde işlem yapacağım sınıf. Ayrıca fark ettiğiniz gibi sol_baslik için bir de üzerine fare ile gelince farklı efekt vermek için hover kullandım ancak bu örneğimizin daha pekişmesi için yoksa jQuery de bu hover seçicisine ihtiyacım olmayacak.

Şimdi de bu kodların altına aşağıdaki html kodumuzu ekleyelim

<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>

Kodumuzu bu haliyle çalıştırdığımızda ekranda üç adet gri div ve onların içinde de sarımsı bir arkaplan rengine sahip yazılar göreceksiniz. Fare ile bu yazıların üzerine geldiğinizde o yazının arkaplan renginin pempeye döndüğünü göreceksiniz.

Peki biz o yazıların değil de başka bir şeyin mesela örneğimizde olduğu gibi divlerin üzerine geldiğimizde o divin içindeki yazının arkaplan renginin değişmesini isteseydik ne olacaktı? Basit anlatımla sag isimli sınıftaki divin üzerine fare ile gelince sol_baslik sınıfındaki yazının rengini değiştir dememiz gerekiyor ancak böyle bir durumda sol_baslik sınıfındaki bütün öğeler değişecek çünkü sınıfa ait bir özelliğin değişmesi sınıftaki bütün öğeleri değiştirecektir. Bunun için de jQuery kullanarak aşağıdaki kodda olduğu gibi this parametresi ve onun içindekileri seçmemizi sağlayan childeren parametresini kullanıyoruz.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

 <script type="text/javascript">
	$(document).ready(function(){
	
		  $('.sag').hover(
         function () {
		   $(this).children(".sol_baslik").css({"background-color":"#900"});
         }, 
         function () {
           $(this).children(".sol_baslik").css({"background-color":"#3292b8"});
         });	 
	});
</script>

Yukarıdaki jQuery kodunda önce jQuery kütüphanesini çağırıyoruz ardından da sayfamız yüklendikten sonra çalışmasını istediğimiz fonksiyonumuzu yazıyoruz. sag isimli sınıftaki bir öğenin üzerine fare ile gelindiğinde this ile o öğeyi seçiyoruz ve childeren ile de öğenin kapsadığı sol_baslik sınıfının (dikkat edin yalnızca üzerine gelinen sag isimli sınıfa sahip öğenin içinde bulunan sol_baslik sınıfını değiştiriyoruz) arkaplan rengini farklı bir renk yapıyoruz. jQuery kütüphanesinin temel yazım tekniğine göre oluşturduğumuz kodda yazdığımız ikinci fonksiyon da fare, ilgili öğenin üzerinden ayrılınca o öğenin farklı bir arkaplan rengini almasını sağlıyor.

En son tüm kodumuz aşağıdaki gibi olacak. Kodu kendiniz deneyerek ne demek istediğimi daha rahat anlayabilirsiniz.

<style type="text/css">
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

.sag {
	background-color:#E8E8E8;
}

.sol_baslik {
	background-color:#DFE0A9;
}

.sol_baslik:hover {
	background-color:#F491DE;
}

</style>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

 <script type="text/javascript">
	$(document).ready(function(){
	
		  $('.sag').hover(
         function () {
		   $(this).children(".sol_baslik").css({"background-color":"#900"});
         }, 
         function () {
           $(this).children(".sol_baslik").css({"background-color":"#3292b8"});
         }); 
	});
	
</script>
<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>

Burada biz bir divin üzerine geldiğimizde içindeki başka bir sınıfa ait öğenin değişerek aynı sınıftaki diğer öğelerin sabit kalmasını sağladık. Siz isterseniz daha farklı senaryolar deneyebilirsiniz. Örneğin bir düğmeye basıldığında yukarıdaki bir başlığı değiştirmek gibi yani değiştirilecek öğenin mutlaka bir üst elemanın üzerine gelince değişmesi gibi bir şart yok. Değişik bir örnek olarak deneme ismini verdiğimiz bir idye sahip bir divin içeriğiyle ilgili işlem yapabilmek için kodumuzu aşağıdaki gibi değiştirmemiz gerekecekti.

  $(this).children(".sol_baslik").css({"background-color":"#900"});
         },

Konunun daha iyi anlaşılabilmesi için aşağıdaki video anlatımımdan da yararlanabilirsiniz. Şimdilik hoşçakalın.

JQuery ile PHP Kullanarak Sayfayı Yenilemeden POST Metodunu Kullanmak

Merhaba arkadaşlar. Bu yazımda jQuery kullanarak bir formun sayfayı yenilemeye gerek kalmadan aynı sayfa içerisinde nasıl POST metodu kullanılarak gönderilebileceğini anlatmaya çalışacağım. Hem bu konunun daha iyi anlaşılabilmesi hem de daha önce bahsettiğim bazı noktaları tekrar anlatmayacağım için daha önceden yazılmış şu ve de şu yazılarıma göz atmanızda fayda var.

Fazla uzatmadan konumuza geri dönelim. İlk önce kendimize bir php sayfası oluşturalım mesela ornek.php olsun. Şimdi de sayfamıza jQuery’i çağıralım

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

jQuery kütüphanemizi çağırdıktan sonra sıra geldi post metoduyla göndereceğimiz formumuzu oluşturmaya. Örnek olarak ben aşağıdaki gibi basit bir form oluşturdum.

<input type="text" name="kullanici" id="kullanici_id" />
<input type="text" name="sifre" id="sifre_id" />
<input type="button" name="gonder" id="gonder" value="Gönder" />

Burada bahsetmek istediğim iki temel nokta var. Birincisi dikkat ettiyseniz formumuzu oluştururken <FORM>....</FORM> etiketlerini kullanmadım çünkü formumuzu jQuery ile göndereceğimiz için buna ihtiyacımız yoktu. İkincisi ise form elemanlarımıza bir id verdim. Aslında sadece name parametrelerini de kullanabilirdik ancak size tavsiyem jQuery ile işlem yaparken id ile hareket etmeniz sizin için daha yararlı olacaktır.

Form alanının üzerine (siz isterseniz altınada ekleyebilirsiniz) formu gönderdiğimizde kodumuzun çalıştığını anlamamızı sağlayacak bir div oluşturuyorum

<div id='sonuc'>Gönderilen değerlere göre bu div'in içeriği değişecek</div>

Evet şimdilik div’imizin içinde bir bilgi mesajı var. Eğer kodumuz doğru çalışırsa form gönderildiğinde  div’in içindeki yazı gönderilen form değerlerini gösterecek şekilde değişecek.

Şimdi formu aynı sayfada gönderip sonucu görüntülememizi sağlayacak jQuery kodunu yazalım. Önce sayfa yüklendiğinde jQuery ile işlem yapacağımızı belirten kod blok temel çerçevemizi oluşturalım.

<script type="text/javascript">
	$(document).ready(function(){


});

</script>

Şimdi de yavaş yavaş jQuery kodumuzun içini doldurmaya başlayalım.

Formumuzun post edilmesi işleminin ne zaman olacağını yani kodumuzun ne zaman işleyeceğini belirtmek için kodumuza gonder id’sini verdiğimiz butona tıklandığında çalışmasını istediğimizi belirtiyoruz ve bunun için aşağıdaki kodu yazıyoruz.

$("#gonder").click(function(){

});

Böylece formdaki butona tıklandığında bir fonksiyonun çalışmasını istediğimizi belirttik. Formda iki alanımız var. Bunlar kullanıcı ve şifre alanları. Yine bunlara verdiğimiz id sayesinde içlerindeki değeri jQuery kodumuza aktarmak için iki adet değişkene ihtiyacımız var şimdi de onları oluşturalım.

var kullanici_degeri = $('#kullanici_id').val();
var sifre_degeri = $('#sifre_id').val();

Gördüğünüz gibi kullanici_id kimlikli input değerini kullanici_degeri isimli değişkene ve yine aynı şekilde sifre_id kimlikli input değerini de sifre_degeri ismini verdiğimiz değişkenlere aktardık

Değişkenlere aktardığımız değeri gönderecek kodu yazalım şimdi

$.post("ornek2.php",{kullanici_gonder:kullanici_degeri,sifre_gonder:sifre_degeri},function(gonderVeri){

  });

Yukarıdaki kodu kısaca açıklayalım. Öncelikle post metodunu kullanarak ornek2.php sayfasına form verilerini gönderdiğimizi belirtiyoruz. Tabi biz şimdi böyle bir sayfa oluşturmadık ancak açıklamalar bittikten sonra hemen onu da oluşturacağız. Formumuzu ornek2.php sayfasına gönderirken kullanici_degeri ve sifre_degeri isimli değişkenlerimiz jQuery tarafaından yorumlanabilen java script değişkenleriydi ve bizim bunları php tarafından anlaşılabilecek değişkenlere dönüştürmemiz gerekiyordu ve bizde bunu yaparak söz konusu değişkenleri kullanici_gonder ve sifre_gonder isimli değişkenlere aktararak gonderVeri fonksiyonuyla ornek2.php sayfasına gönderdik.

Şimdi de ornek2.php sayfasına gönderdiğimiz form bilgilerini yukarıda sonuc id sini verdiğimiz div’e yazdıracak kodu eklemeye sıra geldi.

$('#sonuc').html(gonderVeri);

 Böylece gonderVeri fonksiyonunun oluşturduğu çıktı div’imizin içinde görüntülenebilecek.

Bütün bunlar size karışık gelebilir ancak aslında çok basittir. Aşağıda şimdiye kadar parça parça oluşturduğumuz ornek.php sayfasının tam halini incelemek şimdiye kadar yaptıklarımızı anlamanızda size yardımcı olacaktır.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='sonuc'>Gönderilen değerlere göre bu div'in içeriği değişecek</div>


<input type="text" name="kullanici" id="kullanici_id" />
<input type="text" name="sifre" id="sifre_id" />
<input type="button" name="gonder" id="gonder" value="Gönder" />


<script type="text/javascript">
	$(document).ready(function(){

		$("#gonder").click(function(){
		var kullanici_degeri = $('#kullanici_id').val();
		var sifre_degeri = $('#sifre_id').val();
		$.post("ornek2.php",{kullanici_gonder:kullanici_degeri,sifre_gonder:sifre_degeri},function(gonderVeri){
                               $('#sonuc').html(gonderVeri);

                 });
			});
});

</script>

 Umarım kodun tamamı yaptıklarımızı anlamanızda yardımcı olmuştur.

Şimdide formu gönderdiğimiz ornek2.php dosyasının kodlarını yazalım.

<?php

$gelen_kullanici = $_POST['kullanici_gonder'];
$gelen_sifre = $_POST['sifre_gonder'];

echo "Aynı sayfa içinde jQuery ile post edilen değerler 
<br>
Kullanıcı: $gelen_kullanici
<br>
Şifre: $gelen_sifre
";

?>

 Kodlar çok basit olduğu için açıklamaya gerek görmüyorum. Anladığınız gibi gelen değişkenleri yazdırıyorum sadece. Tabi siz burada istediğiniz gibi hareket edebilirsiniz. Örneğin gelen verileri eposta yoluyla iletmek ya da veritabanına yazmak gibi. Sonucun başarılı olup olmadığına ait bir mesajı yazdırabilirsiniz..

jqpost0

Umarım size faydası olacak bir yazı olmuştur. Başka bir yazıda görüşmek üzere hoşçakalın.

JQuery ile PHP Kullanarak Sayfayı Yenilemeden GET Metodunu Kullanmak

Merhaba arkadaşlar. Bu yazıda sizlere JQuery kullanarak aynı sayfa içinde bir başka deyişle sayfayı yenilemeden PHP ile GET metodunun kullanımını anlatmaya çalışacağım.

Daha önceki yazımda sizlere sayfayı yenilemeden aynı sayfada bir DIV elementinin içeriğini dinamik olarak değiştirmeyi anlatmıştım. Eğer okumadıysanız öncelikle onu okumanızı tavsiye edeceğim ki yazının bundan sonrasını da o yazıdaki kodların bir kısmını temel alarak yazmaya çalışacağım.

Hatırlayacağınız gibi o yazımda da öncelikli olarak JQuery’i çağırmış ve sonra da içeriği değişecek bir div oluşturmuştum. Şimdi yine benzer işlemleri yapıyorum. Boş bir php sayfası açıp aşağıdaki kodları ekliyorum

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

JQuery’i çağırdık ve icerik id’sine sahip tıkladığımız linke göre GET metoduyla içeriğini dolduracağım bir div oluşturduk.

Şimdi tıklandığında GET metodunu kullanmamızı sağlayacak linkimizi oluşturalım.

<a class='get_ornek' id='1.Değer' href='#'>1. Değer</a>
<br>
<a class='get_ornek' id='2.Değer' href='#'>2. Değer</a>
<br>
<a class='get_ornek' id='3.Değer' href='#'>3. Değer</a>
<br>

Gördüğünüz gibi aynı sınıfa ait 3 link ekledik. Her bir linke de farklı 3 id ekledik ki bu id’ler get metodunu kullanarak başka bir sayfaya göndereceğimiz değerleri barındırıyorlar.

Daha önceki yazımda da bahsettiğim gibi bu tür işlerin birden farklı ve bu anlattığımdan daha profesyonel yöntemleri olabilir ancak bence başlangıç için en iyi anlaşılacak olan yöntem bu.

Şimdi de linklerimize tıklandığında istediğimiz eylemi gerçekleştirecek script kodumuzu yazalım.

<script type="text/javascript">
	$(document).ready(function(){

		$(".get_ornek").click(function(){
		var goster = $(this).attr('id');
		$.get( "ornek2.php", { getir:goster },function(getVeri){
                               $('#icerik').html(getVeri);

              });
	});
});

</script>

Kodumuzu yukarıdaki gibi yazdıktan sonra şimdi de açıklayalım.

İlk önce yazdığımız script’in ne zaman çalışacağını belirtiyoruz. Anlayacağınız gibi get_ornek sınıfından bir elemana (bizim durumumuzda bunlar linkler oluyor ama siz isterseniz düğme, div ya da aklınıza gelen başka şeyleri kullanabilirsiniz.) tıklandığında script harekete geçecek

Ardından goster adında bir değişken tanımlıyor ve bu değişkenimize değer olarak tıklanan linkin sahip olduğu id’yi atıyoruz.

Bunlardan sonra get metodunu kullanarak ornek2.php sayfasına getir parametresiyle goster değişkenini göndereceğimizi ve bunu yaparken de getVeri fonksiyonunu çalıştıracağımızı belirtiyoruz.

Buradaki script dilinde yazılan $.get( "ornek2.php", { getir:goster } kafanızı karıştırdıysa bu kodun php ile  nasıl yazıldığını gösternek sanırım konuyu daha hızlı kavramanızı sağlayacaktır. <a href='ornek2.php?getir=$goster'>...</a> İşte biz java script ile bu kodun yaptı işlevi yaptık. Eğer java script yerine bunun gibi yaparsak sayfayı yenilememiz hatta ornek2.php’ye gitmemiz gerekecekti ve biz de içinde bulunduğumuz sayfadan ayrılmak zorunda kalacaktık.

En sonunda da getVeri fonksiyonuyla ne yapacağımızı yazdık. Burada da icerik id’sine sahip div’imizin içine  getVeri fonksiyonundan gelen html’i yani ornek2.php’yi çağıracağımızı belirttik.

Sonuçta sayfamız aşağıdaki gibi oldu

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

<a class='get_ornek' id='1.Değer' href='#'>1. Değer</a>
<br>
<a class='get_ornek' id='2.Değer' href='#'>2. Değer</a>
<br>
<a class='get_ornek' id='3.Değer' href='#'>3. Değer</a>
<br>

<script type="text/javascript">
	$(document).ready(function(){

		$(".get_ornek").click(function(){
		var goster = $(this).attr('id');
		$.get( "ornek2.php", { getir:goster },function(getVeri){
                               $('#icerik').html(getVeri);

              });
	});
});

</script>

Yukardaki kodları ornek1.php olarak kaydedelim. Şimdi de linklere tıklandığında get metodunu kullanacağımız ve kodumuzu test edebileceğimiz ornek2.php sayfasını oluşturalım.

<?php
$gelen_veri = $_GET['getir'];

echo "Linke tıklandı ve GET ile gönderilen değer : $gelen_veri";

?>

Yukarıdaki ornek2.php kodumuzda önce gelen_deger isminde bir değişken oluşturduk ve değişkenimize get metoduyla gelen getir değişkenini atadık. Sonrada ornek1.php sayfasındaki div’in içinde gösterilmek üzere işlemimizi doğru yaptığımızı görmemizi sağlayacak yazımızı yazdık

Şimdi iki sayfamızı da aynı dizin altına kopyalayarak ornek1.php yi açarak test edelim. Gördüğümüz gibi linklerimiz çalışıyor ve tıkladığımız linke göre div’in içinde ilgili linkin id’si yazıyor. ve sayfamız da yenilenmiyor ya da değişmiyor.

Eğer birden fazla değişkenle get metodu kullanmak isteseydik nasıl olacaktı? Bunun çeşitli yolları var. Bunlardan biri de gönderilen tek id’ye bütün değerleri, arada bir özel karakter kullanarak atayarak göndermek. Örneğin sayfaya hem 6 hem de mavi değerlerini göndermek istersek id = 6;mavi şeklinde gönderir ve bunu da php’nin explode özelliği ile noktalı virgüllerden ayırabiliriz. Ya da hiç uğraşmadan değerleri id yerine linke çeşitli data parametreleri vererek de yapabiliriz. Bunların da script kodunda birden fazla değişken olması demek olduğunu da belirtelim. Her yöntemin kendine göre avantajları ya da dezavantajları var. Hangisi kolayınıza geliyorsa onu seçebilirsiniz.

Bir sonraki yazımda da POST metodunun aynı sayfada, sayfa yenilennmeden nasıl kullanılacağından bahsedeceğim. Şimdilik hoşçakalın

jQuery ile Tıklanan Linki Sayfayı Yenilemeden Açmak

Merhaba arkadaşlar. Bugünkü yazımda sizlere JQuery ile tıklanan bir bağlantıyı aynı sayfa içindeki bir div içerisinde sayfayı yenilemeden açmayı anlatmaya çalışacağım. Böylece siz de artık bir çok web sayfasında kullanılan bu yöntemi kullanabileceksiniz.

İlk olarak sayfamızda JQuery kullanmak için sayfamızın başında JQuery’i çağırmamız gerekiyor. Bunun için iki yol izleyebilirsiniz. Birincisi ki ben de bunu tavsiye ederim JQuery’i indirmek ve ona referans vermek; ikincisi ise direk JQuery sayfasına referans vererek kullanmak ki burada hızlı olması açısından ben bunu tercih edeceğim.

Şimdi sayfamıza JQuery’i çağırıyoruz

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

Daha sonra tıklanan bağlantıya göre içeriği güncellenecek bir div oluşturuyoruz.

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

Şimdi de div’imizin içeriğini değiştirmek için kullanacağımız bir bağlantı oluşturalım

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

Farkettiğiniz gibi oluşturduğumuz linkin href kısmına bir değer yerine # yazdık. Böylece linkimize tıklandığında bir sayfa açmamasını, az sonra oluşturacağımız java script koduyla istediğimizi yapmasını sağlayacağız. Tabi href kısmı da kullanılabilir ancak ben burada en basit anlaşılabileceğini düşündüğümü yazdım.

Diğer taraftan linkimize bir class ve div’imize de bir id atadığımızı görüyorsunuz. Bunların nedenini de açıklayalım hemen. Div’e bir id atayarak yazacağımız script ile o div’i seçebiliyoruz. Bu nedenle unutmayalım aynı sayfada aynı isimde sadece bir id olabilir; yoksa kodlarımız çalışmayacak ve hata verecektir. Eğer sayfamızda birden fazla id kullanacaksak her birine farklı isim vermeliyiz. Class’larda ise durum daha farklı. Aynı sayfa içinde istediğimiz kadar aynı isimde class kullanabiliriz. Böylece aynı isimleri taşıyan class’lara istediğimizi, hepsi için tek tek kod yazmamıza gerek kalmadan uygulayabiliriz. Linkimize de bu yüzden class verdik zaten. Aynı class adına sahip bütün linklerle oluşturduğumuz div içinde farklı sayfalar açabileceğiz ancak bunun için de her linke farklı bir id daha atayacağız ki script kodumuz gelen id’ye göre ayrı ayrı davranabilsin. Fakat bunu bir sonraki yazımda anlatacağım.

Daha fazla uzatmadan ilgili script kodumuzu da yazalım. Öncelikle kodumuzun ne zaman çalışmaya başlamasını yani ne zaman aktif olmasını istiyoruz? tabiki sayfamız açıldığında. O zaman document ready bloğunu kullanacağız Genelde sayfa yükleme süresini geciktirmemesi için java script kodları sayfanın altına yazılır. Ben de öyle yapacağım ama dikkat etmemiz gereken bir nokta var. Bir sayfada sadece bie kez document ready bloğu olur. Zaten ikincisine de gerek yok. Bu blok içine kullanmak istediğimiz herşeyi yazabiliyoruz zaten.

Bloğumuzu aşağıdaki gibi yazalım

<script type="text/javascript">
	$(document).ready(function(){

	});
</script>

 Şimdi sıra geldi bu blok içine yazacağımız koda ki böylece tıklanan linkimiz div’in içeriğini değiştirebilsin. Oluşturduğumuz icerik_degistir isimli class’a sahip linkimize tıklanınca bir fonksiyon çalıştırmak istiyoruz. Dolayısıyla document ready bloğumuzun içine aşağıdaki kodu yazıyoruz

$(".icerik_degistir").click(function(){

});

 Şimdi de bu fonksiyonumuzun içine, linkimize tıklandığında ne olmasını istediğimizi yazalım

 $('#icerik').load("ornek2.php");

 Burada gördüğünüz gibi icerik id’sine sahip div’imizin içine ornek2.php sayfamızı yükledik. Burada dikkat etmemiz gereken bir nokta var. Çağıracağımız sayfa kendi sitemize ait bir sayfa.. Dışardan bir sayfa çağırmak istersek kodumuz daha farklı olacaktı onu da başka bir yazımda anlatmaya çalışırım.

Bütün bunların sonunda script kodumuzun tamamı aşağıdaki gibi olacak

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Dikkat ettiyseniz icerik_degistir’in önünde bir nokta var. Bu icerik_degistir’in bir sınıf olduğunu gösterir. Aynı şekilde icerik’in önündeki diyez (#) işareti de onun bir id’yi temsil ettiğini gösterir.

Siz de önce kodu yazdığımız sayfadaki div içinde açılacak başka bir sayfa oluşturun ve adını kodu aynen uygulayacaksanız ornek2.php olarak verin.

Sonuçta yazdığımız kodun tamamı aşağıdaki gibi olacaktır.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id='icerik'>Tıklanan bağlantıya göre bu divin içeriği değişecek</div>

<a href='#' class='icerik_degistir'>Div içeriğini değiştir</a>

<script type="text/javascript">
	$(document).ready(function(){
			$(".icerik_degistir").click(function(){
               $('#icerik').load("ornek2.php");
			});
	});
</script>

 Yukarıdaki kodu bir html ya da php sayfası olarak kaydederseniz çalıştığını göreceksiniz. Tabi çalışması için basit bir ornek2.php sayfası oluşturup aynı dizine koymanız ve bir php server üzerinde çalışmanız kaydıyla… İsterseniz ornek2.php yerine ornek2.html kullanarak php den bağımsız çalışabilirsiniz.

Bir sonraki yazımda sayfayı yenilemeden aynı sayfa içinde form gönderme yani POST ve GET‘in nasıl yapıldığını anlatmaya çalışacağım