Öne Çıkan Yayın

Uzak Masaüstü Bağlantısı ve Modem Port Ayarı

İyi günler bu konumuzda uzak masaüstü bağlantısı ve modem port ayarını anlatacağım. Normalde uzak masaüstü bağlantısı ayarını açtığımızda ye...

20 Eylül 2012 Perşembe

Jquery .attr()

Merhaba arkadaşlar bugun sizlere Jquery .attr() özelliğini anlatacağım. .attr() özelliği elementlere özellik eklememize izin verir. Örn. <img /> tagına "src" özelliği eklemek. Şimdi isterseniz bir div ve buton oluşturalım ve butona basıldığında dive class ekleyelim.
evet öncelikle body tagının içine bir div ve buton ekleyelim.
<div id="dv">Örnek Div</div>
<input type="button" value="ekle" id="attrbtn" />
butona basılınca dive eklenecek classı oluşturalım.
<style type="text/css">
 .css {
    width:200px;
    height:100px;
    background-color:red;
    padding:10px;
    color:yellow;
    font-size:14px;
 }
</style>
Evet classımızı, div ve butonumuzu oluşturmuş olduk. Şimdi scriptimizi oluşturup kodlarımızı yazıyoruz.
<script type="text/javascript">
  $(document).ready(function () {
    $("#attrbtn").click(function () {
      $("#dv").attr("class","css");
    });  
  });
</script>
Jquery kodlarımızıda ekledik. şimdi HTML görünümü veriyorum.
<!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">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Jquery .attr()</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  
<script type="text/javascript">
  $(document).ready(function () {
    $("#attrbtn").click(function () {
      $("#dv").attr("class","css");
    }); 
  });
  </script>
  <style type="text/css">
  .css {
      width:200px;
      height:100px;
      background-color:red;
      padding:10px;
      color:yellow;
      font-size:14px;
  }
  </style>
  </head>

<body>
  <div id="dv">Örnek Div</div>
  <input type="button" value="ekle" id="attrbtn" />
  </body>
  </html>


Kodlar bitti örnek çalışmayı aşağıda görebilirsiniz.


Örnek Div

Hiç yorum yok:

Yorum Gönder