Scribd
Upload
18 views6 pages

jquery örnekler

Uploaded by

GÜLSÜM KAMER
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views6 pages

jquery örnekler

Uploaded by

GÜLSÜM KAMER
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> jQuery Dersleri Fade Efekti</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>

<script type="text/javascript">

$("document").ready(function(){

$(".baslik").click(function(){

$(".kutu").slideToggle("slow");

});

});

</script>

<style type="text/css">

div.kutu {

height:120px;

display:none;

div.kutu, p.baslik{

margin:0px;

padding:0px;

text-align:center;

background:lightyellow;

border:1px solid black;

</style>
</head>

<body>

<div class="kutu">

<a href=""> jQuery Dersleri Slide Efekti</a><br/>

Slide için üç efekt türü var slideDown, slideUp, slideToggle<p>

Başlığa tıklayınca açılıp kapanan nesneler oluşturmamızı sağlıyor...</p>

</div>

<p class="baslik">Sayfa içeriğini görmek için tıklayın... Aç / Kapa</p>

</body>

</html>

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> jQuery Dersleri Fade Efekti</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>

<script type="text/javascript">

$("document").ready(function(){

$(".gizle").click(function(){

$(".gizle").fadeOut("slow");

});

$(".goster").click(function(){

$(".gizle").fadeIn("slow");

});

$(".seffaf").click(function(){

$(".seffaf").fadeTo("slow",0.3);

});

});

</script>

</head>

<body>

<p class="gizle">Bana Tıklarsan Kaybolorum ... </p>


<p class="seffaf">Bana Tıklarsan Şeffaf olurum ... </p>

<p class="goster">Bana Tıklarsan Kaybolanları Getiririm ...</p>

</body>

</html>

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> jQuery Dersleri dblclick olayı</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"> </script>

<script type="text/javascript">

$("document").ready(function(){

$("div").mouseover(function(){

$(this).css({background:"red"});

});

$("div").mouseleave(function(){

$(this).css({background:"yellow"});

});

});

</script>

<style type="text/css">

div {

background:yellow;

width: 60px;

height:60px;

float:left;

margin:10px;

cursor:pointer;

</style>

</head>
<body>

<p>Fareyi Kutuların Üstüne Getir... :)</p>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Jquery Örnekleri - </title>

<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>

<script>

$(document).ready(function() {

$("#chk").on("change", function() {

if ($(this).prop("checked") == true) {

$("#resim").slideDown(2000);

} else {

$("#resim").slideUp(2000);

});

});

</script>

</head>

<body>
<input type="checkbox" id="chk" checked>

<img src="1.jpg" id="resim">

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Jquery Örnekleri - </title>

<script src="https://code.jquery.com/jquery-3.3.1.js"> </script>

<script>

$(document).ready(function() {

$(".kutu").click(function() {

var secilenrenk = $("#renk").val();

$(this).css("backgroundColor", secilenrenk);

});

});

</script>

<style>

.kutu {

width: 200px;

height: 200px;

float: left;

border: #000 solid 2px;

margin: 3px;

</style>

</head>
<body>

<input type="color" id="renk"><br>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

<div class="kutu"></div>

</body>

</html>

You might also like