Javascript jQuery Kullanımı

jQuery API (Application Programmer Interface - Uygulama Programcı Arayüzü), bir JavaScript kütüphanesidir ve web sayfalarına jQuery script dosyası dahil ederek kullanılır. Bu kütüphane sayesinde JavaScript ile daha az kod yazarak daha fazla işlem yapabilirsiniz. Bu size kolaylık ve hız kazandırır.

$(ifade, bağlam)

Bu fonksiyon bağlam içindeki elemanlarla eşleşecek CSS veya normal XPath seçicisi içeren bir ifadeyi parametre olarak alır. Bağlam parametresi isteğe bağlı olarak belirtilebilir varsayılan olarak tüm dokümanı kapsar.

jQuery çekirdeği bu fonksiyonu merkeze alır ve tüm jQuery nesneleri bu yapı üzerine kuruludur veya bir yolla bu yapıyı kullanır. En yaygın kullanımı verilen seçme parametresini kullanarak eşleşen elemanları bulmasıdır.

Varsayılan olarak $( ) tüm HTML dokümanı bağlamındaki elemanları inceler. (Bağlam parametresi farklı olarak belirtilmemişse.)

Parametreler

ifade: (String): Elemanlarda aranacak ifade
bağlam: (Element | jQuery): (optional) Bir DOM (Document Object Model) elemanı, document veya jQuery nesnesi.

Geri Döndürdüğü Değer

jQuery

Örnek

Bir div elemanı içindeki tüm p elemanlarını bulur.
$("div > p")

Önce:
<p>Bir</p> <div><p>İki</p></div> <p>Üç</p>

Çıktı:
[<p>İki</p>]

Örnek

Dokümandaki ilk form elemanındaki türü "radio" olan tüm elemanları bulur.
$("input:radio", document.forms[0])

Örnek

Verilen XML dokümanındaki tüm div elemanlarını bulur.
$("div", xml.responseXml)

$( html )

String türünde parametre olarak verilen html kodlarını HTML DOM elemanlarına çevirir.

Parametreler

html: (String): Çalışma esnasında oluşturulacak HTML elemanları dizesi.

Geri Dönüş Türü

jQuery

Örnek

Bir div elemanını ve içeriğini dinamik olarak oluşturur ve id değeri "body" olan bir elemanın içine ekler. 

$("<div><p>Merhaba</p></div>").appendTo("#body")

$( elems )

jQuery fonksiyonelliğini parametre olarak verilen DOM elemanına veya elemanlarına ekler. Bu fonksiyon ayrıca XML dokümanlarını ve Window nesnelerini de destekler. (Geçerli argümanları desteklerler fakat yine de onlar HTML elemanları değillerdir.)

Parametreler

elems: (Element | Array): jQuery nesnesine çevrilecek eleman veya elemanlar.

Geri Dönüş Türü

jQuery

Örnek

Bu örnek $("div > p") ile aynı çünkü yine doküman bağlamında

$(document).find("div > p")

Önce:
<p>Bir</p> <div><p>İki</p></div> <p>Üç</p>

Çıktı:
[<p>İki</p>]

Örnek

Sayfanın arkaplan rengini siyaha çevirir.

$(document.body).background("black")


Örnek

Bir formun içindeki tüm input elemanlarını gizliyor.

$(myForm.elements).hide()

$( fn )

$(document).ready() fonksiyonu için bir steno (kısa yazılış). Doküman yükleme tamamlandığında çalıştırılacak fonksiyonları belirtmeye yarar. Sayfaya istediğiniz kadar yükleme tamamlanınca çalışacak fonksiyon eklenebilir.

Parametreler

fn: (Function): DOM hazır olduğunda çalıştırılacak fonksiyon


Geri Dönüş Türü

jQuery

Örnek

DOM hazır olduğunda 

$(function() { /* Doküman hazır */ });

$(obj)

Parametre olarak verilen jQuery nesnesinin bir kopyasını oluşturur. Oluşturulan kopya orjinali ile aynı elemanları içerir.

Parametreler

obj: (jQuery): Klonlanacak jQuery nesnesi.

Geri Dönüş Türü

jQuery

Örnek

Tüm div elemanlarındaki p elemanlarını bulur. $(div) yerine div.find("p") şeklinde de kullanılabilir. Çünkü div değişkeni zaten bir jQuery nesnesidir.

var div = $("div"); $(div).find("p");

jquery()

jQuery versiyonunu döndürür.

Geri Dönüş Türü

String

length()

Eşleşen eleman sayısı

Geri Dönüş Türü

Number

Örnek

$("img").length()

Önce:
<img src="test1.jpg" /> <img src="test2.jpg" />

Çıktı:
2

get()

Eşleşen tüm elemanlara erişim sağlar. jQuery nesnesi kendini döndürür. Yani elemanlar içeren bir dizi döndürür.

Geri Dönüş Türü

Array

Örnek

Dokümandaki tüm resimleri seçer ve bunları DOM elemanları dizisi olarak döndürür.

$("img").get()

Önce:
<img src="test1.jpg" /> <img src="test2.jpg" />

Çıktı:
[ <img src="test1.jpg" /> <img src="test2.jpg" /> ]

get ( num )

Eşleşen elemanlar dizesinden num parametresi olarak verilen indis numarasına karşılık gelen tek bir elemanı döndürür.

Geri Dönüş Türü

Element

Örnek

Tüm resim elemanlarını seçer ve ilkini döndürür.

$("img").get(0);

Önce:
<img src="test1.jpg" /> <img src="test2.jpg" />

Çıktı:
<img src="test1.jpg" />

set ( elemanlar )

jQuery nesnesini bir elemanlar dizisine ayarlar (bu esnada yığın (stack) korunur.)

Parametreler

elemanlar: (Elements): Bir elemanlar dizisi

Geri Dönüş Türü

jQuery

Örnek

$("img").set([document.body]);

Çıktı:
$("img").set() == [document.body]

setArray( elemanlar )

jQuery nesnesini bir elemanlar dizisine ayarlar. Bu işlem tamamen yıkıcıdır. Eğer yığını korumak istiyorsanız .set() kullandığınızdan emin olun.

Geri Dönüş Türü

jQuery

Örnek

$("img").setArray([document.body]);

Çıktı:
$("img").setArray() == [document.body]

each ( fn )

Bu fonksiyon, parametre olarak belirtilen fonksiyonu bağlam içinde eşleşen her eleman için çalıştırır. İşlenirken 'this' anahtar kelimesi ilgili elemanı işaret eder.

Ayrıca parametre olarak verilen fonksiyona dizideki elemanın indis değerini  parametre olarak verir.

Parametreler

fn: (Function): Çalıştırılacak fonksiyon

Geri Dönüş Türü

jQuery

Örnek

İki resim üzerinde yinelenir ve onların src parametrelerini ayarlar.

$("img").each( function (i) { this.src = "test" + i + ".jpg"; } );

Önce:
<img /> <img />

Çıktı:
<img src="test0.jpg" /> <img src="test1.jpg" />

index ( nesne )

Eşleşen elemanlar arasında parametre olarak belirtilen nesneyi arar. Bulursa sıfırdan başlanarak oluşturulmuş indis değerini döndürür. Bulamazsa -1 değerini döndürür.

Geri Dönüş Türü

Number

Örnek

ID değeri foobar olan elemanın indis değerini döndürür.

$("*").index($("#foobar")[0])

Önce:
<div id="foobar"></div><b></b><span id="foo"></span>

Çıktı:
0

Örnek

ID değeri foo olan elemanın indis değerini döndürür.

$("*").index($("#foo")[0]);

Önce:
<div id="foobar"></div><b></b><span id="foo"></span>

Çıktı:
2

Örnek

Geri -1 değerini döndürür, çünkü ID değeri bar olan eleman yok.

$("*").index($("#bar")[0]);

Önce:
<div id="foobar"></div><b></b><span id="foo"></span>

Çıktı:
-1

domManip(args, table, dir, fn)

Parametreler

args: (Array): Manipüle edilecek elemanlar dizisi.
table: (Boolean): Tablolarda yoksa TBODY etiketini ekle / ekleme (true | false).
dir: (Number): Eğer dir < 0 ise args dizisindeki elemanlar ters sırayla işlenir.
fn: (Function): DOM manipülasyonunu yapan fonksiyon.

Geri Dönüş Türü

jQuery

$.extend( prob )

jQuery nesnesinin kendisini genişletir. jQuery isim uzayına yeni fonksiyonlar veya eklenti metodları (eklentiler) eklemek için kullanılır.

Parametreler

prop (Object): jQuery nesnesi ile birleştirilecek olan nesne.

Geri Dönüş Türü

Object

Örnek

İki eklenti metodu ekler.

jQuery.fn.extend({check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); }});

$("input[@type=checkbox]").check();
$("input[@type=checkbox]").uncheck();

Örnek

jQuery isim uzayına iki fonksiyon ekler.

jQuery.extend({min: function(a, b) { return a < b ? a : b; }, max: function (a, b) { return a > b ? a : b; }});

$.noConflict( )

$ değişkeninin kontrolünü ilk tanımlayan kütüphaneye geri verir. Diğer kütüphanelerin $ değişkenini kullanmasıyla oluşabilecek hataları önler.

Bu fonksiyonu kullanırsanız artık $ yerine jQuery değişkenini kullanmanız gerekir. Örneğin $("div p") yerine jQuery("div p") şeklinde kullanmalısınız.

Geri Dönüş Türü

undefined

Örnek

$ değişkenine tanımlanmış olan orijinal nesneyi geri tanımlar.

jQuery.noConflict();

// jQuery kütüphanesi ile bir şeyler yapmak için:
jQuery("div p").hide();

// Farklı bir kütüphanenin kullandığı $ değişkenini kullanmak için:
$("content").style.display = "none";

Örnek

$ değişkeninin kullanımını ilk tanımlayan kütüphaneye geri verir. Bir fonksiyona $ parametresi tanımlayarak bu parametreye jQuery nesnesini geçer. Tanımlanan fonksiyonun kod bloğu içinde $ parametresi olarak verilen jQuery nesnesi, jQuery için kullanılır. Kod bloğu dışındaki $ değişkenini ise yine ilk tanımlayan kütüphane kullanır.

Bu yöntem başka bir kütüphaneye bağımlı olmayan çoğu eklenti için tercih edilebilir.

jQuery.noConflict();

(function ($) { $(function () { /* Burada $, jQuery için kullanılabilir. */ } })(jQuery);

// Buradaki kod $ değişkenini farklı bir kütüphane için takma ad olarak kullanıyor.

eq (pos)

Eşleşen elemanlardan tek bir eleman seçer. Parametre olarak verilecek olan elemanın pozisyon numarası 0 dan başlar ve en fazla (eleman sayısı - 1) olabilir.

Örnek

$("p").eq(1)

Önce:
<p>Birinci paragraf.</p> <p>İkinci paragraf</p>

Çıktı:
[ <p>İkinci paragraf</p> ]

lt( pos )

Dizinin verilen pozisyondan önceki elemanlarını verir. Elemanların pozisyonu 0 dan başlayıp en fazla (eleman sayısı - 1) olabilir.

Parametreler

pos: (Number): Bu konumdan önceki elemanları verir.

Geri Dönüş Türü

jQuery

Örnek

$("p").lt(1)

Önce:
<p>Birinci paragraf.</p> <p>İkinci paragraf.</p>

Çıktı:
[<p>Birinci paragraf.</p>]

gt( pos )

Dizinin verilen pozisyondan sonraki elemanlarını verir. Elemanların pozisyonu 0 dan başlayıp en fazla (eleman sayısı - 1) olabilir.

Parametreler

pos: (Number): Bu konumdan sonraki elemanları verir.

Geri Dönüş Türü

jQuery

Örnek

$("p").gt(0)

Önce:
<p>Birinci paragraf.</p> <p>İkinci paragraf.</p>

Çıktı:
[<p>İkinci paragraf.</p>]

DOM ( Document Object Model - Doküman Nesne Modeli)

attr( name )

İlk eşleşen elamanın bir özelliğine erişim sağlar.

Parametreler

name: (String): Erişilecek özelliğin adı.

Geri Dönüş Türü

Object

Örnek

Dokümandaki ilk resmin src özelliğini döndürür.

$("img").attr("src");

Önce:
<img src="test.jpg" />

Çıktı:
test.jpg

attr ( properties )

Tüm eşleşen elemanlara anahtar/değer çiftleri olarak verilmiş olan özellikleri ekler. Çok sayıdaki elemanın özelliklerini değiştirmek için en iyi yoldur.

Parametreler

properties (Map): Nesnelere eklenecek anahtar / değer çiftleri.

Geri Dönüş Türü

jQuery

Örnek

Tüm resimlerin src ve alt özelliklerini ayarlar.

$("img").attr({src: "test.jpg", alt: "Test Resmi"});

Önce:
<img />

Çıktı:
<img src="test.jpg" alt="Test Resmi" />

attr (key, value)

Tüm eşleşen elemanların yalnızca bir özelliğini değiştirmek için kullanılır.

İkinci örnekteki gibi ${formül} şeklinde elemana ait başka bir özellik hesaplanabilir.

Not: Internet Explorer kullanırken input elemanlarının name özelliklerini değiştiremezsiniz. Bunun için $(html), .append(html) veya .html(html) fonksiyonlarını kullanarak name özelliğini içeren bir kodu çalışma zamanında ekleyebilirsiniz.

Parametreler

key: (String): Ayarlanacak özelliğin adı.
value: (Object): Ayarlanacak değer.

Geri Dönüş Türü

jQuery

Örnek

Tüm resimler için src özelliğini ayarlar.

$("img").attr("src", "test.jpg");

Önce:
<img />

Çıktı:
<img src="test.jpg" />

Örnek

Elemanın title özelliğini, aynı elemanın src özelliği olacak şekilde ayarlar. attr(String, Function) yerine kısayol olarak kullanılır.

$("img").attr("title", "${this.src}");

Önce:
<img src="test.jpg" />

Çıktı:
<img src="test.jpg" title="test.jpg" />

attr(key, value)

Tüm eşleşen elemanların belirtilen özelliğine hesaplanan değeri atar. Burada değer yerine bu değeri döndüren bir fonksiyon kullanılıyor.

Parametreler

key: (String): Ayarlanacak özelliğin adı.
value: (Function): Ayarlancak değeri döndüren fonksiyon.

Geri Dönüş Türü

jQuery

Örnek

Resimlerin title özelliğini src özellikleri olacak şekilde ayarlar.

$("img").attr("title", function () { return this.src; });

Önce:
<img src="test.jpg" />

Çıktı:
<img src="test.jpg" title="test.jpg" />

text( )

Eşleşen tüm elemanların içindeki metinleri döndürür. Dönen değer tüm elemanların içindeki metin değerlerinin birleştirilmiş şeklidir. Bu metod hem HTML hem de XML ile çalışır.

Geri Dönüş Türü

String

Örnek

Tüm paragraflardaki metinleri döndürür.

$("p").text();

Önce:
<p><b>Test</b> Paragraf.</p><p>Diğer paragraf.</p>

Sonra:
Test Paragraf.Diğer paragraf.

text( val )

Tüm eşleşen elemanların metin içeriklerini ayarlar. html() fonksiyonu ile aynı işi yapar.

Parametreler

val: (String): Elemana ayarlanacak metnin içeriği.

Geri Dönüş Türü

String

Örnek

Tüm paragrafların içeriğini değiştirir.

$("p").text("Yeni metin.");

Önce:
<p>Test paragrafı.</p>

Çıktı:
<p>Yeni metin.</p>

val( )

İlk eşleşen elemanın value özelliğini döndürür.

Geri Dönüş Türü

String

Örnek

$("input").val();

Önce:
<input type="text" value="değer" />

Çıktı:
"değer"

val ( val )

Tüm eşleşen elemanların value özelliklerini ayarlar.

Parametreler

val: (String): Ayarlanacak value özelliği değeri.

Geri Dönüş Türü

jQuery

Örnek

$("input").val("metin");

Önce:
<input type="text" value="değer" />

Çıktı:
<input type="text" value="metin" />

html( )

İlk eşleşen elemanın html içeriğini getirir. Bu özellik XML dokümanları için geçerli değildir.

Geri Dönüş Türü

String

Örnek

$("div").html();

Önce:
<div><input /></div>

Çıktı:
<input />

html (val)

Eşleşen tüm elemanların html içeriklerini ayarlar. Bu özellik XML dokümanlarında geçerli değildir.

Parametreler

val: (String): Seçilmiş elemanlara atanacak html kodu.

Geri Dönüş Türü

$("div").html("<b>içerik</b>");

Önce:
<div><input /></div>

Çıktı:
<div><b>içerik</b></div>

removeAttr( name )

Tüm eşleşen elemanlardan bir özelliği kaldırır.

Parametreler

name: (String): Kaldırılacak özelliğin adı.

Geri Dönüş Türü

jQuery

Örnek

$("input").removeAttr("disabled")

Önce:
<input disabled="disabled" />

Çıktı:
<input />

addClass( class )

Her elemanın class özelliğine yeni bir css sınıfı (class) ekler.


Parametreler

class: (String): Elemanlara eklenecek bir CSS sınıfı.

Geri Dönüş Türü

jQuery

Örnek

$("p").addClass("selected")

Önce:
<p>Merhaba</p>

Çıktı:
<p class="selected">Merhaba</p>

removeClass ( class )

Eşleşen tüm elemanlardaki tüm css sınıflarını veya belli bir sınıfı kaldırır.

Parametreler

class: (String): (opsiyonel) Elemanlardan kaldırılacak bir css sınıfı.

Geri Dönüş Türü

jQuery 

Örnek

$("p").removeClass()

Önce:
<p class="selected">Merhaba</p>

Çıktı:
[<p>Merhaba</p>]

Örnek

$("p").removeClass("selected")

Önce:
<p class="selected first">Merhaba</p>

Çıktı:
[<p class="first">Merhaba</p>]

toggleClass( class )

Eşleşen elemanlarda belirtilen sınıf varsa kaldırır, yoksa ekler.

Parametreler

class: (String): Elemanlardan kaldırılacak veya eklenecek sınıfın adı.

Geri Dönüş Türü

jQuery

Örnek

$("p").toggleClass("selected")

Önce:
<p>Merhaba</p> <p class="selected">Tekrar merhaba</p>

Çıktı:
[<p class="selected">Merhaba</p>, <p>Tekrar merhaba</p>]

Manipülasyon


wrap(html)

Eşleşen tüm elemanları ve yapılarını verilen html elemanının içinde kalacak şekilde sarmalar.

Parametreler

html: (String): Çalışma zamanında oluşturulup eklenecek dize.

Geri Dönüş Türü

jQuery

Örnek

$("p").wrap('<div class="wrap"></div>");

Önce:
<p>Test Paragrafı</p>

Çıktı:
<div class="wrap"><p>Test paragrafı.</p></div>


Bu blogdaki popüler yayınlar

Almanca - Nomen-Verb-Verbindungen

CSS ile Yüksekliği 100% Olarak Ayarlamak