.addClass():Seçilen nesneye daha önceden tanımlı bir class atar.
.removeClass():Seçtiğimiz nesne içindeki belirlediğimiz class'ı siler.
.css(): Seçtiğimiz nesnenin css özelliklerini değiştirmemize yarar. örn: $('a').css('text-decoration','none');
.remove(): Seçilen nesneyi sayfadan tamamen kaldırır.
.append(): Belirtilen bir nesne üzerinin sonuna html tagı veya metin eklemeye yarar.
.prepend(): Belirtilen bir nesne üzerinin başına html tagı veya metin eklemeye yarar.
.val(): Seçtiğimiz nesnenin değerini verir.
.hasClass(): Seçtiğimiz nesnenin içinde belirlediğimiz class'ın olup olmadığına bakar. Sonuç True yada False olarak döner.
09Eylül.html
<html>
<head>
<title>Menu yapma</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body background="foto.jpg">
<button id="remove" value="1">Remove</button>
<button id="append" value="2">Append</button>
<button id="prepend" value="3">Prepend</button>
<button id="attr" value="4">Attr</button>
<button id="html" value="5">Html</button>
<div id="div1" class="div1"><h3>Sayfam</h3></div>
<div id="div2" >Hakkinda</div>
<div id="div3" >Resimler</div>
<div id="div4">CLASS</div>
<select id="select">
<option value="kutu">Kutu</option>
<option value="kare">Kare</option>
<option value="secim1">Secim1</option>
<option value="secim2">Secim2</option>
</select>
<script>
$('#remove').click(function(){
$('#div2').remove();
});
$('#append').click(function(){
$('div.div1 h3').append('<b> a Burdan Ulasabilirsiniz... </b>');
});
$('button').click(function(){
alert($(this).val());
});
$('div').css({'width':'100px','height':'100px','background-color':'pink','float':'left','text-align':'center','margin':'3px'});
$('#attr').click(function(){
$('#div1').attr('style','background:yellow');
});
$('#html').click(function(){
var htmltg=$(this).html();
alert(htmltg);
});
$("#div4").click(function(){ //Div'e tıkladığımız zaman,
if($("div").hasClass($("#select").val())) // .hasClass() ile div içerisinde seçtiğimiz class'ın olup olmadığını kontrol ettirdik.
{
$("div").removeClass($("#select").val()); // .removeClass() ile div içerisinde seçtiğimiz class varsa kaldırmasını sağladık.
alert("Sectiginiz Class var, kaldirildi.");
$('#div4').attr('style','background:yellow');
}
else
{
$("div").addClass($("#select").val()); // .addClass() ile div içerisinde seçtiğimiz class yoksa eklemesini sağladık.
alert("Sectiginiz Class yok, eklendi.");
$('#div4').attr('style','background:red');
}
});
$('#prepend').click.(function(){
$('div.div1 h3').prepend('<b>Ana</b>');
});
</script>
</body>
</html>
İlk ekran açıldığında ekran görüntüsü aşağıda verilmiştir.
Remove buttonuna tıklandığında hakkında bölümü sayfadan tamamen kaldırıldı.Görüntü aşağıda verilmiştir.
Append buttonuna tıklandığında "Sayfam"ın yanına "a buradan ulaşabilirsiniz" yazısı eklendi ve her buttona tıklandığında .val() ile değeri veriliyor.Görüntü aşağıda verilmiştir.
Attr buttonuna tıklandığında div1'in style 'ını değiştirilebilir.Görüntü aşağıda verilmiştir.
Html button'una tıklandığına Html kodunu veriyor.Görüntü aşağıda verilmiştir.
ComboBox tan herhangi birini seçerek Class'ın içinde olup olmadığına bakarak eğer varsa kaldırıyor.Yoksa ekliyor.Eklenince rengi kırmızı oluyor.Kaldırılınca rengi sayı oluyor.Görüntü aşağıda verilmiştir.
Hiç yorum yok:
Yorum Gönder