<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Basic jQuery</title>
<!--<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>-->
<script src="05_lib/jquery-3.7.0.min.js"></script>
<script src="05_BasicJquery.js"></script>
<script>
// 1. yöntem:
//$(function () {
// alert("Basic jQuery HTML Document loaded.");
// console.log("Basic jQuery HTML Document loaded.");
//});
// 2. yöntem:
$(document).ready(function () {
//alert("Basic jQuery HTML Document loaded.");
console.log("Basic jQuery HTML Document loaded.");
});
</script>
<style>
table {
width: 90%;
margin: 0 auto;
border-style: solid;
border-width: 1px;
}
table tr td h4, strong, b, label, button, p {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.myTd {
width: 7%;
text-align: left;
}
.myInput, .mySelect {
width: 90%;
font-family: Georgia, 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="6">
<h4>My Header</h4><!-- jQuery üzerinden başlık değiştirilecek ve horizontal rule eklenecek -->
</td>
</tr>
<tr>
<td class="myTd">
<strong>Şarkı:</strong>
</td>
<td>
<input type="text" placeholder="Şarkı giriniz..." id="tbSarki" class="myInput" />
</td>
<td class="myTd">
<b>Sanatçı:</b>
</td>
<td>
<select class="ddlSanatci mySelect">
<option value="">-- Seçiniz ---</option>
<option value="tarkan">Tarkan</option>
<option value="sezen">Sezen Aksu</option>
<option value="michael">Michael Jackson</option>
<option value="queen">Queen</option>
</select>
</td>
<td class="myTd">
<b>Türler:</b>
</td>
<td>
<select id="lbTurler" class="mySelect" multiple>
<option value="p">Pop</option>
<option value="r">Rock</option>
<option value="k">Klasik</option>
<option value="t">Techno</option>
</select>
</td>
</tr>
<tr>
<td>
<b><i>Yerli Mi?</i></b>
</td>
<td>
<input type="checkbox" class="cbYerliMi" checked /><!-- jQuery üzerinden işaret kaldırılacak -->
</td>
<td>
<b>Dönem:</b>
</td>
<td>
<input type="radio" name="rblDonem" id="rb<80" value="<80" /> <label>80 Öncesi</label>
<input type="radio" name="rblDonem" id="rb80" value="80" /> <label>80'ler</label><!-- jQuery üzerinden işaretlenecek -->
<input type="radio" name="rblDonem" id="rb90" value="90" /> <label>90'lar</label>
<input type="radio" name="rblDonem" id="rb>90" value=">90" /> <label>90 Sonrası</label>
</td>
<td>
<b>Açıklama:</b>
</td>
<td>
<textarea rows="3" id="tbAciklama" class="myInput"></textarea><!-- jQuery üzerinden placeholder yazdırılacak -->
</td>
</tr>
<tr>
<td>
</td>
<td colspan="5">
<button id="bYazdir">Girilen Şarkı Bilgilerini Yazdır</button>
<button id="bTemizle">Girilen Şarkı Bilgilerini Temizle</button>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="5">
<hr />
<p id="pSarkiBilgileri"></p><!-- jQuery üzerinden girilen şarkı bilgileri yazdırılacak veya temizlenecek, ve rengi kırmızı yapılacak -->
</td>
</tr>
</table>
<hr />
<a href="05_jQueryVsJavascript.html" target="_blank">jQuery vs. Javascript (Palindrom)</a>
</body>
</html>