0
yorum
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>
