jQuery Seçiciler
jQuery seçicileri, jQuery kitaplığının en önemli parçalarından biridir.
jQuery Seçiciler
jQuery seçicileri, HTML öğelerini seçmenize ve değiştirmenize olanak tanır.
jQuery seçicileri, adlarına, kimliklerine, sınıflarına, türlerine, özelliklerine, öznitelik değerlerine ve çok daha fazlasına dayalı olarak HTML öğelerini "bulmak" (veya seçmek) için kullanılır. Mevcut CSS Seçicilerini temel alır ve ayrıca bazı özel seçicileri vardır.
jQuery'deki tüm seçiciler dolar işareti ve parantez ile başlar: $().
eleman Seçici
jQuery öğe seçici, öğeleri öğe adına göre seçer.
<p>Bir sayfadaki tüm öğeleri aşağıdaki gibi seçebilirsiniz :
$("p")
Örnek
Bir kullanıcı bir düğmeye tıkladığında, tüm <p>öğeler gizlenecektir:
Örnek
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id Seçici
jQuery seçici, belirli öğeyi bulmak için bir HTML etiketinin id niteliğini kullanır.#id
Bir sayfa içinde bir kimlik benzersiz olmalıdır, bu nedenle tek, benzersiz bir öğe bulmak istediğinizde #id seçiciyi kullanmalısınız.
Belirli bir kimliğe sahip bir öğe bulmak için, bir karma karakter ve ardından HTML öğesinin kimliğini yazın:
$("#test")
Örnek
Bir kullanıcı bir düğmeye tıkladığında, id="test" olan öğe gizlenir:
Örnek
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class Seçici
jQuery .classseçici, belirli bir sınıfa sahip öğeleri bulur.
Belirli bir sınıfa sahip öğeleri bulmak için, bir nokta karakteri ve ardından sınıfın adını yazın:
$(".test")
Örnek
Bir kullanıcı bir düğmeye tıkladığında, class="test" olan öğeler gizlenir:
Örnek
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Daha Fazla jQuery Seçici Örneği
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | |
| $(this) | Selects the current HTML element | |
| $("p.intro") | Selects all <p> elements with class="intro" | |
| $("p:first") | Selects the first <p> element | |
| $("ul li:first") | Selects the first <li> element of the first <ul> | |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | |
| $("[href]") | Selects all elements with an href attribute | |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | |
| $("tr:even") | Selects all even <tr> elements | |
| $("tr:odd") | Selects all odd <tr> elements |
Farklı seçicileri göstermek için jQuery Selector Tester aracımızı kullanın .
Tüm jQuery seçicilerinin eksiksiz bir referansı için lütfen jQuery Selectors Reference sayfamıza gidin .
Ayrı Bir Dosyadaki İşlevler
Web siteniz çok sayıda sayfa içeriyorsa ve jQuery işlevlerinizin bakımının kolay olmasını istiyorsanız, jQuery işlevlerinizi ayrı bir .js dosyasına koyabilirsiniz.
Bu öğreticide jQuery'yi gösterdiğimizde, işlevler doğrudan <head>
bölüme eklenir. Ancak bazen bunları aşağıdaki gibi ayrı bir dosyaya yerleştirmek tercih edilir (.js dosyasına atıfta bulunmak için src niteliğini kullanın):
Örnek
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>