)
jQuery, HTML elemanları seçmek ya da bulmak için aşağıdaki bilgileri kullanır:
- Elemanın ID'si
- Elemanın sınıfı (class)
- Elemanın tipi
- Elemanın vasıfları (attribute)
- Elemanın vasıf değerleri
- ve bunlara benzer diğer bilgiler
jQuery'de bütün seçiciler, bir dolar işaretiyle başlar ve parantezler içindeki ifade ile devam eder:
Kod:
$()Eleman seçimi
jQuery eleman seçicisi, elemanları adına göre seçer. Eğer kod içindeki bütün paragraf elemanlarını (<p>) seçmek istiyorsanız aşağıdaki ifadeyi kullanmalısınız:
Kod:
$("p")Kod:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});#id seçicisi
jQuery #id seçicisi, HTML tag'ının id özelliğini kullanarak belirlenen bir elemanı seçer. Sayfa içinde id unique (tek) olmalıdır:
Kod:
$("#test")Kod:
$(document).ready(function(){
$("button1").click(function(){
$("#t1").hide();});
});Sınıf seçicisi
jQuery sınıf seçicisi belirli bir sınıf elemanlarını sınıf adı ile bulur. Belirli bir sınıfın elemanlarını bulmak için, sınıf adından önce bir nokta sembolü yerleştirmek gerekir:
Kod:
$(".sali")Sınıf seçicisi: Kapsamlı örnek HTML5 programı
Kod:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".pers").hide();
});
});
</script>
</head>
<body>
<h2 class="pers">Butona tıklarsan ben yok olurum ☹</h2>
<p class="pers">Ben de yok olurum ☹</p>
<p>Ben kalırım ☺</p>
<button>Tıkla</button>
</body>
</html>
Tıkla düğmesine bastığınızda pers class'ına ait değerler yok olacaktır.
Diğer seçici İfadeler:
[b]Yazılış Biçimi[/b]
[b]Açıklama[/b]
$("*")
Bütün elemanları seçer
$(this)
O anda aktif olan HTML5 elemanını seçer
$("p.d1")
class="d1" olan bütün <p> elemanlarını seçer
$("p:first")
İlk <p> elemanını seçer
$("ul li:first")
İlk <ul> elemanının ilk <li> elemanını seçer
$("ul li:first-child")
Her <ul>elemanının ilk <li> elemanını seçer
$("[href]")
href vasfını içeren bütün elemanları seçer
$("a[target='_blank']")
Hedef vasıf değeri "_blank" olan bütün <a> elemanlarını seçer
$("a[target!='_blank']")
Hedef vasıf değeri "_blank" olmayan bütün <a> elemanlarını seçer."_blank"
$(":button")
<button> tipindeki bütün <button> ve <input> elemanlarını seçer
$("tr:even")
Bütün çift <tr> elemanlarını seçer
$("tr:odd")
Bütün tek <tr> elemanlarını seçer
Örnekler:
1. Tabloda çift satırları pembeye boyama
HTML5 Kodu
Kod:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","pink");
});
</script>
</head>
<body>
<h1>BALKAN ULKELERI</h1>
<table border="1">
<tr>
<th>ULKE</th>
<th>NUFUS</th>
</tr>
<tr>
<td>TURKIYE</td>
<td>78</td>
</tr>
<tr>
<td>YUNANISTAN</td>
<td>9</td>
</tr>
<tr>
<td>BULGARISTAN</td>
<td>8.5</td>
</tr>
<tr>
<td>ROMANYA</td>
<td>25</td>
</tr>
<tr>
<td>BOSNA-HERSEK</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Örnek: İlk <ul> elemanının ilk <li> elemanını seçme
Kod:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
</head>
<body>
<p>1.LISTE:</p>
<ul>
<li>ALMANYA</li>
<li>HOLLANDA</li>
<li>BELCIKA</li>
</ul>
<p>2.LISTE:</p>
<ul>
<li>INGILTERE</li>
<li>RUSYA</li>
<li>ISVEC</li>
</ul>
<button>TIKLA</button>
</body>
</html>
TIKLA düğmesine tıkladığınızda, ilk listedeki ilk liste elemanı (ALMANYA) görünmez olacaktır.
