JQUERY TEMELLER VE KULLANIMI JQUERY NEDR JQuery bir

JQUERY TEMELLERİ VE KULLANIMI

JQUERY NEDİR? JQuery bir javascript kütüphanesi ya da bir javascript frameworküdür diye yorumlanabilir. Javascript kullanımını hızlandırmak ve kolaylaştırmak amaçlıda kullanılır. � Daha çok sayfalardaki animasyonlar için Flash alternatifi olarak kullanılır. Flash alternatifi ile; � Ø slaytlar, Ø foto galeriler, Ø tab menüler yapmakta kolaylık sağlar.

JQUERY NEDİR? CSS ile Jquery iç içe kullanılabilir. � Günlük hayatımızda kullandığımız sitelerde bulunmaktadır. Word. Press buna verilebilecek örneklerin başındadır. � Başarısı ciddi derecede büyük boyutlara ulaşmıştır. Bilinen büyük markalardan Microsoft ve Nokia kendi platformlarına JQuery i koymayı planlamaktadırlar. � JQuery kütüphanesi bedava ve açık kaynaklıdır ve gün geçtikçe kullanım sıklığını arttırmaktadır. �

JQUERY NEDİR? � Site ya da uygulama içerisinde sağladığı bazı kolaylıklar; Ø Ø Ø Nesne seçimlerini ve etkilenmelerini hızlandırır. Html içinde animasyon yapımını kolaylaştırır. Css ile birlikte bir bütün halinde çalışır. Web sayfası araçları AJAX HTML/DOM değişikliği

Jquery ‘e Giriş JQuery e başlamadan önce HTML ve CSS hakkında bilgi sahibi olunmalıdır. . Onları bilmeden JQuery kütüphanesinin nasıl çalıştığını ve mantığını anlamanız oldukça zordur. � Bir kodu neden yazdığınızı bilmiyorsanız ne yaptığınızı da bilmiyorsunuz demektir. Bu sebepten dolayı javascript hakkında da bilgiye sahip olmanız gerekmektedir. �

$ Nedir? " $ " j. Query'nin html elementlerini seçmemize yarayan işarettir. § Örneğin; bir tablonun elemanları seçmek ve üzerinde işlem yapmak için. var tablo = $("ta"); Bu şekilde html form'daki tüm ta etiketleri seçilir ve üzerinde işlem yapılabilir.

JQUERY SEÇİCİLER VE FİLTRELER

1. SEÇİCİLER Kullanımı Açıklaması $(“p”) Bütün paragrafları seçer. $(“div p”) div nesnesinin altında bulunan bütün paragrafları seçer. $(“#giris”) id değeri giris olan nesneyi seçer. $(“. giris”) sınıfı giris olan nesneleri seçer. $(“#giris[name]”) id değeri giris olan ve isim değeri olan nesneyi seçer. $(“a[name=bcakir]”) İsmi bcakir olan linkeri seçer. $(“input[name^=sec]”) İsmi sec ile başlayan input nesnelerini seçer. $(“. giris[name$=sec]”) Sınıfı giris olan ve ismi sec ile biten nesneleri seçer. $(“a[id!=sec]”) id değerinde sec olmayan linki seçer. $(“a[id*=bcakir]”) id değerinde bcakir geçen linki seçer. $(“input[type=hidden]”) Gizli input nesnelerini seçer.

2. FİLİTRELER Kullanımı Açıklaması $(“a: odd”) index değeri tek olan linkleri seçer. $(“a: even”) index değeri çift olan linkleri seçer. $(“p: first”) Sıralamada ilk gelen paragrafı seçer. $(“p: not(: last)”) Son paragraf hariç bütün paragrafları seçer. $(“#giris p: last”) Giriş id değerine sahip nesnenin ilk paragrafını seçer. $(“li: eq(0)”) Liste index değeri sıfır (0) olan liste elemanını seçer. $(“li: gt(2)”) Liste index değeri ikiden (2) büyük olan liste elemanlarını seçer. $(“li: lt(2)”) Liste index değeri ikiden (2) küçük olan liste elemanlarını seçer.

2. FİLİTRELER Kullanımı Açıklaması $(“li: lt(2)”) Liste index değeri ikiden (2) küçük olan liste elemanlarını seçer. $(“p: contains(‘bcakir’)”) İçerisinde bcakir yazısı geçen paragrafları seçer. $(“div: empty”) İçerisinde yazı olmayan div nesnelerini seçer. $(“div: parent”) İçerisinde yazı bulunan div nesnelerini seçer. $(“div: has(a)”) İçerisinde link bulunan div nesnelerini seçer. $(“a: hidden”) Gizli linklerin hepsini seçer. $(“a: visible”) Görünür linklerin hepsini seçer. $(“: button: enabled”) Aktif olan bütün butonları seçer.

2. FİLİTRELER Kullanımı Açıklaması $(“: button: disabled”) Pasif olan bütün butonları seçer. $(“: checkbox: checked”) İşaretlenmiş olan bütün checkboxları seçer. $(“input: text”) Bütün text nesnelerini seçer. $(“. giris: button”) Sınıfı giriş olan butonları seçer. $(“select option: selected”) Seçim kutusundan seçili olan nesneyi seçer. $(“select [value=2]”) Seçim kutusundan değeri iki (2) olan nesneyi seçer.

$(document). ready() � Document Ready. Açılan sayfa tamamen yüklediğinde yapılacak işlemleri bu method içinde kullanılır. Örneğin: $(document). ready( function(){ //Sayfa yüklediğinde bu method çalışır. alert("Sayfa Yüklendi"); }); Seçili element örneği $( '#tablo' ); // tablo id'sine sahip elementi seçer.

Elementi doğru seçtik mi? � Bir elementi seçip seçemediğimiz anlayabilmek için jquery'nin” length” methodunu kullanırız. if ( $( '#secilimadde' ). length > 0 ) { // Bir şeyler yaz. . } Bu if kullanımı seçimin doğru olup olmadığını döndürür bize. . .

Seçilen Bir Grup element İçinden Herhangi Birini Seçmek. var liste= $('ul#liste li' ); var indextekielement= liste[0]; Bunu dizi gibi düşünebiliriz. Liste dizisinin 0. ncı index'indeki element. �

Seçili Elementin İçini Doldurmak. $( 'table tr td' ). html( '<div>j. Query is a. Wesome!</div>' ); Bu kod parçacığında sayfadaki table'lar içindeki tüm td'lerin html'ine <div>JQuery is a. Wesome!</div> yazacaktır. Sadece text yazdırmak istiyorsak text() methodunu kullanıyoruz. $( 'table tr td' ). text( 'JQuery is a. Wesome!' );

$. each her programlama dilinden bildiğimiz foreach methodur. Seçtiğimiz elementlerin içinde sırayla dönmemizi sağlamaktadır. � $( 'ul li' ). each(function( index, element) { // this: dönülen index'teki element // index: dönülen index // element: dönülen index'teki element " this ile aynıdır. " }); �

Zincir Method Yapısı JQuery ile bir elementi seçtikten sonra istediğimiz sayıda method ekleyebiliriz. $(". kodstrap div"). find('a'). css({"color": "red", "textdecoration": "underline"}); � Burada yaptığımız. kodstrap class'ı altındaki div'lerin içinde. find() methodu ile tüm <a> taglerini bul sonra bunların renkleri kırmızı yap ve yazı tipini altı çizili yap dedik. �

Seçilen Elementleri Filtrelemek � Filtreleme işleminde 3 method kullanılır. Ø. filter() - filter bildiğimiz filtre demek. Ø. not() - sahip olmayanlar Ø. has() - sahip olanlar var secili. Anchors= $( '. herhangibirclass a' ); // secili anchor'lardan class'ı kodstrap olanları filtreledik. var withkod= secili. Anchors. filter( '. kodstrap' ); // secili anchor'lardan class'ı kodstrap olmayanları filtreledik. var notwidthkod= secili. Anchors. not( '. kodstrap' ); //secili anchor'lardan içinde p etiketi olanları filtreledik. var has. P = secili. Anchors. has( 'p' );

Seçili Elemente Bağlı Elementleri Seçmek //Sayfadaki tüm elementleri seçer. var liste. Elementleri= $( 'li' ); // liste. Elementleri ile aynı seviyedeki üst satırda seçilenlerin dışındakileri seçer. var disindakiler= liste. Elementleri. siblings(); // Seçili elementlerden sonra gelen elementleri seçer. var sonrakiler= liste. Elementleri. next(); //seçili elementleri bir üst seviyesindeki elementi seçer. (Aile seçici) var aile= liste. Elementleri. parent(); //seçili elementleri alt elementlerini seçer. (Çocuk seçici ) var cocuklar = liste. Elementleri. children(); // seçili elementler altındaki tüm li elementlerini seçer. var tumli= liste. Elementleri. find( 'li' ); // kodstrap class'ına sahip aile elementlerini seçer. var sahipclasslar= liste. Elementleri. parents( '. kodstrap' );

Class Ekleme / Çıkarma. add. Class() - Seçili elemente class eklemeye yarar $( 'a' ). add. Class( 'kodstrap' ); //kodstrap classını ekledik. �. remove. Class() - Seçili elementen class çıkarmaya yarar. $( 'a' ). remove. Class( 'kodstrap' ); //kodstrap classını kaldırdık. Eğer ekleme çıkarma işlemini ardarda yaparsak ; �. toogle. Class() methodunu kullanabiliriz. $( 'a' ). toogle. Class( 'kodstrap' ); //kodstrap classını kaldırdık. �

Stil Değiştirme � . css() - methoduyla seçili elementlerin css bilgilerini değiştirebiliriz. //font-size ve margin-left css stilini değiştirdik. $( 'a' ). css({ 'font-size': '20 px', 'margin-left': '20 px' });

Form Elementlerinin Değerlerini Değiştirme � . val() - Bu method ile seçili input elementlerinin değerlerini alabilir ve değer atayabiliriz. //Tipi text olan input olan elementleri seçip değerlerini kodstrap yaptık. $( 'input[type="text"]' ). val( 'kodstrap' ); Not: type="text" kısmında text yerine diğer html elementlerin tiplerini yazabilirsiniz. � . text() - Bu method seçili elementlerin text özelliklerini alabilir ve ya yazı yazabiliriz. //Sitedeki tüm div'lere Bir değer yazdık : ) $( 'div' ). text('Bir değer : )');

Form Elementlerinin Değerlerini Değiştirme � . html() - Bu method ile seçili elementlerin içine başka elementler eklememize ya da seçili elementlerin html değerlerini almaya yarar. //Sitedeki tüm divlerin içine <p>İçinde p olan bir div<p> yazdırdık. $('div'). html('<p>İçinde p olan bir div<p>');

Elementlerin Niteliklerini Seçip Değiştirme � Örneğin; Aşağıdaki kodda formdaki tüm resimlerin title niteliklerini j. Query Kodstrap olarak değiştir. $( 'img' ). attr( 'title', 'j. Query Kodstrap' ); //Aşağıdada kodstrap class'ına sahip elementi id niteliğini aldık. var idsi = $(". kodstrap"). attr("id");

Projede Jquery Kullanımı � Örnek; Şekil 1. 1 Üç nesneden oluşan sırasız bir liste tanımlanmıştır. Renkleri kırmızı olarak seçilmiştir. Şekil 1. 1

� Ekran çıktısı şu şekildedir; (Şekil 1. 2) Şekil 1. 2 j. Query tanımlamanın altına <script> etiketi açalım. İçine j. Query yazılır ve parantez açıktan sonra 'ul li' ile liste elemanlarımı seçilir. 'ul li' yerine "ul li" de yazabilirsiniz. Yani tek tırnak işareti yerine çift tırnak işareti kullanabilirs

Şekil 1. 3 Şu an JQuery ile liste elemanlarını seçtik. Peki bu seçimin yapıldığını nereden gö Bunun için bazı kod eklemeleri yapmalıyız.

Şekil 1. 4 Liste adlı yeni bir değişken tanımladık ve içeriğini j. Query olarak ile seçtiğimiz 'ul li' etiketleri ile belirl Daha sonra console. log özelliği ile bu liste değişkeninin konsol ekranında görüntülenmesini istedik. Şimdi projenizi sadece Google Chrome tarayıcısı ile çalıştırın.

Şekil 1. 5 F 12 fonksiyon tuşuna basın ve Console sekmesine gelin liste elemanlarının j. Query ile seçildiğini görebilirsiniz.

� Örnek ; HTML elemanlarımızı ana elementlerine göre ya da kendi verdiğimiz id ve classlara göre seçip üzerinde JQuery ile javascript işlemlerini yapabiliriz. Bunun en basit hali : $(selector). action() şeklindedir. Ø Bu kodda gördüğünüz gibi JQueryde tanımlamalarımızı “$” işareti ile yapıyoruz. “selector” yazan bölüme HTML elementlerimizi seçebilmek için id, class veya elementin adını yazıyoruz. � Örn: Sayfamızdaki tüm <p> elementleri üzerinde işlem yapabilmek için $(“p”)yazmamız gerekiyor. . action() yazan kısma ise seçtiğimiz HTML elementine yapılmasını istediğimiz eylemi yazıyoruz. � Örn: Sayfamızdaki tüm <p> elementlerini gizlemek için $(“p”). hide() yazmamız gerekiyor. Ø

Şekil 1. 1

� Ekran Çıktısı: Şekil 1. 1. 2 html > head > meta > title > script > body >h 1 şeklinde olacaktır. Kalın olarak belirttiğimiz yerde görüldüğü gibi scriptimiz önce çalıştırıldığı için <h 1> elementimiz yeşil renkli olmayacaktır. Görüntülemek için : Demo Script kodlarımızı alt tarafa alırsak ne olacağını görelim.

Şekil 1. 2

� Ekran Çıktısı: Şekil 1. 2. 1 Örnek 3; � Jquery ile ilgili buton yapmayı ve işlevlendirmeyi öğrenelim; � Paragraf yazıları oluşturup bu yazıları butonla nasıl gizlenebileceğine bakalım:

Şekil 1. 1

� Ekran Çıktısı Şu şekildedir; Şekil 1. 1. 2 Paragrafı gizle butonuna basıldığında paragraflar gizlenecektir; Şekil 1. 1. 3

� İsteğe bağlı olarak paragrafı gizlemek yerine yazıların arka plan ve metin rengini değiştirebiliriz; Şekil 1. 2

� Ekran Çıktısı Şu Şekilde Olacaktır; Şekil 1. 2. 2 Paragrafı gizle butonuna basıldığında yazıları gizlemek yerine metin rengi mavi arka plan rengini ise kırmızı yapacaktır. Renkler isteğe bağlı olarak değiştirilebilir.

� Örnek 4; Ø JQuery nin önemli bir özelliği olan animasyon yapımından bahsetmiştik. Ø Butona basıldığında hareket eden nesne animasyonu; Şekil 1. 1

� Ekran Çıktısı Şu Şekilde Olacaktır; Şekil 1. 1. 2

� Animasyonu başlat butonuna basıldığında ekranda görülen sarı kutu sol baştan sağa doğru hareket edecektir. Şekil 1. 1. 3 Ekranda da görüldüğü gibi sarı kare ekranın sol köşesine hareket edip durmuştur.

� Örnek 5; Bu örnekte ise iki buton oluşturup bu butonlarla listeye veri nasıl eklenir bunu öğreneceğiz; Şekil 1. 1

� Ekran Çıktısı Şu Şekilde Olacaktır; Şekil 1. 1. 2 Yazdığımız bu koda göre Paragrafa Metin Ekle butonuna tıklandığı zaman paragraf kısmına Metin yazar. Listeye Metin Ekle butonuna tıkladığımız zaman listenin altına Liste yazısını ekler.

� Örnek 6; Şekil 1. 1 : Bir kutu içinde verilen yazıları butona tıklandığında gizlemeyi gösteren bir örnek; Şekil 1. 1

� Ekran Çıktısı Şu Şekilde Olacaktır; Şekil 1. 2 Şu şekilde bir ekran karşımıza gelecektir. Metni Gizle butonuna basıldığında yazıların hepsi kaybolacaktır.

Şekil 1. 3

KAYNAKÇA � http: //www. dijitalders. com/icerik/82/4656/jquerye_giris. html#. V-5 Ok. Pm. LTIU � http: //www. kodstrap. com/makale/jquery-temelleri-bolum-1 � http: //bcakir. com/jquery-seciciler-ve-filtreler. html � http: //uzmanim. net/soru/jquery-nedir-ne-ise-yarar-nasil-kullanilir/465 � http: //www. kodstrap. com/makale/jquery-temelleri-bolum-2 � http: //www. kodstrap. com/makale/jquery-temelleri-bolum-3 � http: //www. cemdemir. net/jquery-nedir-nasil-kullanilir-nasil-ogrenilir-465. html � https: //eksisozluk. com/w 3 schools--507757 � http: //www. bilgisayamiyorum. com/question/168. aspx � http: //zinzinzibidi. com/web_tasarim/jquery/projede_jquery_kullanimi � https: //www. google. com. tr/#q=translate (Çeviri yapıldı. ) � http: //www. w 3 schools. com/jquery/tryit. asp? filename=tryjquery_animation 1 � http: //www. w 3 schools. com/jquery/tryit. asp? filename=tryjquery_dom_html_set � http: //www. w 3 schools. com/jquery/tryit. asp? filename=tryjquery_html_append � http: //www. w 3 schools. com/jquery_dom_remove. asp � http: //www. w 3 schools. com/jquery/tryit. asp? filename=tryjquery_dom_empty � https: //tr. wikipedia. org/wiki/JQuery � http: //tolgacelik. net/jquery-serisi-jquery-kullanimi-ve-ornekler/ � http: //www. eyurtsever. com/index. php/jquery-nedir-nasil-kullanilir