16 Eylül 2013 Pazartesi

23.09.2013

bugün ki ödevim 4 ve 5. maddeler.

4-) buton3 ün yukrısındaki inputbox a yazdığımız değerle h1 in yazı boyutu aynı olacak.
5-) h1 in üstüne geldiğimde verdiğim tüm sınıf özellikleri kalkacak.

buyrun kodlar==>
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
  $("#tb1").click(function ()     {         $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
  $("#tb2").click(function ()     {         $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
 $('#button1').click(function(){
$("#button1").css("color",$('select').val());
 $("#isim").css("color",$('select').val());
 });
 $('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});

 $('#button3').click(function(){
 var bla = $('#text1').val();
 alert(bla)

  $("h1").css('fontSize',bla);

 });
 
  $('#isim').hover(function()
 {
 
     location.reload();
    
 });});

</script>
<title>Untitled Document</title>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>

<select id="tb1">
  <option value="red">Kirmizi</option>
  <option value="blue">Mavi</option> 
  <option value="grey">Gri</option>
  <option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
 <button id="button1">Ilk buton</button> <br><br>
 <select id="tb2">
 <option selected="selected">SARI</option>
  <option selected="selected">KIRMIZI</option>
  <option selected="selected">YESIL</option>
  <option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br>
<p>yazi boyutu : <input id="text1" type="text" name="user"></p>
<button id="button3">buton3</button><br>
</body>
</html>

 

 
H1 İN ÜZERİNE GELDİK SIFIRLADIK==>
 

 
 
 


 
Gönderen zaman: Hiç yorum yok:
20.09.2013

bugün ki ödevim 2 ve 3. maddeler.

2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.

burun kodlar===> kırmızı ile yazılı kodlar 2 ve 3. buton için eklediğim kodlar.

<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
   $("#tb1").click(function ()     {         $("#button1").css("color",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
  $("#tb2").click(function ()     {         $("#button2").css("background",$(this).val());//"$(this).val()" menü degerini göstermemizi saglar...  
  });
 $('#button1').click(function(){
$("#button1").css("color",$('select').val());
 $("#isim").css("color",$('select').val());
 });
 $('#button2').click(function(){
$("#button2").css("background",$('select').val());
$("#isim").css("background",$('select').val());
});
 });
 </script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
<select id="tb1">
  <option value="red">Kirmizi</option>
  <option value="blue">Mavi</option> 
  <option value="grey">Gri</option>
  <option value="green">Yesil</option>
<option value="orange">Turuncu</option>
</select><br><br>
 <button id="button1">Ilk buton</button> <br><br>
 <select id="tb2">
 <option selected="selected">SARI</option>
  <option selected="selected">KIRMIZI</option>
  <option selected="selected">YESIL</option>
  <option selected="selected">TURUNCU</option>
</select>
<button id="button2">buton2</button><br></body>
 

 
Gönderen zaman: Hiç yorum yok:
19.09.2013

 
bugün ki konum yukarıdaki görselin hazırlanıp şu işlevleri gerçekleştirmesi=
 
1-) tıkla butonuna bastığımda butonun ve h1 kısmınının hem arkaplan rengi hemde yazı renkleri değişecek.
 
2-) ilk butonun üstünden seçtiğimiz renk ilk butonun ve h1 in yazı rengini değiştirecek.
 
3-)buton ikinin solundan seçtiğimiz renk buton2 nin ve h1 in arkaplan rengini değiştirecek.
 
4-) buton3 ün yukrısındaki inputbox a yazdığımız değerle h1 in yazı boyutu aynı olacak.
 
5-) h1 in üstüne geldiğimde verdiğim tüm sınıf özellikleri kalkacak.
 
 
ilk gün tıkla butonunun işlevini gerçekleştirdim.
 buyrun kodları==>
 
<script type="text/javascript">
$(document).ready(function(){
$('#tikla').click(function(){

   $( this ).css("color","white");
   $(this).css("background-color","green");
   $(this).css("font","35px");
    $( "#isim").css("color","black");
   $( "#isim").css("background-color","pink");
   $( "#isim").css("font","35px");
 });
 });
 </script>
</head>
<body>
<input id="tikla" type="button" value="tikla" /><br>
<h1 id="isim">Gülseher</h1>
</body>
 

tıklamadan önce

 
 

tıkladıktan sonra

 
 

Gönderen zaman: Hiç yorum yok:
18.09.2013
 
Stop
 
 
 
Seçilen hareket halindeki animasyonları durdurmak için kullanılır.
 
kodlar :
$(document).ready(function(){
   $("#start").click(function(){
    $("div").animate({height:300},3000);
    $("div").animate({width:300},3000);
  });
  $("#stop").click(function(){
    $("div").stop();
  });

});
</script>
</head>
<body>
<p>
<button id="start">ANIMASYONA BASLA</button>
<button id="stop">ANINDA DURDUR</button>
</p>
<div style="background:#98bf21;height:100px;width:100px">
</div>
</body>
 
 

Gönderen zaman: Hiç yorum yok:
17.09.2013

VAL
 
Kod kısmında değişkene atadığımız değeri çağırdığımızda geri getirir.
 
buyrun kodlarım ve görseli ====>
 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val("al sana deger ;)");===> inputuma verdiğim değer.  });
});
</script>
</head>
<body>
 <input type="text" name="user">
<button> Giris alaninin degerini göster </button>
</body>
 
tıklamadan önce
 
 tıkladıkdan sonra
 

Gönderen zaman: Hiç yorum yok:
16.09.2013

EACH( )
 
 
Bu yöntem  her eşleşen öğe için ayrı bir fonksiyonu belirtir.mesela bu örneğimde liste elemanları olarak 3 ayrı nesne belirlerim kahve,süt,soda diye butona bastığımda bu üç nesnenin isimlerini ayrı yarı bildirdi.

buyrun koladr ve görseli =====>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
 
});
</script>
</head>
<body>
<button>Tüm liste elemaninin adini SIRASIYLA göster </button>
<ul>
<li>Kahve</li>
<li>SÜT</li>
<li>Soda</li>
</ul>
</body>

 
 

 





Gönderen zaman: Hiç yorum yok:

11 Eylül 2013 Çarşamba

13.09.2013

SLİDEUP-SLİDEDOWN
 
 
SLİDEUP :  Bu yöntemle istediğimiz unsurları sayfamızda gizeleybiliriz.
 
SLİDEDOWN: Bu yöntemle ise gizlediğimiz unsurları geri getirebiliriz. Genelde slideup la birlikte kullanılır.
 

buyrun kodlar ve görseller =====>

<script>
$(document).ready(function(){

  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
 
});
</script>
</head>

<body>
<p>gülseher yildirim</p>
<button class="btn1">havali gizle (slide up)</button>
<button class="btn2">havali göster (slide down)</button>

slideup yani gizle butonuna tıklandığında :

 
 
 
 slidedown yani göster butonuna tıklandığında :



 




Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)