Jquery

Jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
ready fonksiyonu
$(function(){
Sayfa Yüklenirken çalışmasını istediğimiz işlemler bu fonksiyon altına yazılır
});
Seçiciler
Hangi nesne üzerinde işlem yapacağımızı belirlememiz gerekmektedir. Gösterimi
$("div");
$("div , p , #ammar , . aslan");
Metot Kullanımı
$(function(){
$("p")
.hide(1000)
.delay(1000)
.show(1000);
});
Css Metodu
Css veripmemizi veya css değerlerini okumamızı sağlar
$("p").css("color" , "red");
$("p").css({
"color" : "red",
"text-decoration" : "underline"
});
Renk değeri alımı
var rgbvalue=$("p").css("color");
attr ve removAttr metodu
Ekleme:
$("a").attr({
"href" : "http://ammaraslan.blogspot.com",
"title" : "ammar"  });
Silme:
$(“a”).removAttr(“href”);
Sınıf ve fonksiyon Tanınlama
Küçük birörnek ile anlatacak olursam
<!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" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
                                   $.sinif = {        
                                                degergonder : function(x) {
                                                                 alert(x);
                                                                }
                                               }             
});
</script>
</head>
<body>
<input type="submit" onclick=" $.sinif.degergonder('Ammar')" />
</body>
</html>
Birden fazla fonksiyon
$(function(){
                                   $.sinif = {
                                                degergonder : function(x) {     
                                                                 alert(x);
                                                                },
                                                                degersil : function(){}
                                               };});
Sınıfsız fonksiyon oluşturma:
<!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" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
 $.degergoster = function(x){   
Alert(x);
};
});
</script>
</head>
<body>
<input type="submit" onclick=" $.degergoster('Ammar')" />
</body>
</html>

  
Nesne içerindeki değeri okuma ve Click():
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
                                  
 $("pre").click(function(){
                                    var deger=$(this).text();
                                    alert(deger);
                                    });
});
</script></head><body>
<pre>İçeriği okumak için bana tıkla</pre>
</body></html>
Text verisi alma (Val())
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
$("button").click(function(){
  var deger = $("input[name=ammar]").val();    /*   veyaaa     var deger = $(".ammar").val();   */
  alert(deger); });});</script>
<input type="text" class="ammar" />
<button>Tıkla </button>


After, Live, mouseover, mouseout, addClass,  removeClass, Append , İndex Metodu :
After ile nesne eklemi işlemini yapıyoruz.
$(function(){
$("button").click(function(){
$(this).after("<button>Banada </button></br> ");
});});                         
Live ile yeni eklenene müdahale etmemizi sağlıyor.
$(function(){
$("button").live("click",function(){
});});

Appent Metodu:
Şeçilen nesneden hemen sonra istediğimiz bir nesne oluşturmamızı sağlamaktadır.


addClass ile css class’ı verip removeClass ile css classını kaldırız. Örnekte anlayacaksınızdır.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
$("button").live("click",function(){
$(this).after("<button>Banada </button></br> ");
});
$("p").live({
click : function(){
                                   $(this).after("<p>Vay Anası</p></br>");
},
mouseover : function (){
                                   $(this).removeClass("mouseout");
                                   $(this).addClass("mouseover");
},
mouseout  : function (){
                                   $(this).removeClass("mouseover");
                               $(this).addClass("mouseout");
}
});
});                      
</script>
<style type="text/css" >
.mouseover{      background-color:red;        }
.mouseout{        background-color:#9C0;     }
</style><button>Buraya Tıkla</button>
<p>Bana Tıkla</p>

                                  
İndex:

Bu seçili nesnenin indeksini verir. Küçük örnek bir slider uygulaması yapalım .
<!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" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js" ></script>
<script>
$(function(){
                                   $(".tab").hide();
                                   $(".tab:not(:first)").show();
                                   $("ul li").click(function(){
                                               var a= $(this).index();
                                               $(".tab").hide();
                                                $(".tab:eq("+a+")").show(1000);
                                               });
                                   });
</script>
<style>
ul li{

                                   list-style:none;
                                   float:left;
                                   padding-left:50px;
                                   }
</style></head><body>
<div class="tab"><img src="../971858_10151620033272398_121393181_n.jpg" />
</div>
<div class="tab"><img src="../1.png" /></div>
<div class="tab"><img src="../bg.jpg" /></div>
<ul> 
<li><a href="#" > 1.tab</a></li>
<li><a href="#" > 2.tab</a></li>
<li><a href="#" > 3.tab</a></li>
<li><a href="#" > 4.tab</a></li>

</ul>
</body>
</html>















Bu blogdaki popüler yayınlar

MATLAB ve Görüntü İşleme

Jquery Lightbox ile Resim Büyütme

Renk Uzayları