Scribd
Upload
3 views

jquery örnekler

Uploaded by

GÜLSÜM KAMER
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

jquery örnekler

Uploaded by

GÜLSÜM KAMER
Copyright
© © All Rights Reserved
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