-------------------------
Sayfa içinde ki html elemanlarının özelliklerini öğrenmek ve değiştirmek için kullanılır. Aşağı da kolay bir örnek yapalım id si "ebru " olan divimizin title değerini "degisken" adın da değişkene atalım ve ekrana alert ile getirelim.
KOD =
------------
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="ebru" title="erdem"></div>
<script>
var degisken=$('#ebru').attr('title');
alert(degisken);
</script>
</body>
</html>
ÇIKTI =
-----------------
KOD =
-----------
arka plan rengi kırmızı iken çıktı:
-----------------
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<li id="ebru" title="erdem" style="background-color:red">Teknoloji</li>
<script>
$("#ebru").attr('style','background:yellow');
</script>
</body>
</html>
Şimdi yeni çıktıya bakalım :
KOD: (????)
--------------
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<li id="ebru" alt ="b" title="erdem" value="5" style="background-color:red">Teknoloji</li></script>
<script>
$('#ebru').attr('value','8'); // value değeri değişti ve 8 oldu.
</script>
</body>
</html>
KOD: (???)
----------------
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<li id="ebru" alt ="b" title="erdem" value="5" style="background-color:red">Teknoloji</li></script>
<script>
$('#ebru').attr("value","8"); // value rdeğei değişti ve 8 oldu.
if($('ebru').attr("value")=="8")
$('ebru').attr("style","background:black");
</script>
</body>
</html>
Şimdi de link atayalım =
KOD =
-----------
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<script>
$(function(){
$("a").attr("href","http://ebruerdem2525.blogspot.com");
});
</script>
<a href="#">ebruerdem blogspot a gidecek</a>
</body>
</html>
ÇIKTI =
---------------
KOD:
-----------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script >
$(document).ready(function(){
$("#resim").attr(
{
src:"indir.jpg",
width:"200",
height:"150"
});
});
</script>
</head>
<body>
<img id="resim" />
</body>
</html>
ÇIKTI=
--------------
--------------------------------
Addclass bir sınıfa ait css kurallarını belge için de istenilen elemente atamak için kullanılır.
KOD:
------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
p { margin: 18px; font-size:26px; }
.x { color:red; }
.y { background:yellow; }
</style>
</head>
<body>
<p>Merhaba</p>
<p>Ebru</p>
<p>Erdem</p>
<script>
$("p:last").addClass("y"); //Burada son paragrafa stil verdik ve bu sitil "y " sınıfına ait olandı.Yani sınıfın //sitilini ekledik.
</script>
</body>
</html>
ÇIKTI=
--------------------
Şimdi de bir buton ekleyelim ve butona tıklayınca ilk paragrafımda ki yazının rengi kırmızı olsun.Önce butona tıklanmadan önceki çıktı aşağıda ki gibidir :
KOD=
---------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
p { margin: 18px; font-size:26px; }
.x { color:red; }
.y { background:yellow; }
</style>
</head>
<body>
<button>TIKLA</button>
<p>Merhaba</p>
<p>Ebru</p>
<p>Erdem</p>
<script>
$("button").click(function(){
$("p:first").addClass("x");
});
</script>
</body>
</html>
Butona tıkladıktan sonra oluşan çıktı :
Peki aklımıza şu soru gelebilir aynı anda birden fazla sınıf eklenebilir mi ? cevabımız evet hadi birlikte görelim :
Önce butona tıklanmadan önce ki çıktı :
KOD:
-------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
p { margin: 18px; font-size:26px; }
.x { color:red; }
.y { background:yellow; }
.z{font-size:56px;}
</style>
</head>
<body>
<button>TIKLA</button>
<p>Merhaba</p>
<p>Ebru</p>
<p>Erdem</p>
<script>
$("button").click(function(){
$("p:first").addClass("x y z"); // x,y,z arasına virgül koysaydıkta olurdu.
});
</script>
</body>
</html>
Butona tıklandıktan sonra ki çıktı :
JQUERY DE REMOVECLASS ()=
------------------------------------------
Element yada elementlerin sahip olduğu css kurallarını kaldırır.Butona tıklanmadan önceki çıktıyı görelim :
KOD:
------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p { margin: 18px; font-size:26px; }
.x { color:red;font-size:56px; }
.y { background:yellow; }
</style>
</head>
<body>
<button>TIKLA</button>
<p >Saçma sorular sormayınız.</p>
<p class="x">Bu bir şaka mı?</p>
<p class="x">Hayır Değil...</p>
<script>
$("button").click(function(){
$("p").removeClass("x");
});
</script>
</body>
</html>
Butona tıklandıktan sonraki çıktı :
JQUERY DE CSS ()=
-------------------------
"css " ile bir elemente ait özelliği alıp değiştirebiliriz.Butona tıklamadan önce ki çıktı :
KOD:
-----------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p { margin: 18px; font-size:26px; }
.x { color:red;font-size:56px; }
</style>
</head>
<body>
<button>TIKLA</button>
<p class="x">Bu bir şaka mı?</p>
<p class="x">Hayır Değil...</p>
<script>
$("button").click(function(){
$("p").css({'float':'right','backgroundColor':'pink','color':'blue'});
});
</script>
</body>
</html>
Butona tıklandıktan sonra ki çıktı :
----------------------------
Belirtilen nesneleri kaldırmak için kullanılır.Butona tıklanmadan önce:
KOD:
----------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p { margin: 18px; font-size:26px; }
.x { color:red;font-size:56px; }
</style>
</head>
<body>
<button>TIKLA</button>
<p class="x">Bu bir şaka mı?</p>
<p class="x">Hayır Değil...</p>
<script>
$("button").click(function(){
$("p").remove(); //Paragrafların hepsini sildi.
});
</script>
</body>
</html>
Butona tıklandıktan sonra :
JQUERY DE APPEND ( )
---------------------------
Belirtilen nesne üzerine ekleme yapar.Butona tıklanmadan önceki çıktı :
KOD=
----------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p { margin: 18px; font-size:26px; }
.x { color:red;font-size:56px; }
}
</style>
</head>
<body>
<button>TIKLA</button>
<div class="a">
<h2>Ebru Erdem</h2></div>
<script>
$("button").click(function(){
$('div.a h2').append('Eren Erdem');
$('div.a').append('<img src="d.jpg">');
});
</script>
</body>
</html>
ÇIKTI
----------------
---------------------------
Seçilen nesneyi diğer nesnenin başına ekler.Butona tıklanmadan önce çıktı :
KOD =
----------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p { margin: 18px; font-size:26px; }
.x { color:red;font-size:56px; }
}
</style>
</head>
<body>
<button>TIKLA</button>
<div class="a">
<h2>Ebru Erdem</h2></div>
<script>
$("button").click(function(){
$('div.a h2').prepend('Eren Erdem');
$('div.a').prepend('<img src="d.jpg">');
});
</script>
</body>
</html>
ÇIKTI
---------
------------------------
Seçtiğimiz nesnenin html içeriğine ulaşmamızı ve değiştirmemizi sağlar.Butona tıklanmadan önce;
kod=
-------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
p { margin: 18px; font-size:26px; }
.x { color:red;font-size:56px; }
}
</style>
</head>
<body>
<button>TIKLA</button>
<div class="a">
<h2>Ebru Erdem</h2></div>
<script>
$("button").click(function(){
$('h2').html('Burcu Erdem');
});
</script>
</body>
</html>
ÇIKTI=
----------
JQUERY VAL
-------------------
Seçilen nesnenin içinde value değeri varsa bunu alıp değiştirmemizi sağlıyor.
KOD (????)
---------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
</style>
</head>
<body>
<button>TIKLA</button>
<div class="a" value="burcu">
<script>
$("button").click(function(){
var deger=$('.a').val('merhaba');
alert(deger);
});
</script>
</body>
</html>
ÇIKTI
-------------------
JQUERY HASCLASS
------------------------
Belirtilen nesnenin üzerin de sınıf var mı yok mu kontrol eder.
KOD
---------------------
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
$(document).ready(function(){
$("div").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("Seçtiğiniz Class var, kaldırıldı.");
}else{
$("div").addClass($("#select").val()); // .addClass() ile div içerisinde seçtiğimiz class yoksa eklemesini sağladık.
alert("Seçtiğiniz Class yok, eklendi.");
}
});
});
</script>
<style>
</style>
</head>
<body>
<div "> KONTROL<div class="kutu"></div>
<div class="secim1"></div>
<div class="secim2"></div>
</div>
<select id="select">
<option value="eren">Eren</option>
<option value="secim1">Seçim1</option>
<option value="secim2">Seçim2</option>
</select>
</body>
</html>
ÇIKTI
-----------------
Hiç yorum yok:
Yorum Gönder