JQuerye Giriş

JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.

JQuery Öğrenmeye başlamadan önce şunları biliyor olmalısınız:

  • HTML
  • CSS
  • JavaScript

JQuery Nedir?

jQuery hafif sklet bir "az kodla, çok iş yap" mantığında  JavaScript komutlarından oluşan kütüphanedir.

JQuerynin amacı JavaScript'i siteniz üzerinde daha basitçe kullanmanızı sağlamaktır.

jQuery kütüphanesi aşağıdaki özellikleri içerir.

  • HTML/DOM değişikliği
  • CSS değişikliği
  • HTML olay metotları
  • Efektler ve Animasyonlar
  • AJAX
  • Web sayfası Araçları

JQuery'i Web Sitenize Eklemek İçin:

Bir çok yolla JQueryi web sitenize eklebilirsiniz. Örneğin

  • jQuery kütüphanesini jQuery.com dan indirip web sitenizde kullanarak
  • jQueryi CDN adresinden sitenize dahil ederek, örneğin Google gibi bir adresten.

 Web Sitenize entegre ederek:

<head>
      <script src="jquery-1.10.2.min.js"></script>
</head>

 CDN olarak:

<head>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

 

Temel Kullanım:

$(seçiçi).eylem()

  • $ işağreti kodun jQuery kodu olduğunu tanımlar
  • (seçici) to "üzerinde işlem yapılacak" HTML elemanı veya elemanlarını belirler.
  • jQuery eylem() seçilen eleman veya nesneler üzerinde uygulanacak eylem. Örneğin kabolma, hareket etme, soluklaştırma gibi...

 

Sihirli dolar ($)  işağreti ve operasyonlar zinciri:

JQuery de dolar ($) işağreti en güçlü karakter  yada semboldür. Bir $() şeklindeki fonksiyon normal olarak birbirini takip eden nesneler zincirine ait operasyonları döndürür.

$("div.test").add("p.quote").html("a little test").fadeOut();
 
Noktalarla bölünmüş bu uzun cümleyi düşünün. Aslında bu browsera yapılması gereken talimatları içeren bir zincir:
 
  1. class adı test olan DIVleri yakala
  2. bu DIVler içerisine class adı quote olan P yani paragraf taglarını ekle
  3. bu P tagları içerisine şu metni ekle "a little test"
  4. ve bu DIVi ön tanımlı fonksiyon olan fadeOut ile işle
 

Burada iki temel kural var : $() ve zincirlenebilirlik

Seçiciler

1. CSS Seçicileri:

 
Biz web sayfalarını CSS stil şablonlarıyla süslüyoruz. CSS stil şablolarını DOM hiyeraşisindeki DOM elementleriyle süslüyoruz.
 
BODY, TABLE,  P, INPUT veya tekil kullanılan ID elemanı ve class name'ler.
 
JQuery bir element ile gruplar halindeki elementleri ayırmak için CSS ile aynı erişim metodunu kullanır ve normalde bu CSS bagını sonucu için biz aynı kobinasyonu kullanırız.

 class name i note olan tüm P taglarını döndürmek için:

$("p.note")

 Tüm id si note olan P taglarını döndürmek için:

$("p#note")
 
Tüm P taglarını döndürmek için:
 
$("p")

Input taglarından parametre name göre seçim yapmak için

$('input[name="yeni_test_adi"]')

Select taglarından parametre name e göre seçim değerini almak için

$('select[name="testler"]').val()
Burada dikkatinizi kullanılan (.) ve (#) işağretlerinin css erişimindede aynı şekilde görevlendirildiği olmalı

  Üzerinde fonksiyon uygulanan elemanı seçmek için

$(this)

  

2. Çocuk (Alt tag), Kapsayıcı (Üst tag) ve Özellik Seçiciler:
 
Alt tağları (child veya children taglar) seçmek için büyüktür işağretini kullanıyoruz.
 
Aşağıdaki kod P tagı içerisindeki tüm linkleri A taglarını seçer:
$("p > a")
 
Kesin özelliğe sahip elemanları seçmek için ise köseli parantezleri kullanıyoruz:
 
Aşağıdaki kod tüm tipi text olan input taglarını geriye döndürür (seçer):
$('input[type=text]')
 
$('input, textarea, select')
 
Bazı elemanları içine alan tagları seçmek içinse has kelimesini kullanıyoruz:
 
Aşağıdaki kod içerisinde A tagı olan P taglarını seçer.
 
$("p:has(a)")

 

3. Pozisyon Temelli Seçiciler:
 
JQuery size elemanları sıralanış düzenlerine göre de seçmenize izin verir:
 
Aşağıdaki kod birden fazla P tagı içeren bir kapsayıcı tag içerisindeki ilk P tagını seçmenizi sağlar.
 
$("p:first")
 
Ön tanımlı pozisyonlar aşağıdakilerden herhangi biri olabilir (Zaten kullanılan ingilizce kelimeden anlamlarını çıkarabilirsiniz) :
 
 
first, last, first-child, only-child, nth-child(n), nth-child(even), nth-child(odd)
 
 
4. Özel Tanımlı Seçiciler:
 
Aşağıdaki seçiciler ihtiyacımız olan herşeyi bize sağlıyor gibi gözüküyor. Ancak JQuery bize bundan fazlasını sunabilir. JQuery bize aşağıdaki kelimeleri içeren özel tanımlı seçiciler tanımlamıza da izin verir
 
animated, button, checkbox, checked, disabled, enabled, header, hidden, image, input, not(filter), parent, password, radio, reset, selected, submit, text, visible
 

JQuery seçicilerini bir dizinin elemanlarını yakalarken kombinasyonlarla kullanmak çok zevklidir.  Ancak biz bu elemanları  birer birer nasıl yakaladığını bilirsek, bu elemanlar üzerinde işlem yapmak daha iyi olacaktır.

Seçtiğimiz bir takım elemanın sayısını belirlemek için  size() komutunu kullanıyoruz.

Örneğin aşağıdaki örnekte P tagına ait tüm ID leri listemek için for...loop ve size() komutunu kullanıyoruz.

 

for(var i=0; i<$('p').size(); i++){
        alert('benim ID ' + $('p')[i].id);
}
 

Elemanın kendisine direk erişim için each() komutunu isimsiz bir fonksiyon parametresi olarak grup içindeki her bir elemente erişmek için kullanıyoruz, burada elemanın kendisine erişmek için this kelimesini kullanıyoruz.

 
$('p').each(function() {
                   alert('benim ID ' + this.id)
                 });
 
 
Özellik Değerlerine Erişmek ve Ayarlamak:
 
 
attr(name) and attr(name, value)

Büyük ihtimalle tahmin etmişsinizdir. Birinci attr() komutu name parametresi ile belirlenen değere erişmek için, ikinci attr() komutu name parametresine ek olarak value ile belirtilen değeri atar.

Söyle bir örnek verirsek:

<p id="p1" title="test">Test, testp>
  Yukardaki gibi bir HTML kodu için aşağıdaki JQuery komutu TITLE parametresi test olan, IDsi p1 olan tüm P taglarının değerini döndürür.

 

$('p#p1').attr('title')

 

 Yukardaki gibi bir HTML kodu için aşağıdaki JQuery komutu TITLE parametresi test olan, IDsi p1 olan tüm P taglarının TITLE değerini "more than a test" e çevirir.

$('p#p1').attr('title', 'more than a test')
 

Css Stili: CSS ile Süslemek veya CSS Süsünü Çıkartmak:

 
 addClass(names), removeClass(names) and toggleClass(name)
 
addClass seçili kod grubundaki tüm elemanlara bir veya çoklu CSS class degerini ekler; tamtersi olarakta removeClass name parametresi ile seçilmiş  bir veya çoklu CSS class değerini çıkarır.
 
 
$('p.notes').addClass('notes', 'highlight');

$('p.notes').removeClass('highlight');

Yukardaki birinci örnekte sayfadaki class değeri notes olan P taglarının class değeri class="notes, highlight" yapılıyor.

Yukardaki ikinci örnekte sayfadaki class değeri notes olan P  taglarının class değeri class="highlight" yapılıyor. Yani notes CSS tanımlaması kaldırılıyor.

CSS stil değişimlerinin hepsini sevmeyiz, ekleme ve çıkarma, anahtarlama veya kapatma. toggleClass komutu bunun için var. toggleClass ile belirtilen CSS classı bir elemanda varsa siler yoksa ekler. Bir anlamda tersini alır.

$('p.notes').toggleClass('highlight');
 
 
 css(name, value) Komutu:
 
CSS class adı olmadan bir elamanın CSS stilini değiştirmek için ne yapacağız peki? İşte css komutu size bunu sağlayabilir.
 
 
 $('p.note').css('background-color', 'yellow');

 

Yukardaki örmekte class name değeri note olan tüm P taglarının CSS içeriği style="background-color:yellow" yapılıyor

Birçok CSS ilişkili direk elamanın durumu değiştiren komut width(value), height(value) gibi,  bulunmakta

Aşağıdaki örnekte class="note" olan P tagına ait genişlik ve yükseklik değeri değiştiriliyor.

 

  $('p.note').width(500).height(100);

 

Moden DOM web programlamasında, web sayfaları bir eleman hiyeraşisinden oluşurlar. Elemanların değişimi stillerinve pozisyonların değişiminden oluşur. Neredeyse her şeyi içerir, içerik ekleme çıkartma, ek yapma, alt tagları (child) silme, tag içerisine ekleme yapma, kopyalama gibi. Herşey mümkün, peki nasıl?

İçerik Değişimi: html() ve text() Fonksiyonları:
 
Hemen hemen tüm JQuery komutları iki yönlüdür: erişim ve ayar yani get ve set. Özelliğer erişmek için sadece komutu parametresiz olarak çağırmak yeterli; değişim içinse komutu parametre ile çağırmak yeterli.
 
Pretty much all JQuery commands go both ways: get and set. To access a property only, call the command without parameter; to modify, call the command with a parameter.
 
Aşağıdaki komut seçili eleman içerisindeki HTML taglarını döndürür innerHTML fonksiyonu gibi düşünün.
 
html()

 

Aşağıdaki komut ise seçili elaman içerisine eklenen HTML tagları gibidir, innerHTML ile bir elemana değer eklemek gibi düşünün. content herhangi bir değişken ismi.

 
html(content)

 

Aşağıdaki komut HTML taglarından arındılmış text içeriğini geriye döndürür:

text(content)
 

Şimdi bir örnekle öğrenmeye çalışalım

 

<table id="table1">
   <tbody>
       <tr>
            <td>test 1</td>
            <td>item 1</td>
       </tr>
   </tbody>
</table>

 

 Aşağıdaki kod TABLE tagları içerisinden ID si table1 olan HTML tagının içerisindeki tüm HTML taglarını döndürür.

 
$('table#table1').html();

 

 Aşağıdaki kod ise TABLE tagları içerisinden ID si table1 olan HTML tagının içerisindeki HTML tagları dışındaki metinleri döndürür. Sonuç test1item1 olacaktır.

 
$('table#table1').text();
 
 
Form Elemanlarının Değerleri: val()
 
Bir form elemanına ait değerleri almak için val() komutunu kullanıyoruz. Aynı şekilde parantez içi boşsa okur doluysa form eleman değerini parantez içindeki değerle değiştirir.
 
Aşağıdaki örneğin ne kadar işleri kolaylaştırdığına bir bakın:
 
Bir grup radyo düğmesinden seçili olan var mı diye bakmak istersek Javascriptle şöyle yazabiliriz.
 
for (var i=0; i<buttonGroup.length; i++) {
     if(buttonGroup[i].checked){
         //get value here
     }
}

 

Şimdi aynı Seçimi JQuery ile yapalım:

var selected = $('input[name=selectMe]:checked').val();

 

Unutmayın JQuery komutları her zaman çoklu görev (multitask) lidir. Bunun yanı sıra bu komutlar daha fazla sayıda zincirle birbirine bağlanırlar.

val(values) komutu ilgili bir uygulama. Tek seferde seçilen bir eleman grubuna ait her bir eleman için geçerli değerleri ayarlayabilirsiniz.

Aşağıdaki kodu bir düşünün derim:

$('input').val(['red','blue','orange']);

 

Yukardaki komut tüm onay kutularını (checkbox) veya radyo dügmelerini (radio boxes) kontrol ederek dizi ile belirtilen degerlerlere (red, blue, orange) uyanları geriye döndürür.

 
Ekleme ( Appending and inserting ):
 
JQuery  bu konularda epey yeteneklidir. 
 
Aşağıdaki kod "something" içeriğini ait olduğunu nesnenin sonuna yollayıp yapıştır.
 
append(something)

Aşağıdaki kod herşeyi ait olduğu nesnenin sonuna yapıştırır. 

appendTo(target)
 
Aşağıdaki kod "something" içeriğini ait olduğunu nesnenin başlangıcına yollayıp yapıştırır.
 
prepend(something)
 
Aşağıdaki kod herşeyi ait olduğu nesnenin başlangıcına yapıştırır.
 
prependTo(target)

 Aşağıdaki kod "something" içeriğini ait olduğunu nesneden öncesine yollayıp yapıştırır.

before(something):
 
Aşağıdaki kod herşeyi ait olduğu nesneden öncesine yollayıp yapıştırır.
 
insertBefore(target):

  Aşağıdaki kod "something" içeriğini ait olduğunu nesneden sonraki tüm elmanlara yollayıp yapıştırır.

after(something)
Aşağıdaki kod herşeyi ait olduğu nesneden sonrasına yollayıp yapıştırır.
 
insertAfter(target)
 
Wrapping ve Yoketme:
 
Şeker paketlerinin ihtiyacı can canlı ambalaj kağıtlarıdır, bazen bizde elamanımızı veya elemanlarımızı bazı sıralı paketleyicilerle paketlemek isteriz. Bunun için wrap(wrapper) komutunu kullanırız.

Wraplamadan önceki kod:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
 
Wraplama içn JQuery kodu:
 
$('.inner').wrap('
');

JQuery Kodundan sonraki durum:

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>
 
 

Madalyonun öbür yüzü, bazen biz bu durumları kaldırmak isteyebiliriz.

 
$('div.note').remove();
 
clone() fonksiyonuyla Kolanlama:
 

Klonlama işlemini clone() ile yapıyoruz, eğer klonu her hangi bir yere taşımak isterseniz, zincileme komutlarını kullanabilirsiniz, örneğin appendTo, insertBefore, before, after...

Aşağıdaki komula IMG taglarından ID si cloneme olanı çoğaltıyoruz ve DIV taglarından ID si gallary olan elemana bu klonlanan kod eklenecek.

$('img#cloneme').clone().appendTo('div#gallary');

Şimdiye kadar elemanları seçmeyi ve elemanlar üzerinde işlem yapmayı inceledik, şimdi biraz aksiyon zamanı (olay işleme). Eylemler, reaksiyonlar, Etkileşimleri öğrendiklerimiz aracılığıyla birbirine bağlayalım ve oynuyalım.

JQuery bizi Browserların olaylara (event) farklı bakışından korur. JQuery aynı zamanda bize olayların bağlılığını ve bir çok olay dinleyisine bağlılıktan kurtarır. Bazı olaylar (blur, change, click, focus, keydown...). Biz bu olayların özelliklerinede erişebiliriz, mesala keyCode, pageX, pageY, screenY, shiftKey, target gibi...

Olay(Event) Baglama ve Olay Çözme: bind() ve unbind()
 
bind(eventType, data, listener)

 

Bir image üzerine tıklandığında oluşacak bir etkileşim örnegi:

<img id="img1" src="arrowup.jpg" onclick ="showMe()">
Yukardaki işlemi JQuery ile bind() komutu ile yapalım:
 
$(function() {
        $('img#clickme').bind('click', function(evt) {
                alert('you click me');
        })
})
 
Kodda biraz değişiklik yapalım:
 
$(function() {
        $('img').bind('click', function(evt) {
                alert('My id = ' + this.id);
        })
})
Sayfadaki tüm resimlerin üzerine tıklanınınca tıklanan resmin ID sini verecek hale getirmiş olduk.
 
bind() komutu bir elemanın tanımlı işlemleri rastgele yapacak hali içinde kullanılabilir. Üstteki örneği aşağıdaki gibi biraz degiştirdik.
 
$('img')
        .bind('click', function(event) {
                alert('My id = ' + this.id);
        })
        .bind('click', function(event) {
                alert('My source = ' + this.src);
        })
        .bind('click', function(event) {
                alert('My position = ' + event.pageX+ '  '+event.pageY);
        });
 
 Aynı şekilde eklenen bir olay unbind() komutu ile kaldırılabilir.
 
unbind(eventType, listener)
unbind(event)
 
Direk kullanılan Olay(event) isimleri ve  tektikleyici (triggering) olay tutucular: eventName() and trigger()
 
Bir çok yerde olaylar bir birinci class içinde yer alır.Bugunlerde her yerde olaylar kullanılır oldu: click, focus, select, submit, blur. Bu olayları kurmak için biz bind() komutunu kullanıyoruz.
 

Örnegin:

$('img').click(function(event) { alert('My id = ' + this.id);});

$('img#clickMe').click() // this fakes a click action from the image whose id = clickMe
 
Birinci örnekteki kullanımda olayın tıklamamı, üzerine gelmemi olduğu öğrenilebilir.
 
Tetikleyici: trigger(eventType)
 
Bazen tetikleyicilere bir yanıt almak için ihtiyaç duyarız. Örneğin bazen biz bir tetikleyiciyle bir formu yollamak isteriz.
 
$('img#clickMe').click(function(event) {
                                $('img#submit').trigger('submit')
                        })

$('img#submit').submit(function(){
        alert('All right. Submited');
});
Değiştirici (Toggling) Olay (event) Tutucular: toggle(handler1, handler2, handler3, ...)
 
JQueryde anahtar kolaylıkta. Eğer bir davranış alışkanlık yapıyorsa, buna bağlı bir komut mutlaka size yardım edecektir.
 
Toggling (Değiştirici) elamanların stiline değiştirmek  için çok elverişli.
 
$('img#clickMe').toggle(
                                function(event) {
                                        $(event.target).css('background-color', 'red');
                                },
                                function(event) {
                                        $(event.target).css('background-color', 'green');
                                }
                        );
 
Üzerine Gelince (Hovering over): hover(mouseoverhandler, mouseouthanlder)
 
hover() başka bir kolaylıştırıcı komut örneği. Hepimiz linklerin ve resimlerin stillerinin değişmesinden memnun oluyoruz. mouseover() ve mouseout() kodlarını yazmakla meşgul oluyoruz. Bu JQuery ile sadece hover() la yapılıyor.
 
 
$('img#star').over(
                     function() {
                        $(this).attr('src', 'star.jpg');
                     },
                     function() {
                        $(this).attr('src', 'star.gif');
                     }
                );
Kaynak :
 

 

Yorumunuzu Ekleyin
JQuerye Giriş Yorumları +3 Yorum
  • Mert
    1
    Mert
    Güzel bir anlatım olmuş, emeğinize sağlık.
    03 Aralık 2015 20:15:50, Perşembe
  • yılmaz
    1
    yılmaz
    işağretinizi sevdim :D

    23 Ocak 2016 12:29:05, Cumartesi
  • NONAME
    1
    NONAME
    yararlı
    09 Aralık 2016 13:46:43, Cuma


Yükleniyor...
    Yükleniyor...