Genelde uygulamalarimda sikca kullandigim javascript kodlarimi bu konuda toplamak istiyorum. Kodlari aklimda tutmayi sevmedigimden yada tekrar kullanmam uzun sure aldigi icin unutabiliyorum. Bu sorund egil, kullanim sekli ve kullanim alanlarini bildikten sonra kodlari ezberlemek gerekmez.
Konuda yer verilen anlatimlar:
- .on (Tiklama tetikleme)
- Goster/gizle (hide.show)
- Jquery Ajax kullanimi
- attr ile tanimli parametreleri alma
- attr ile parametre içeriklerini değiştirme
- Toplama, çıkarma, çarpma bölme
- val() parametresi ile form iceriklerini alalim
- html() ile kodlar arasindaki veriyi alma
- css ozelliklerini degistirme
- addClass-removeClass (Class ekleme/silme)
- Jquery Form Event fonksiyonlari
- setTimeout (timer) zaman (bekletme) fonksiyonu
Konuyu hazirlarken hem kendimi hemde bu konuda calismalari olabilecek arkadaslara takim cantasi olabilsin diye basliyorum. Konu herdaim yeni fikirler, yeni seyler buldugumda guncellenecektir. Sizlerden oneri gelirse konuya ekleyecegim, en azindan aradigimiz hersey tek bir konuda toplanmis olur ;)
Yardimci kaynaklar
Ilk olarak yardimci kaynaklara link vermek istiyorum, en azindan takildiginiz yerlerde yardim icin kontrol edebilirsiniz.
- Ana site: http://jquery.com
- Jquery konusunda harika videolu anlatimlar: http://try.jquery.com/
- Jquery yeni versiyon ve indirme: http://jquery.com/download/
Jquery dosyasini tanimlama
Ben calismalarimda jquery uygulamasini kullaniyorum, oncelikle jquery dosyasini header meta taglari arasina yada yazacagimiz javascript kodlarinin ustune ekleyelim.
<html> <head> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> </body> </html>
Siz jquery dosyasini kendi sunucunuza/hostunuza indirerek kullanirsaniz daha makul olacaktir.
! JQuery js dosyasini yazacagimiz jquery/javascript kodlarindan once eklememiz gerekli, aksi durumda yazdigimiz kodlar calismayacaktir.
Kodlamaya baslarken
Kodlarinizi ekstra bir js dosyasinda yazmaniz ve yukarida ekledigimiz JQuery dosyasinin altina include etmeniz daha mantikli olacaktir. Ancak baslangic ve test asamasinda HTML icerisinede ekleme yaparak hizli bir sekilde kodlarimizin kullanilabilirligini test edebilirsiniz.
Ornek Dosya ekleme:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/js/extra_kodlarim.js"></script>
</head>
<body>
</body>
</html>
Sayfa icerisine ekleme:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
// ekstra js kodlarimizi buraya yazariz
});
</script>
</body>
</html>
!$(document).ready kismini eklememizin sebebi: Butun sayfa ve jquery dosyalari yuklendikcen sonra kodlarimizin isleme alinmasini saglamak. Bazi durumlarda bunu yapmazsaniz kodlarimiz jquery yuklenmeden kendini calistirmaya calisacagindan, islevsel sorunlar yasayabilir, husrana ugrayabilirsiniz. Ayni sekilde asagidaki kod da ayni etkiyi ve ozelligi bize verecektir.
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<script>
$(function () {
"use strict";
// ekstra js kodlarimizi buraya yazariz
});
</script>
</body>
</html>
Yinede ilk onerdigim kodu kullanmanizi tavsiye ederim.
:) Gerekli on bilgiden sonra kullanim ve ornek calismalara baslayalim.
.on (Tiklama tetikleme)
Sayfa icerisinde herhangi bir elemente tiklandiginda isleme alacagimiz ve bu tiklamanin neticesinde gerceklesmesini istediginiz hareketleri calistiracagimiz fonksiyonumuz olacak.
Ornegin sayfada bir buton olusturup, buna tiklanildiginda butonun altinda ajax ile baska sayfadan bilgi cekip ekleyebiliriz, yada uyari mesaji cikartirabileriz.
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<button id="test1">test1</button>
<script>
$(document).ready(function() {
/*
* https://makaleci.com
* test1 ID li elemente tiklandiginda asagidaki kisim harekete gececektir.
*
*/
$('#test1').on('click', function() {
alert("test1 ID li butona tiklandi");
});
});
</script>
</body>
</html>
!ID eti #test1 yerine klass ismini yazmaniz gerekli. Oncesine nokta (.) koymayi unutmayin. Yinede ornek bir uygulamayi asagida ekliyorum:
<button id="test1" class="test1_class">test1</button>
<script>
$(document).ready(function() {
/*
* https://makaleci.com
* test1_class class li elemente tiklandiginda asagidaki kisim harekete gececektir.
*
*/
$('.test1_class').on('click', function() {
alert("test1_class class li butona tiklandi");
});
});
</script>
Goster/gizle (hide.show)
Sayfa icerisinde belirli bolumleri gizlemek yada gostermek isterseniz asagidaki orneklerden herhangi birini kullanabilirsiniz.
/*
* https://makaleci.com
* test1 ID li elementi gizleriz
*/
$('#test1').hide();
/*
* https://makaleci.com
* test2 ID li elementi gosteririz
*/
$('#test2').show();
Yukaridakilere ek olarak, htmlde display ozelligini kullanarakda elementleri gosterip, gizleyebilirsiniz. Bir nevi style (css) ozelligine mudahale etmis oluyoruz ;)
Display ozelligine gore gosterme/gizleme
/*
* https://makaleci.com
* test1 ID li elementi gizleriz
*/
document.getElementById("test1").style.display = "none";
/*
* https://makaleci.com
* test2 ID li elementi gosteririz
*/
document.getElementById("test2").style.display = "block";
Jquery Ajax kullanimi
Ajax girdigimiz her sitede olan ve bir cok kez hayatimizi kurtaran, kullanicinin interaktifligini ust duzeye cikaran olmazsa olmazlarimizdan. Basit bir kullanim ornegi ile konuya giris yapalim, gelistirmek ve daha fonksiyonel yapmak icin konudaki diger basliklari kontrol edebilirsiniz.
Sayfaya girildiginde direk veri gondermek ve almak:
$.ajax({
method: "POST",
url: "a.php",
dataType: "html",
cache: false,
data: { isim: "Kuaza", bolge: "Kalbimiz" }
})
// Gondermede sorun olmazsa, basarili olursa bu kisim aktif olacaktir.
.done(function( data_bilgi ) {
alert( "Istek gonderildi, geri donen: " + data_bilgi );
})
// gondermede bir hata olusursa bu kisim aktif olacaktir.
.fail(function( jqXHR, textStatus ) {
alert( "Istek gonderilemedi: " + textStatus );
});
Yada yukaridaki orneklerimizde kullandigimiz butona tiklanildiginda ajax verisi gondermek ve almak icin:
/*
* https://makaleci.com
* test1 ID li elemente tiklandiginda asagidaki kisim harekete gececektir.
* Sonrasinda Belirlenen Ajax verisi calisacak ve farkli bir sayfaya POST verisi gonderecek
* Geri donen degeri Alert ile gosterecektir.
*/
$('#test1').on('click', function() {
$.ajax({
method: "POST",
url: "a.php",
dataType: "html",
cache: false,
data: { isim: "Kuaza", bolge: "Kalbimiz" }
})
// Gondermede sorun olmazsa, basarili olursa bu kisim aktif olacaktir.
.done(function( data_bilgi ) {
alert( "Istek gonderildi, geri donen: " + data_bilgi );
})
// gondermede bir hata olusursa bu kisim aktif olacaktir.
.fail(function( jqXHR, textStatus ) {
alert( "Istek gonderilemedi: " + textStatus );
});
});
Parametrelerin aciklamalari:
method: Veri gonderirken kullanicilacak method tipini belirleri (POST, GET, PUT) – Default deger: GET
url: Istek yapilacak url yada dosya adresi
dataType: Veri alirken karsi taraftan donen degeri belirtiriz. Boylece JQuery kullanima hazir olarak calisacaktir. (xml, json, jsonp, script, html). html kullanirsaniz script kodlarida dahil geri donecektir.
cache: default deger acik (true) olarak gelir. Ancak dataType degeri script yada jsonp oldugunda false dir. Yapilan isteklerin cache de kalmasini ve tekrar tekrar ayni istegin gitmesini isterseniz true yapin. Ancak bazi durumlarda farkli istekler donebilecegi icin uygulamaniza gore bunu false yapmaniz daha mantikli olacaktir.
data: Gonderilecek veriye ait data bilgilerini icerir. Alabilecegi data turleri: PlainObject, String, Array Form verilerinde veya bazi durumlarda ben array veri seklinde gonderim yapiyorum.
.done: Veri basarili bir sekilde gonderilirse donen data_bilgi parametresi ile fonksiyon icerisinde kullanilabilir olacaktir. Bu kisimda karsi tarafta duzgunde olsa, sorunda olsa veri gonderildigi ve alinabildigi icin calisacaktir.
.fail: Veri gonderilemedigi zaman bu kisim acilacak ve hata mesajini gosterecektir. Bu kisim calisiyorsa ajax kod yapinizda bir yerde sorun var demektir. Ornek url yanlis olabilir…
! Ben ajax orneklerinde alert ile donen degeri sizlerin gorebilmesi icin actirdim. siz kolayca herhangi bir div yada elementin icerisinde ekleyerek o elementi gostererek kullaniciya interaktif bir heycan yasatabilirsiniz. bunun icin konudaki ilgili basliklari kontrol edebilirsiniz.
attr ile tanimli parametreleri alma
En sevdigim ozelliklerden birisi ve bir cok kez kullanma firsatim oluyor. Bir elemente (div, a, input v.S ne varsa) ait icerisinde tanimlanmis bir parametreyi almamizi saglar. Ornek kodlara asagidan bakarsaniz daha net anlayacaksiniz.
<button id="test1" p="merhaba, bu test1 ID sine ait 'p' elementidir">test1</button>
<script>
$(document).ready(function() {
var p_elementi = $("#test1").attr("p");
alert(p_elementi);
});
</script>
Yukadaki kullanimla, ID si yada class i belirtilen kod betiginde tanimli herhangi bir alani alabilirsiniz. Birden fazla tanim belirtebilirsiniz. input, button, p div v.s her konuda kullanim kolayligi saglayacak bir ozelliktir.
Tıklanan elementin içerisindeki herhangi bir parametreyi almak içinde thiş tanımlayıcısını kullanırız, örnek:
<button id="test1" p="merhaba, bu test1 ID sine ait 'p' elementidir">test1</button>
<script>
$(document).ready(function() {
$('.test1').on('click', function() {
var p_elementi = $(this).attr("p");
alert(p_elementi);
});
});
</script>
Yukarıdaki örnekte, tıklanan butonda bulunan p elementine atanan bilgiyi almaktadır. isterseniz bir çok parametre olsun, tıklanan yani tetiklenen butondaki her bilgiyi bu şekilde çekebilirsiniz.
attr ile parametre içeriklerini değiştirme
Yukarda attr ile bir bölümde kayıtlı parametreyi almayı göstermiştik. Şimdide bu aldığımız parametreyi nasıl değiştirebileceğimizi göstereceğim.
$( "#profil_url").attr( "href", function() {
return "https://makaleci.com/yeni_url";
});
Toplama, çıkarma, çarpma bölme
Bu işlemler çok basit aslında ancak bazı durumlarda bir sonuç alamayabiliyorsunuz. Değişkenlerden gelen değerleri toplama çıkarma işlemine sokarken sonuç doğru çıkmamaktadır, bu yüzden yaptığınız işlemlerde tavsiyem değeri parseInt işleminden geçirerek toplama çıkarma v.s formatına şokunuz..
var sonuc10 = parseInt(5) + parseInt(5); // toplama var sonuc5 = parseInt(10) - parseInt(5); // cikarma var sonuc50 = parseInt(10) * parseInt(5); // carpma var sonuc2 = parseInt(10) / parseInt(5); // bolme
val() parametresi ile form iceriklerini alalim
val() ozelligi ile bir input’un, selectin yada herhangi bir value degerine sahip html etiketinin degerini alabiliriz. Ornek kullanim asagida yer almaktadir.
<button id="test1" p="merhaba, bu test1 ID sine ait 'p' elementidir" value="value degerini alalim" >test1</button>
<select id="test2">
<option value="ggg">kuaza 1</option>
<option value="hhh">kuaza 2</option>
<option selected value="jjj">kuaza 3</option>
<option value="ffff">kuaza 4</option>
</select>
<script>
$(document).ready(function() {
var button_value = $("#test1").val();
var select_value = $("#test2").val();
alert("button value degeri: " + button_value);
alert("select value degeri: " + select_value);
});
</script>
! val() degerinin icerisine birseyler eklerseniz tanimlanan form elementinin value degerinide degistirmis olacaksiniz. Bu Degisime ornek:
<input type="text" id="test1" value="default input degeri" >
<script>
$(document).ready(function() {
var button_value = $("#test1").val("kuaza merhaba. Yeni input degerimiz.");
});
</script>
! Bu degisim sadece value degerinde ise yarayacaktir. div yada herahngi bir html kodlari arasindaki degeri degistirmek, yada almak isterseniz html() ozelligini kullanmaniz gerekli.
html() ile kodlar arasindaki veriyi alma
html() de yukarida bahsettigim val() elementi gibi birseylerin icerigini alir. html() genel olarak html etiketleri arasinda kalanlari almaniz icin isimize yarayacak. Ornek kullanimi incelerseniz ne demek istedigimi net anlayacaksiniz.
<div id="test_icerik"> test div icerigimiz. </div>
<div id="test1">kuazadan selamlar</div>
<script>
$(document).ready(function() {
var icerik_alalim = $("#test_icerik").html();
alert(icerik_alalim);
$("#test1").html("div in yeni icerigi");
});
</script>
! val() degerinde oldugu gibi icerigine birsey eklerseniz div in yada her ne kullaniyorsaniz icerigini degistirmis olursunuz. Ornek kullanim yukarida ayri olarak ekledim.
css ozelliklerini degistirme
html kodlarinizin, div, p, a v.s gibi html etiketlerine ait css ozelliklerinizi duzenlemenize yarar. Kolay bir kullanim yapisi vardir, ornekler asagida inceleyebilirsiniz.
<div id="test_icerik"> test div icerigimiz. </div>
<script>
$(document).ready(function() {
$('#test_icerik').css('background','#000');
$('#test_icerik').css('color','#fff');
});
</script>
! Ilk alan degistirilecek css parametresini, ikinci alanda alacagi degeri belirtir.. Css de bulunan butun ozellikleri bu sekilde degistirebilirsiniz.
addClass-removeClass (Class ekleme/silme)
Html kodlarinizda herhangi bir class i silebilir yada yeni bir class ekleyerek html kodunuzun goruntusunu degistirebilir yada sirf sonraki asamalarda kullanmak icin sirayi belirtmek icin atayabilirsiniz. Kullanimi basitdir:
<?php //echo $ayarlar["reklam_orta"]; ?>
<div id="test_icerik"> test div icerigimiz. </div>
<script>
$(document).ready(function() {
$('#test_icerik').removeClass('eski_class').addClass('yeni_class');
// tek tek de kullanabilirsiniz.
$('#test_icerik').removeClass('eski_class');
$('#test_icerik').addClass('yeni_class');
});
</script>
Jquery Form Event fonksiyonlari
Form elementlerini kullanirken yapilan islem, tiklama yada v.s hareketlerini yakalamak icin asagidaki fonksiyonlari kullanabilirsiniz. Demo ve kaynak.
1 – focus()
$("input,select,textarea").focus(function () {
//do something
});
2 – blur()
$("input,select,textarea").blur(function () {
//do something
});
3 – change()
$("input,select,textarea").change(function () {
//do something
});
4 – select()
$("input,textarea").focus(function () {
//do something
});
5 – submit()
$("form").focus(function () {
//do something
});
Ornek kodlarin hepsi:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:16px;
}
.focus, .blur, .change, .select{
color:white;
border:1px solid red;
background-color:blue;
padding:8px;
margin:8px;
}
</style>
</head>
<body>
<h1>jQuery form events - focus(), change(), blur(), select(), submit() example</h1>
<form name="testing" action="#">
<div>
TextBox : <input type="textbox" size="50"></input>
</div>
<div>
<label style="float:left">TextArea : </label>
<textarea cols="30" rows="5"></textarea>
</div>
<div>
Radio : <input name="sex" type="radio" value="Male" checked>Male</input>
<input name="sex" type="radio" value="Female">Female</input>
</div>
<div>
CheckBox : <input type="checkbox" name="checkme">Check Me</input>
</div>
<div>
Country : <select id="country">
<option value="China">China</option>
<option value="United State">United State</option>
</select>
</div>
<div>
<input type="submit"></input> <input type="reset"></input>
</div>
</form>
<script type="text/javascript">
$("input,select,textarea").focus(function () {
$(this).after("<span class='focus'> focus() triggered! </span>");
$("span").filter('.focus').fadeOut(4000);
});
$("input,select,textarea").blur(function () {
$(this).after("<span class='blur'> blur() triggered! </span>");
$("span").filter('.blur').fadeOut(4000);
});
$("input,select,textarea").change(function () {
$(this).after("<span class='change'> change() triggered! </span>");
$("span").filter('.change').fadeOut(4000);
});
$("input,textarea").select(function () {
$(this).after("<span class='select'> select() triggered! </span>");
$("span").filter('.select').fadeOut(4000);
});
$("form").submit(function () {
alert('Form submitted!');
});
</script>
</body>
</html>
setTimeout (timer) zaman (bekletme) fonksiyonu
Jquery deki timer fonksiyonu ile istediginiz bir etkiyi, belirlediginiz bir zaman sonra calistirabilirsiniz.
/* Ornek 1 */
function zaman_fonksiyonu(){
alert("2 saniye sonra acilacak bu uyari!");
}
setTimeout(zaman_fonksiyonu, 2000);
/* Ornek 2 */
var zaman_fonksiyonu = function(){
alert("3 saniye sonra acilacak bu uyari!");
};
setTimeout(zaman_fonksiyonu, 3000);
/* Ornek 3 */
setTimeout(function(){
alert("1 saniye sonra acilacak bu uyari!");
}, 1000);
/* Ornek 4 */
setTimeout("alert('2 saniye sonra acilacak bu uyari!');", 2000);
Zamanim olursa konuyu guncelleyecegim, yeni konularada yer verecegim.
Php bir sayfa içerisinde html yapısıyla yapılmış jquery destekli bir sayfayı çağırdığımda resimler popup olarak açılmıyor ve ileri-geri tuşları çalışmıyor. Acaba sorun nerede olabilir
resimlerin ileri geri ve popup jquery kodlarinida cektiginiz html sayfaya dahil etmeniz gerekli, boylece calisacaktir.