Adım Adım jQuery – 1

Merhaba arkadaşlar, uzun süredir yazı yazma fırsatım olmamıştı. Ancak Web uygulama geliştiricilerin en çok kullandığı kütüphanelerin başlarını çeken jQuery kütüphanesi hakkında sıralı bir yazı dizisi paylaşmaya karar verdim. Hem bu şekilde jQuery‘nin tüm metotlarını incelemiş olacağız hem de birlikte jQuery‘i öğrenmeye çalışacağız. Fazla söze gerek yok hemen işe koyulalım arkadaşlar. 🙂

jquery_download

Öncelikle bu işlemler sırasında kullanmak üzere linkten jQuery kütüphanesini indiriyoruz ve masaüstünde oluşturduğumuz projemiz içerisindeki index.html dosyasında import edelim. İndirmek için linki tıkladığınızda yandaki web sayfası karşınıza gelecek ve buradan jQuery kütüphanesini indirebilirsiniz. Konuya giriş yapmadan önce küçük bir dipnot jQuery içerisinde seçiciler ile çalışacağız. Bu seçiciler genelde taglar içerisindeki id’ler ya da class’lar olabilir. Bu seçiciler eğer id ise “#idAdi”, class ise “.classAdi” şeklinde kullanılır. Bunu örnekler içerisinde daha rahat inceleyebilirsiniz.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Adım Adım jQuery - 1</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"/>
  </head>
  <body>
    
  </body>
  <script type="text/javascript">
    //jQuery kodlarımızı buraya yazacağız.
  </script>
</html>

Evet arkadaşlar projemiz içerisinde jQuery kütüphanesini import ettiğimize göre artık kodlarımızı yazıp kütüphaneyi inceleyebiliriz.

add( ) fonksiyonu;

Bu fonksiyon parametre olarak içerisine seçici, element, html alabilmektedir. Burada yapacağımız örneğin önce kodlarını görelim ardından işlemi anlatarak sonuçta oluşan çıktıyı gösterelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Adım Adım jQuery - 1</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>Paragraf</p>
    <div>Div</div>
  </body>
  <script type="text/javascript">
    //jQuery kodlarımızı buraya yazacağız.	
    // $("ul").css( "background-color", "#C2E0FD" );
    // $("p").css( "background-color", "#C2E0FD" );
    // $("div").css( "background-color", "#C2E0FD" );
    $( "ul" ).add( "p" ).add('div').css( "background-color", "#C2E0FD" );
  </script>
</html>

sonuc1Burada aslında yapılmak istenen işlem css metodu ile HTML taglarına css vermektir. Ancak konumuz olan add( ) metodu burada bağlaç görevi görmektedir. İçerisinde belirtilen tagları da bir bakıma birbirine bağlayarak css metodunun etkisini tamamına yaymaktadır. Yorum satırı olarak verilen kısımda add( ) metodu olmadan aynı işlemin yapılışı gösterilmiştir. Diğer bir deyişle 3 ayrı satırda yazılabilecek kodu add ( ) metodu ile tek satırda yazabiliriz arkadaşlar.

 

 

addClass( ) ve removeClass( ) fonksiyonları;

Arkadaşlar adlarından da anlaşılacağı gibi bu metotlar ile belirtilen elementlere istediğimiz class atamasını yapabilir, içerisinde olan class’ı ise silebiliriz. Burada basit bir örnek yapalım, içerisinde ornekClass adında bir class olan “div” tagından ornekClass’ı silerek yeniClass ekleyelim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Adım Adım jQuery - 1</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  </head>
  <body>
    <div class="ornekClass">
      
    </div>
  </body>
  <script type="text/javascript">

    $('div').removeClass("ornekClass").addClass('yeniClass');

  </script>
</html>

İşlem sonunda da kaynak kodda removeClass metodu içerisindeki class’ın silindiğini, addClass içerisindeki class’ın ise eklendiğini göreceksiniz.

after( ) fonksiyonu;

Bu metot içerisine verilen HTML taglarını seçici de belirtilen kısmın bitiminin hemen ardına eklenmektedir. kaynak kodda da göreceğiniz üzere sayfamızda sadece bir div tagı olmasına rağmen jQuery div’in ardına paragraf ve içerisine bold tagı eklemektedir. Sonucu kaynak kodda inceleyebilirsiniz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Adım Adım jQuery - 1</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
  </head>
  <body>
    
    <div>
        
    </div>

  </body>
  <script type="text/javascript">
    
    //after metodu başlangıç
    $("div").after("<p><b>after metodu örneği</b></p>");
    //after metodu bitiş


  </script>
</html>

append( ) ve appendTo( ) fonksiyonları;

append( ) metodu ile appendTo( ) metotları arasında çok küçük bir farklılık vardır. Öncelikle append metodundan bahsedelim, bu metod ile ilk kısımda seçici ile belirtilen element, append metodu içerisindeki seçicinin belirttiği script içerisine  eklenir. Yani örneğimizde span elementi, #sari id’si ile belirtilen div içerisine eklenir. appendTo( ) metodunda ise işler biraz değişiyor. Bu metotta ise ilk kısımda belirtilen seçici içerisine appendTo( ) metodunda gönderilen içerik eklenir. Örneğimizde <b> tagları arasında yazdığımız ‘Eklenen bold yazı.’ içeriği span taglarının içerisinde gösterilecektir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Adım Adım jQuery - 1</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <style>
      #sari {
        background: yellow;
      }
  </style>
  </head>
  <body>

    <span>Burası bir span'dır.</span>
    <div id="sari">Burası div tagı.</div>

  </body>
  <script type="text/javascript">

    //append ve appendTo başlangıç
    $('span').appendTo("#sari");
    $('span').append('<b>Eklenen bold yazı.</b>');
    //append ve appendTo bitiş


  </script>
</html>

Evet arkadaşlar bu yazımızda temel seviyede bazı metotları incelemiş olduk, devam edecek yazılarımızda yine bazı metotları inceleyeceğiz. Soru görüş ve istekleriniz için mail atabilirsiniz. Yaptığımız derslerin kaynak kodları için linke tıklayınız.. İyi çalışmalar.. 🙂

 

Add a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir