Category Archives: JQuery Öğreniyorum

JQuery Öğreniyorum – 5(Style Shreet – CSS )

JQuery makale serimin, 5 bölümünde JQuery ile web sayfalarımıza can veren css nasıl kontrol edebileceğimizi inceleyeceğiz. Söz konusu konuda JQuery de seçme işlemlerini bilmek çok büyük önem taşımaktadır. Bu nedenle bu konuda eksiği var olduğunu düşünüyor iseniz seçiciler ile ilgili yazımı inceleye bilirsiniz.

JQuery ile css yönetimi yazımızda ilk olarak, seçmiş olduğumuz html elemanında hazırladığımız css class ekleme işlemini görelim.

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
    </style>
    <script type=”text/javascript”>
      $(function(){
         $(“p”).addClass(“news”);
        });
    </script>
  </head>
  <body>
   <p>JQuery Css işlemleri yazısı hazırlandı…</p> 
  </body>
</html>

Yukarıdaki örneğimizde “p” html elemanına dinamik olara news css class eklemiş olduk.

Not: Burada seçilerde olduğu gibi “,” ile ayrım şeklinde birden fazla Class atayamıyoruz. Ama şu şekilde bir kullanımda bulunabiliyoruz; 

$(“p”).addClass(“news”).addClass(“itl”);

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
      .itl{
          font-style:italic;
      }
    </style>
    <script type=”text/javascript”>
      $(function(){
         $(“p”).addClass(“news”).addClass(“itl”);
      });
    </script>
  </head>
  <body>
   <p>JQuery Css işlemleri yazısı hazırlandı…</p> 
  </body>
</html>

Not da belirdiğim gibi html elemanlarına dinamik olarak class eklemek için ayrı ayrı fonksiyonlar kullanmamız gerekmektedir.

Class ekleme senaryosunu işledikten sonra karşı senaryo olarak dinamik olarak nasıl kaldıracağımızı inceleyelim.

<html>
  <head>
    <script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
    <style type=”text/css”>
      .news{
         Color:Red;
      }
    </style>
    <script type=”text/javascript”>
      function ClassRemove(){
         $(“p”).removeClass(“news”);
      }
    </script>
  </head>
  <body>
   <p class=”news”>JQuery Css işlemleri yazısı hazırlandı…</p> 
   <input type=”submit” onclick=”ClassRemove()” value=”Class remove et..”/>
  </body>
</html>

Yukarıdaki örnekte “p” html elemanına static olarak atamış olana .news class butona basıldığında ClassRemove() fonksiyonu çalıştırarak tanımlanmış olan özelliği kaldırmış olduk.

JQuery ile Css yönetimi konusunda class ekle ve çıkarma dışında konu ile ilgili olarak bazı hazır fonksiyonlarda bulunmaktadır. Şimdi fonksiyonları inceleyerek konuya daha iyi hakim olaya çalışalım.

.width()

alert($(document).width());

Örnekte documnet nesnesini uzunluğu alert(mesaj) fonksiyonu ile öğrenmiş olduk.

.height()

Bu fonksiyon bir önceki fonksiyonla aynı şekilde kullanır tek fark olarak, seçili olan nesnenin yüksekliğini vermeyi amaçlanmaktadır.

alert($(document).height());

.position()

Position fonksiyon, isimden de anlaşılacağı gibi; nesnenin top ve left koordinatlarımı veren bir fonksiyondur.

<html>
   <head>

      <script src=”jquery.js”></script>

     <style>

          p { margin-left:10px; }

    </style>

   <script type=”text/javascript”>
          alert(“Left : “+$(“p”).position().left+” “+”Top : “+$(“p”).position().top);

   </script>

</head>

<body>
      <p> JQuery Öğreniyorum – www.ibrahimatay.com </p>

</body>

</html>

css()

Bu fonksiyon ile seçim yapılmış olan html elemanı kendimizi css kullanarak istediğimiz gibi atama yapmamızı sağlamaktadır(Özellikle effekler konusunda detaylı olarak incelyeceğiz.).

  <html>
  <head>
    <script src=”jquery.js”></script>
         <script type=”text/javascript”>
          $(function(){
             $(“p”).css(“display”,”none”);
        });
   </script>

  </head>
<body>
   <p> JQuery Öğreniyorum – www.ibrahimatay.com </p>
</body>
</html>

Yukarıdaki örnekte css de bulunan “display” özelliğini “none” yaparak seçili olana html elemanın gizlemiş olduk.

Not: Css konusunda yeterli bilginiz olmadığınız düşünüyor iseniz.w3school ya da Türkçe ve e kitap olan Sayın Fatih HAYRİOĞLU ‘ nu hazırlamış olduğu e kitabı inceleyebilirsiniz.

Serimin bu bölümden JQuery ile uygulama geliştirme esnasında en çok kullanış olduğumuz css yönetim fonksiyonlarını incelemiş olduk. Konu ile ilgili sorularınızı iletişim bölümünde sorabilirsiniz.

Herkese kolay gelsin.

IBRAHIM ATAY

Kaynaklar

http://api.jquery.com/css/
http://www.fatihhayrioglu.com/kitap/
http://www.w3schools.com/css/default.asp

JQuery Öğreniyorum – 4 (Events)

Önceki yazılarımda seçiler konusunda bilgi vermeye çalıştım. Bu yazımda ise nesneler üzerinde bulunan olaylardan bahsetmeye çalışacağım.

ilk olarak JQuery de onload olayı nasıl yazabileceğimizi inceleyelim.

window.onload(function(){
  //sayfa yüklendiğin çalışır
});

Yukarıda standart olarak kullanabileceğimiz şekli yazmış olduk.Bu işlevi JQuery de yazmak için iki yöntem bulunmaktadır.

1.şekilde olarak

$(documan).ready(function(){
  //sayfa yüklendiğin çalışır
});

Yukarıda sayfa hazırlandığında(ready) içinde bulunan fonksiyonu tetiklenmesi sağlanmaktadır.

2.şekilde olarak

$(function(){
    //sayfa yüklendiğin çalışır
});

Yukarıda javascript kodun script taglari aralarına yazarak çalıştırmaya benzer bir uygulamadır.

Şimdi ise uygulamalarım kullandığımız nesnelerde fazlaca kullandığımız olayları inceleyelim. İlk olarak “a” link elementinin tıklandığında bize merhaba diyek bir uygulama tasarlayalım.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).click(function(){
//a tag seçtik ve click olayını belirledik.
        alert(“merhaba”);//javascript standart mesaj komutunu kullandık
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

Yukarıda uygulamayı gördükten sonra en çok kullandığım diğer  bir olay ise hover olayıdır. Yani nesnenin üzerine gelindiğinde çalışan olayı görelim.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).hover(function(){
//a tag seçtik ve hover olayını seçtik
        alert(“merhaba”);//javascript standart mesaj komutunu kullandık
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

Şimdi ise nesneye çift tıklandığında tetiklenecek olan olayı inceleyelim.

<html>
<head>
<script type=”text/javascript” src=”jquery-1.2.6.pack.js”></script>
<script>
$(function(){
$(“a”).dblclick(function(){
//a tag çiftıklama olayı atandır.
        alert(“merhaba”);//standart javascrpit komutu
      });
});
</script>
</head>
<body>
<a href=”#”>IBRAHIM ATAY</a>
</body>
</html>

En çok kullandığımız olaylardan sonra ise olaylar ile ilgili olan fonksiyonları kullanımlarını görelim. Bu fonksiyonlar ile web sayfalarımızda  daha iyi bir şekilde olayları yönetimi yapabiliriz.

ilk olarak bind() fonksiyonu kullanalım.bind() fonksiyonu örnek olarak bind(“click”) yani click olayı  yakalayabiliriz.Parantez içerisine istediğimiz gibi olayları kullanarak çalıştırabiliriz.

$(function(){
$(“a”).bind(“click”,function(){
// a tag click olayına bağlanmış oldu.
        alert(“merhaba”);
});
});

bind fonksiyonu, ters bir fonksiyonun vardır.unbind fonksiyonu örneğin click olayı kaldırabiliriz.

$(function(){
$(“a”).unbind(“click”);
//a tag click olayı kaldımış oldu.
    });

Son olarak da trigger()fonksiyondan bahsetmek istiyorum.Bu fonksiyonu uygulama içerisinde programatik olarak tetiklememiz gereken durumlarda kullanabiliriz.

$(‘#divmenu’).bind(‘click’, function() {
alert(“merhaba”);
});
$(‘#divmenu’).trigger(‘click’);

Öncelikler divmenu nesnesine bir click olay tanımladık ve daha sonra bu olayı trigger fonksiyonu kullanarak çağırdık.

Sonuç olarak bu yazımda olaylar ve nesnelere nasıl olay bağlayacağımız görmüş olduk.Bir daha ki yazımda görüşmek üzeri

Saygılarımla

IBRAHIM ATAY

JQuery Öğreniyorum – 3 (Seçiciler-XPATH)

Bir önceki yazımda seçiciler konusunda değinmiştim.Bu yazımda ise JQuery 1.2 ile kütüphane de kalkan ve kullanmak istediğimiz de ek olarak  kurmanız gereken bir plugin halinde gelen XPATHJQuery ‘nin bu plugin bu adres den temin edebilirsiniz. seçisinden bahsetmek istemekteyim.

Aslında XPATH plugin kullanımına bakıldığında .Net deki xpath uygulamalarını benzerlik göstermektedir.

<html>
<head>
<script src=”jquery-1.2.6.pack.js”></script>
<script src=”jquery.xpath.js”></script>
<script>
$(document).ready(function(){
$(“//div/p”).css(“color”, “red”);
});
</script>
</head>
<body>
<div>
<p>Bu yazı XPATH anlatmya çalışıyorum</p>
</div>
</body>
</html>

Yukarında bir div altında bulunan p elemanı içeriğinin rengini değiştirmiş olduk.

Bu yazımda JQuery ile XPATH nasıl kullanacağımız görmüş olduk bir  sonraki yazımda görüşmek üzeri

Herkese kolay gelsin.

IBRAHIM ATAY

JQuery Öğreniyorum – 2 (Seçiciler)

Bir önceki yazımda kısaca JQuery neden kullanmamız gerektiği  konusunda bilgi vermeye çalışmıştım.Bu yazımda ise JQuery en önemli konusun olan seçiler konusuna girmek istemekteyim.

JQuery de nesneleri seçmek için Css Class , html elemanlarını isimler yada html elemanlarını direk olarak    ID ‘ si kullanabilmektedir.

JQuery de seçim işlemi yapmak için $(“seçim yapmak istediğimiz nesne”) şeklinde kullanılmaktadır.

Html Elemanı Seçi

$(“p”) :Bu şekilde sadece p html elemanı seçmiş olduk.

$(“p,a”) : Bu şekilde hem p hem de  “a” html elemanın seçmiş olduk.Burada dikkat etmeniz gereken  nokta ise farklı elemanları seçim yapar iken araya “,” konulmasıdır.

$(“p img”) : bu şekilde ise p elemanı altındaki “img” teklerini seçmi olmaktayız.Yani bir parağrafımız var .Ama onun içerisinde deki “img” seçmek istiyoruz.Bu tip seçimler yapar ike araya “,” konulmamasına dikkat edeniz.

$(“p img”) bu örnekde bir diğer dikkate edilmesi gereken nokta ise p->img ye doğru bir seçim vardır.

Html Elemanın ID Kullara seçim yapmak

$(“divmenuContent”)

Gördüğünüz gibi ID kullanara sadece html elemanı isimi vermemiz yeterli olacak, şekilde nesneyi seçebiliyoruz.

Css Seçimleri

Css seçimlerini ,JQuery de aynı şekilde de kullabiliyoruz.Nasıl;

$(“#menuContent”): Şekilnde seçebiliyoruz.

$(“.menu”) :Bu şekilde ise bir css Class seçmiş olduk.

$(“p.News”): Bu şekilde yaptığımız şekilde news css Class atanış olan p elemanı seçmiş olduk.

$(“p.News.Enble”): uygulamada bazı durumlarda bir html elmanında bir den fazla Css Class atamanız gerekir ve onları seçini ise araya “.”  koyarak yapmaktayız.

Özel Seçici Kullanarak Seçim yapmak

Yukarında temel olarak kullanabilceğimiz seçicileri gördük.Bu bölümde ise seçim yapar iken kullanabileceğimiz kod parçalarını inceleyeceğiz.

:eq(3)

Kaçıncı sıradaki seçmek istediğiniz belirtirsiniz.

$(“img:eq(2)”)

Web Sayfamızda bulunan 5 adet bulunana “img” elemanında 2 tanesini seçmiş olduk.

Bu seçiciyi kullanır ken dikkate etmemiz gereken nokta ise seçme işlemi 0 da başlayarak devam etmektedir.

:not

Belirtmiş olduğumuz özellik dışında olan nesneleri seçmek istiyor iseniz , bunu kullanabilirsiniz.

$(“p:not(Enble)”)

Bu şekilde Enble Css Class özelliği taşımayan p elemanlarını seçmiş olduk.

:visible

Display özelliği “none” olmayan html elemanları seçmeyi sağlamaktadır.

$(“img:visible”)

örnekte web sayfasında görünür halde bulunan img elemanlarını seçmiş olduk.

:hidden

Display özelliği “none”  olan nesneleri  seçmeyi sağlamkatadır.

$(“a:hidden”)

Gizlenmiş olna linkleri seçmiş olduk.

:First

Birden fazla elema içerisinde ilkini seçmek için kullanır.Bunu eq(0) ile de yapabiliriz.

$(“a:First”)

Linkler içerisinde ilk linki seçmek işlemi yaptık.

:Last

Bir den fazla html elemaları içerisinde en sondakini seçmiş olduk.

$(“a:Last”)

bu yazımda, uygulama hazırlariken kullandığımız genel seçicileri değinmiş oldum.Bir daha yazımda görüşme dileği ile herkese kolya gelsin.

IBRAHIM ATAY 

Kaynak

http://docs.jquery.com/DOM/Traversing/Selectors

JQuery Öğreniyorum – 1 (Giriş)

Web geliştiricileri, geliştirdiği uygulamaların kullanıcıların daha fazla zaman geçirmesi adına bir çok görsel ya da gerçek zamanlı veri işlemi yapması gerekmektedir. Bu gibi işlemleri yapabilmek için JavaScript dili kullanılmaktadır. JavaScript kodları sayesinde tarayıcı içerisinde istediğimiz birçok işlemi en fazla kullanıcı deneyimi kazandırmayı amaçlanmaktadır.

jquerycom

Yazdığımız JavaScript dili her tarayıcıda çalışmamakta ve bunun yanında çok fazla JavaScript bilgisi gerektirmektedir. Bu durum Web geliştiricisi olarak çok büyük problem olarak görmekteyim. Konu ilgili yapacağınız araştırmalarda çeşitli hazır JavaScript kütüphaneleri olduğunu bulabilirsiniz. Bu kütüphanelerin en popüleri olarak ise, JQuery olarak görülmektedir.

JQuery, açık kaynak olarak sürdürülen ve Microsoft, Google, Yahoo gibi teknolojiye yön veren teknoloji şirketleri tarafında kullanılmakta ve destek verilmektedir. JQuery özellik ile ASP.Net MVC ile gerçekleştirdiğimiz Web projelerinde büyük olaylıklar sağlamaktadır. Bu gibi özellikler JQuery JavaScript kütüphanesinin kullanılması büyük önem verilmesinin göstergesidir.

Bu yazımda Web uygulamalarımızda iş kolaylığını sağlayan JQuery kütüphanesini tanıtmaya çalıştım. JQuery kütüphanesi ile ilgili dosyaları bağlantıdaki adresten edinebilirsiniz. Bu yazım ile birlikte JQuery Öğreniyorum serimizin başlamasına ilk adımını atmış olduk. Konu ile ilgili sorularınızı info@ibrahimatay.org eposta adresine gönderebilirsiniz.

IBRAHIM ATAY

Teşekkürler