jQuery, 2006’da John Resig tarafından oluşturulan hızlı JavaScript kütüphanesidir. jQuery, Hızlı Web Geliştirme için HTML belgesinde olay işleme, animasyon ve AJAX işlemlerini gerçekleştirmek için basitleştirilmiş fonksiyonları barındırmaktadır.
Aşağıdaki örnekler Jquery programlama kavramını öğrenme, Jquery ile HTML DOM Manipülasyonu yapma, JSON dosyalarını AJAX ile okuma ve yazma işlemlerini kapsayacaktır.
Aşağıdaki Jquery örneklerini hazırlarken, tasarım için hazır olan bootstrap kullanılmıştır. Bootstrap tasarım için kullanıldığı için kodların çalışmasında her hangi bir sorun oluşturmayacaktır.
- H1 etiketi içine merhaba dünya yazdırın
- Butona tıklayınca ekrana mesaj verme
- Text kutusuna girilen değeri ekrana uyarı olarak verme
- Text kutusuna girilen değeri h2 etiketi içine yazma
- Sayfanın zemin rengini değiştirme
- Listedeki nesnelerin zemin renklerini değiştirin
- Birden fazla nesnenin class seçici ile zemin rengini değiştirme
- Class isimleri ile seçilen nesnelere tıkladığında nesnenin içindeki değeri ekrana yazdırma
- Div içindeki değerleri tıklayarak toplama
- Seçilen işarete göre tıklanan değerleri toplama/çıkarma
- Tıklanan nesnenin zemin rengini değiştirme
- Textarea nesnesine girilen karakterleri sayma
- Sayfanın zemin rengini rastgele değiştirme
- JSON dosyasını okuma (AJAX okuma)
- Jquery Örnekleri 2 (17 Örnek)
Site içindeki diğer Jquery Örnekleri
- Sayısal Loto Örneği
- Jquery Slider (Fotorama)
- Jquery UI Sürükle Bırak Liste
- Jquery Slider (CameraJS)
- Jquery UI Datepicker Kullanımı
- Jquery UI Dialog Kullanımı
- Jquery Mask Kullanma
- Basit Jquery Slider (Simple Slider)
- Jquery ile İsim Listeleme
- Jquery Checked Kullanma
- Jquery UI Tabs Kullanma
- Jquery Resim Kaydırma
- Jquery Modal İletişim Kutusu (ModalBox)
Jquery Örnekleri
Örnek 1: h1 etiketi içine merhaba dünya yazdırın
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- yazilimbilisim.net</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1 class="alert-info" id="zemin">mesaj</h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
/*
id değeri zemin olan nesnenin
içine merhaba dünya yaz
*/
$('#zemin').html('merhaba dünya');
});
</script>
</div>
</body>
</html>
Örnek 2: Butona tıklayınca ekrana mesaj verme
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- yazilimbilisim.net</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<button class="btn btn-primary" id="uyari">Uyarı Yap</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//id değeri uyarı olan nesneye tıklandığında
//ekrana merhaba dünya uyarısını verme
$("#uyari").on('click',function(){
window.alert("merhaba dünya");
});
});
</script>
</div>
</body>
</html>
Örnek 3: Text kutusuna girilen değeri ekrana uyarı olarak verme
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="mesaj">Mesaj:</label>
<input type="text" class="form-control" id="mesaj" placeholder="Mesajı Girin">
</div>
<div class="form-group">
<button class="btn btn-primary" id="uyari">Mesajı Yaz</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//id değeri uyarı olan nesneye tıklandığında
//ekrana merhaba dünya uyarısını verme
$("#uyari").on('click',function(){
//value değeri olan nesnelerin okumak için val() metodu kullanılır.
var mesaj=$("#mesaj").val();
window.alert(mesaj);
});
});
</script>
</body>
</html>
Örnek 4: Text kutusuna girilen değeri h2 etiketi içine yazma
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label for="mesaj">Mesaj:</label>
<input type="text" class="form-control" id="mesaj" placeholder="Mesajı Girin">
</div>
<div class="form-group">
<button class="btn btn-primary" id="uyari">Mesajı Yaz</button>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<h2 id="mesaj-yaz"></h2>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//id değeri uyarı olan nesneye tıklandığında
//ekrana merhaba dünya uyarısını verme
$("#uyari").on('click',function(){
//value değeri olan nesnelerin okumak için val() metodu kullanılır.
var mesaj=$("#mesaj").val();
//açılıp kapanan etiketlerin içine değer girmek için
//html metodu kullanılır.
$("#mesaj-yaz").html(mesaj);
});
});
</script>
</body>
</html>
Örnek 5: Sayfanın zemin rengini değiştirme
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
</div>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(document).ready(function() {
$('body').css({
'background':'#cdfadd'
});
});
</script>
</body>
</html>
Örnek 6: Listedeki nesnelerin zemin renklerini değiştirin
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<ul id="parca-listesi">
<li>Anakart</li>
<li>Harddisk</li>
<li>Ram</li>
<li>İşlemci</li>
<li>Ekran Kartı</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//css seçim yöntemi ile seçme işlemi yapılır.
$("#parca-listesi li").css({
'background':'#F04903',
'margin':'3px'
});
});
</script>
</body>
</html>
Örnek 7: Birden fazla nesnenin class seçici ile zemin rengini değiştirme
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="text-center">1</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="text-center">2</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="text-center">3</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="text-center">4</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="text-center">5</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="text-center">6</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//class seçici ile ekrandaki tüm .kutu h1 nesnelerini seçtip
// zemin rengini ve yazı rengini değiştirdik.
$(".kutu h1 ").css({
'background':'#F04903',
'color':'#fff',
'padding':'5px'
});
});
</script>
</body>
</html>
Örnek 8: Class isimleri ile seçilen nesnelere tıkladığında nesnenin içindeki değeri ekrana yazdırma
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">1</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">2</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">3</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">4</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">5</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">6</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 id="yaz"></h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
$(".kutu h1 ").on('click',function(){
// div içindeki değerleri okumak için html() metodu kullanılır.
//$(this) aktif olan nesneyi ifade eder.
//$(this) ile tıkladığımız nesneyi seçeriz.
var deger=$(this).html();
//deger değişkenindeki yazıyı #yaz nesnesinin içine yazarız.
$("#yaz").html(deger);
});
});
</script>
</body>
</html>
Örnek 9: Div içindeki değerleri tıklayarak toplama
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">10</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">20</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">30</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">40</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">50</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">60</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 id="yaz"></h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
$(".kutu h1 ").on('click',function(){
// div içindeki değerleri okumak için html() metodu kullanılır.
//$(this) aktif olan nesneyi ifade eder.
//$(this) ile tıkladığımız nesneyi seçeriz.
var sayi1=Number($(this).html());
var sayi2=Number($("#yaz").html());
//deger değişkenindeki yazıyı #yaz nesnesinin içine yazarız.
$("#yaz").html(sayi1+sayi2);
});
});
</script>
</body>
</html>
Örnek 10: Seçilen işarete göre tıklanan değerleri toplama/çıkarma
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">10</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">20</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">30</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">40</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">50</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">60</h1>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="radio" id="arti" checked name="isaret" value="">
Topla
</label>
</div>
<div class="checkbox">
<label>
<input type="radio" id="eksi" name="isaret" value="">
Çıkar
</label>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 id="yaz"></h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
$(".kutu h1 ").on('click',function(){
// div içindeki değerleri okumak için html() metodu kullanılır.
//$(this) aktif olan nesneyi ifade eder.
//$(this) ile tıkladığımız nesneyi seçeriz.
var sayi1=Number($(this).html());
var sayi2=Number($("#yaz").html());
/* if($("#arti:checked").length==1) alternatif*/
if($("#arti").prop('checked')==true)
$("#yaz").html(sayi1+sayi2);
else
$("#yaz").html(sayi2-sayi1);
});
});
</script>
</body>
</html>
Örnek 11: Tıklanan nesnenin zemin rengini değiştirme
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">10</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">20</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">30</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">40</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">50</h1>
</div>
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 class="alert-info text-center">60</h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
$(".kutu h1 ").on('click',function(){
//tıklanan nesneyi seçme
$(this).css({
'background':'#D33257',
'color':'#fff'
});
});
});
</script>
</body>
</html>
Örnek 12: Textarea nesnesine girilen karakterleri sayma
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-12 col-xs-12">
<div class="form-group">
<textarea id="mesaj" class="form-control" rows="3"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 id="yaz"></h1>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(function(){
//on fonksiyonu ile belirtilen tüm nesnelere olayı dahil edilir..
$("#mesaj").on('keyup',function(){
$("#yaz").html($(this).val().length);
});
});
</script>
</body>
</html>
Örnek 14: Sayfanın zemin rengini rastgele değiştirme
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
</div>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(document).ready(function() {
setInterval(renkDegistir, 1000);
});
function renkDegistir(){
var renk='rgb('+sayiUret(255)+','+sayiUret(255)+','+sayiUret(255)+')';
$('body').css({
'background':renk
});
}
function sayiUret(maks){
return Math.floor(Math.random()*maks);
}
</script>
</body>
</html>
Örnek 14: JSON dosyasını okuma
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Örnekleri- Yazılım Bilişim</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h1>Jquery Örnekleri</h1>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<button id="tikla" class="btn btn-info">Tıkla</button>
</div>
</div>
<div class="row">
<div class="kutu col-md-3 col-sm-4 col-xs-4">
<h1 id="yaz"></h1>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
//belge yüklendikten sonra çalıştırılacağını söyler
$(document).ready(function() {
$("#tikla").click(function(event){
//doğrudan bir nesne metin olarak yükleme
//genellikle html sayfaları yüklemek için kullanılır
// $('#yaz').load('http://ip.jsontest.com/');
//JSON formatında okuma için kullanılır.
//{ip: "78.xxx.xxx.xxx"} gelen verinin yapısı
$.get('http://ip.jsontest.com/',function(gelen){
$('#yaz').html(gelen.ip);
});
});
});
</script>
</body>
</html>
