Translate

20 Haziran 2012 Çarşamba

Jquery dersleri bölüm 1



jquery günümüz webyazılımcıları için çok önemli hale gelmeye başladı bizlerde bundan geri kalmamak için elimizden geldiğince takip etmeye çalışıyoruz ilk olarak jquery nasıl kullanılır onu öğrencez
ilk olarak jquery sayfasından  http://docs.jquery.com/Downloading_jQuery son sürümünü indiriyoruz
daha sonra bir html sayfası oluşturup içine




<!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>Başlık</title>

<script src="jquery.min.js" type="text/javascript"></script>

</head>
<body>

</body>
</html>


Şeklinde html şablonumuzu oluşturuyoruz   ve jquery yolumuzu koyu yazıldığı şekilde belirtiyoruz
jquery "<script type="text/javascript "></script>" taglari arasında yazılır
ve tek tip   "var" dır  kolar herzaman "$" ile yazılmaya başlar '$(function())' ,'$('a')' gibi
cümle bitiminde ";" konulmalıdır


<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#div').slideUp(4000);
});
});

</script>


yukardaki kod kısmında  bir fonksiyon oluşturduk ve box adındaki div i 4000 mili saniye (4 saniye) bekledikten slideup  ile sonra yukarı doğru kaybolsun dedik  css mantıgı burdada devam ediyor id ler "#" ile classlar "." id ya da class oldugunu belirtmezsek tüm div ya da ne için yazıldıysan hepsini kapsayacak şekilde olacaktır. daha iyi anlamanız için küçük bir örnekte gösterelim


html


<!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>Untitled Document</title>

<script src="jquery.min.js" type="text/javascript">
</script>



<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').slideUp(4000);
});
});

</script>

</head>

<body>
<div id="kutu"></div>
<a href="#">Tıkla!</a>
</body>
</html>


css 
    <style type="text/css">
#kutu {
background-color: red;
width: 300px;
height: 300px;
}
</style>


0 yorum:

Yorum Gönder

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger | Printable Coupons