jQuery Attr Methodu

16.06.2012Okunma Sayısı: 6061Kategori: JQuery

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

 
<style>
     .Buton
            {
                        color:blue;
                        width:100px;
            }
 </style>
id="btn" class="Buton">Tikla</button>

                                   <style>
                                        .Buton
                                               {
                                                           color:blue;
                                                           width:100px;
                                               }
                                    </style>
                        <button 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.

 
<button id="btn" style="color:blue;width:100px;">Tikla</button>

<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.

 
<html>
            <head>
                        <title></title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   $(document).ready(function(){
                                               $("#resim").attr(
                                               {
                                                           src:"resim.jpg",
                                                           width:"200",
                                                           height:"50"
                                               });
                                   });
                        </script>
            </head>
            <body>
                        <img id="resim"/>
            </body>
</html>

<html>
            <head>
                        <title></title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                   $(document).ready(function(){
                                               $("#resim").attr(
                                               {
                                                           src:"resim.jpg",
                                                           width:"200",
                                                           height:"50"
                                               });
                                   });
                        </script>
            </head>
            <body>
                        <img id="resim"/>
            </body>
</html>

“resim” isimli HTML nesnemizin kaynağını “resim.jpg”’den alacağını,
genişliğinin 200px olacağını,
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

veysel@ugurkizmaz.com