CLİCK( ) VE HOVER( )
Dün ki ödevim javascript ve jquery araştırmasıydı.Bugünde jquery nin tagı olan click( ) ve hover( ) olayını inceleyeceğim.Bunun için ilk önce jquery de çalışma yapmak için jquery i kurmam lazım ve bunu dünki araştırmamla çok kolay yaptım.
CLİCK( ) :Click tıklama manasına gelir.Jquery de click olayı bir tıklama meydana geldiğinde verdiğimiz görevi yerine getirir.Mesela ben bu örneğimde yazının üzerine tıklandığında "parağrafa tıklandı" mesajını vermesini istiyorum.
jquery kurduktan sonra şu kodları yazdı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=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>// jquery nin çalışması için gerekli kod bölümü<script type="text/javascript">
$(document).ready (function(){
$("p").click(function(){
alert("paragrafa tiklandi");
});
});
</script>
<title> Click </title>
</head>
<body>
<font color="red" size="24"><p><u>:) TIKLA VE MESAJI GÖR :)</u></p></font>
</body>
</html>
resimlerle inceleyelim ==>
HOVER ( ) : Fare işaretcisini nesnelerin üzerine getirdiğimizde yapmasını istediğimiz işlemleri bu kodla gerçekleştirebilirim...
işte kodlarımmmm
$(document).ready(function(){
$(".kutu1").hover(function () {
$(".yazi").show(); },
function(){$(".yazi").hide()}
);
});
</script>
<style >
.kutu1 { width:250px; height:100px; background:#CCCC00 ; color:#0033FF;font-size:36px;}
.yazi { font-size:36px; color:pink;}
</style>
<title>HOVER</title>
</head>
<body>
<div class="kutu1">KUTUNUN ÜZERINE GEL</div>
<div class="yazi"><p>HOVER ÖZELLIGINI GÖR;)</p></div>
</body>
ve şimdi de resimlerle bakalım.
ilk hali =====>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>// jquery nin çalışması için gerekli kod bölümü<script type="text/javascript">
$(document).ready (function(){
$("p").click(function(){
alert("paragrafa tiklandi");
});
});
</script>
<title> Click </title>
</head>
<body>
<font color="red" size="24"><p><u>:) TIKLA VE MESAJI GÖR :)</u></p></font>
</body>
</html>
resimlerle inceleyelim ==>
HOVER ( ) : Fare işaretcisini nesnelerin üzerine getirdiğimizde yapmasını istediğimiz işlemleri bu kodla gerçekleştirebilirim...
işte kodlarımmmm
$(document).ready(function(){
$(".kutu1").hover(function () {
$(".yazi").show(); },
function(){$(".yazi").hide()}
);
});
</script>
<style >
.kutu1 { width:250px; height:100px; background:#CCCC00 ; color:#0033FF;font-size:36px;}
.yazi { font-size:36px; color:pink;}
</style>
<title>HOVER</title>
</head>
<body>
<div class="kutu1">KUTUNUN ÜZERINE GEL</div>
<div class="yazi"><p>HOVER ÖZELLIGINI GÖR;)</p></div>
</body>
ve şimdi de resimlerle bakalım.
ilk hali =====>
sonraki hali===>
Hiç yorum yok:
Yorum Gönder