Jquery Kullanarak Tablonun Sonuna Yeni Satır Eklemek

Varolan bir html tablosunun sonuna jquery kullarak yeni bir satır eklemek için aşağıdaki kodlardan durumumuza uygun olan birisini kullanabiliriz:

Eğer tablomuz aşağıdaki gibi tbody içeriyorsa;

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

aşağıdaki kodu kullanabiliriz:

$('#myTable > tbody:last-child').append('<tr>...</tr>');

burada son satırın altına yeni bir satır eklenecektir. 3 nokta ile olan yere de sütünlarımızı ekleyebiliriz isteğimize göre.


Eğer tablomuz aşağıdaki gibi tbody içermiyorsa;

<table id="myTable">
    <tr>...</tr>
    <tr>...</tr>
</table>

aşağıdaki kodu kullanabiliriz:

$('#myTable tr:last').after('<tr>...</tr>');

burada son satırın altına yeni bir satır eklenecektir. 3 nokta ile olan yere de sütünlarımızı ekleyebiliriz isteğimize göre.

Yazıyı Oku

Jquery ile Bir Elementin Spesifik Bir Class'a Sahip Olup Olmadığını Kontrol Etme

Jquery kullanarak bir elementin bir class'a sahip olup olmadığını kontrol etmek için hasClass metodunu kullanabiliriz. Örneğin;

$( "#elementID" ).hasClass( "classIsmi" );

Yazıyı Oku

Jquery ile Dinamik Olarak Oluşturulan Inputlara Event Bind Edilmesi

Web sayfalarımızda bazı kontrolleri dinamik olarak oluşturmak zorunda kalabiliriz. Örneğin ajax sonucunda gelen bir veriyi div tagleri içerisinde body içerisine append etme gibi bir ihtiyaç olduğunu düşünelim. Bu append ettiğimiz içerisinde de input type'ı button olan bazı button'larımız olsun. Bunların click eventlerini yazma ihtiyacımız olabilir. Bunu normal olarak ;

$("#buttonID").click(function(){})
 şeklinde tanımlarsak, bu click eventi çalışmayabilir. Bunu için, dinamik olarak oluşturulan bu buttonların click eventini aşağıdaki gibi bind edebiliriz:

$("#buttonID").on("click", ".myDiv", function(){
   //buttona tıklandığında ne olacağını burda yazabiliriz
});

Yukarıdaki işlem myDiv classı içerisindeki element id'si buttonID olan  inputun click eventidir. Bu event içerisine buttona tıklandığında yapılması istenen işlemleri yazıyoruz.

Yazıyı Oku

Jquery ile Birden Çok Class'ı Olan Elementi Seçme

Jquery ile birden fazla class'ı olan bir elementi seçmek için aşağıdaki kodu kullanabiliriz:

$('.a.b')

Hem id hem de birden fazla class'ı kullanarak elementi getirmek için aşağıdaki kodu kullanabiliriz:

$('#a.b.c')

Yazıyı Oku

Jquery ile Inputu Disable-Enable Etme

Jquery ile sayfamızda kullandığımız inputları enable veya disable (tıklanabilir veya değil) yapmak istiyorsak aşağıdaki kod parçasını kullanabiliriz:

//jquery 1.6+ versiyonkları için 
$("input").prop('disabled', true);
$("input").prop('disabled', false);

//jquery 1.5 ve alt versiyonları için
$("input").attr('disabled','disabled');
$("input").removeAttr('disabled');

Yazıyı Oku

Jquery ile Dropdown'dan Seçilen Seçeneğin Text ve Değerini Döndürme

Bir dropdownlist içindeki seçeneklerden seçili olanın yazısını aşağıdaki gibi getirebiliriz:

$("#dropdownid option:selected").text();

Seçilen seçeneğin değerini döndürmek istiyorsak da aşağıdaki kod parçasını kullanabiliriz:

$("#dropdownid option:selected").val();

Yazıyı Oku

Form İçerisindeki İşaretlenen Radio Button'un Değerini Getirme

Form içerisindeki radio buttonlardan işaretli olanın değerini getirmek için aşağıdaki kodu kullanabiliriz:

var isaretliRadioButtonDegeri=$('input[name=radioName]:checked', '#myForm').val(); 

Yazıyı Oku

Jquery ile Checkbox'un Check Olma Durumunu Kontrol Etme

Sayfamız koyduğumuz checkbox'ın işaretli olup olmadığını aşağıdaki gibi kontrol edebiliriz:

//jquery 1.6+ versiyonları için aşağıdakini
$('#elementID').prop('checked')

//jquery 1.5 ve alt versiyonları için aşağıdakini
$('#elementID').attr('checked')

Sonuç olarak bize true veya false değeri dönecektir.

Yazıyı Oku

Jquery Kullanarak Bir Elementin Gizli Olup Olmadığının Bulunması

Zaman zaman web sayfalarımızda bazı ögeleri gizleme ve koşullu olarak gösterme ihtiyacı olabilir. Bunların da gizli olup olmadığını yeri geldiğinde kontrol etmemiz gerekebilir. (show - hide metodları) Bir elementin gizli olup olmadağını aşağıdaki şekilde kontrol edebiliriz:

//element dediğimiz yere istersek id 
//istersek elementin classını verebiliriz
$(element).is(":visible"); 

Yazıyı Oku

Jquery Kullanarak Sayfa Yönlendirmesi Yapmak

Bir kullanıcıyı bir sayfadan bir başka sayfaya jquery kullanarak yönlendirmek istiyorsak aşağıdaki kodlardan birini kullanabiliriz:

// Comment
// HTTP redirect ile aynı davranış için aşağıdakini
window.location.replace("http://stackoverflow.com");

// bir linke tıklandığındaki aynı davranış için aşağıdakini
window.location.href = "http://stackoverflow.com";

Yazıyı Oku

Javascript Bulunulan Url'yi Getirme

Javascript ile bulunduğumuz sayfanın url bilgisini almak istiyorsak aşağıdaki kod parçalarını kullanabiliriz:

Yazıyı Oku

Javascript'de Bir String İçerisindeki Tüm Tekrarlanan Karakterleri Replace Etme

Javascript ile bir string içerisinde geçen tüm aradığımız kelime ile başka bir kelimeyi değiştirmek istediğimizde aşağıdaki metodu kullanabiliriz:

Yazıyı Oku

Javascript Object'den Property Silme

Elimizde aşağıdaki gibi bir javascript objesi olsun:

var myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

Bunun içinden regex objesini kaldırıp aşağıdaki gibi bir sonuç elde etmek istiyoruz:

var myObject = {"ircEvent": "PRIVMSG", "method": "newURI"};

Bunu aşağıdaki yöntemlerden birini kullanarak yapabiliriz:

Yazıyı Oku

Javascript QueryString Parametrelerini Getirme

Aşağıdaki javascript metodunu kullanarak web sayfasının url'indexi querystring parametrelerini getirebiliriz:

Yazıyı Oku

Jquery'de Bir Elementin Gizli Olup Olmadığının Kontrolü

Jquery'de bir elementin gizli olup olmadığını aşağıdaki gibi kontrol edebiliriz:

Yazıyı Oku

Javascript Bir String Değişkenin Diğerini İçerme Kontrolü (IndexOf Kullanımı)

Javascript'te bir string değişkenin diğer değişkeni içerip içermediğini aşağıdaki gibi kontrol edebiliriz:

var string = "foo",
    substring = "oo";
console.log(string.indexOf(substring) > -1);

indexOf metodu eğer a stringi b stringini içeriyorsa b nin a daki konumunu döndürür, içermiyorsa -1 döndürür. Yani -1 dönmüyorsa b stringi a stringi içerisinde mevcuttur diyebiliriz.

Yazıyı Oku

Javascript Sayfa Yönlendirme

Javascript ile bulunduğumuz sayfadan bir başka sayfaya aşağıdaki gibi yönlendirme yapabiliriz:

Yazıyı Oku