"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

jQuery Attr Methodu

Bu makalemizde jQuery ile attribute (özellik) ekleme işlemini inceleyeceğiz.

 Bu makalemizde jQuery ile attribute (özellik) ekleme işlemini inceleyeceğiz.

 
Bir HTML nesnesi oluştururken onun özelliklerini ya CSS classında tanımlayıp class’ı nesneye referans gösterir ya da özelliklerini nesne içinde tanımlarız.
 
Örneğin
 
  1. <style>
  2.      .Buton
  3.             {
  4.                         color:blue;
  5.                         width:100px;
  6.             }
  7.  </style>
  8. id="btn" class="Buton">Tikla</button>
Kodunda Buton isimli class, btn nesnesine atanmış ve sonuç olarak Buton classındaki özellikleri taşıyan bir buton ortaya çıkmıştır.
 
 
 
Veya aynı işlemi class yerine HTML nesnesinin style özelliğini kullanarak da gerçekleştirebiliriz.
 
 
  1. <button id="btn" style="color:blue;width:100px;">Tikla</button>
 
Peki jQuery ile çalışırken bir nesnenin özelliğini değiştirmemiz gerektiğinde nasıl bir işlem yapacağız?
 
Bu noktada jQuery’nin attr() methodu devreye girmektedir. Bu method ile HTML nesnesinin özelliklerini istediğimiz gibi düzenleyebiliriz.
 
Örneğin attr() methodu ile bir resim nesnesinin özelliklerini düzenleyelim.
 
 
  1. <html>
  2.             <head>
  3.                         <title></title>
  4.                         <script src="jquery-1.5.1.js"></script>
  5.                         <script type="text/javascript">
  6.                                    $(document).ready(function(){
  7.                                                $("#resim").attr(
  8.                                                {
  9.                                                            src:"resim.jpg",
  10.                                                            width:"200",
  11.                                                            height:"50"
  12.                                                });
  13.                                    });
  14.                         </script>
  15.             </head>
  16.             <body>
  17.                         <img id="resim"/>
  18.             </body>
  19. </html>
 
  1. “resim” isimli HTML nesnemizin kaynağını “resim.jpg”’den alacağını,
  2. genişliğinin 200px olacağını,
  3. yüksekliğinin 50px olacağını
 jQuery ile belirleyebildik. Çalıştırdığımızda bu özellikleri taşıyan bir resim karşımıza çıkacaktır.
 
 
 
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.