Merhaba bu eğitim makalemizde jQury seçicilerini kapsamlı bir şekilde ele aldık. jQuery seçicilerini iyi bir şekilde bilmeniz jQuery ile kodlamanın % 70 ini oluşrturur. Gerisi JavaScript bilgisidir.
jQuery, HTML elementlerini seçmek ve manipüle etmek için güçlü ve esnek bir seçici sistemine sahiptir. Bu makalede, jQuery'nin tüm seçicilerini örnek kodlarla birlikte ele alacağız. jQuery seçicilerini kullanarak nasıl etkili ve verimli bir şekilde HTML elemanlarını seçebileceğinizi öğreneceksiniz.
$(document).ready(function() {
// Temel Seçiciler
// Eleman Seçicisi: Tüm <p> elemanlarını seçer
$("p").css("color", "blue");
// Kimlik Seçicisi: ID'si "unique" olan elemanı seçer
$("#unique").css("color", "red");
// Sınıf Seçicisi: Sınıfı "highlight" olan elemanları seçer
$(".highlight").css("background-color", "yellow");
// Hiyerarşi Seçicileri
// Ebeveyn > Çocuk Seçicisi: <div> ebeveyninin doğrudan <p> çocuklarını seçer
$("div > p").css("border", "1px solid black");
// Ebeveyn Çocukları Seçicisi: <div> ebeveyninin tüm <p> çocuklarını seçer
$("div p").css("font-weight", "bold");
// Genel Kardeş Seçicisi: <h2> elemanından sonraki tüm <p> kardeşlerini seçer
$("h2 ~ p").css("margin-left", "20px");
// Ardışık Kardeş Seçicisi: <h2> elemanından sonraki ilk <p> kardeşini seçer
$("h2 + p").css("font-style", "italic");
// Evrensel Seçici
// Tüm elemanları seçer
$("*").css("box-shadow", "0 0 5px #ccc");
// Özellik Seçicileri
// Belirli bir özelliğe sahip olan elemanları seçer
$("input[name='email']").css("border", "2px solid green");
// Bir özelliğin belirli bir değerine sahip olan elemanları seçer
$("input[type='text']").css("background-color", "#e0f7fa");
// Bir özelliği içeren elemanları seçer
$("a[href*='example']").css("color", "purple");
// Başlangıç Değeri ile Özellik Seçicisi: href değeri 'https' ile başlayan elemanları seçer
$("a[href^='https']").css("font-weight", "bold");
// Bitiş Değeri ile Özellik Seçicisi: href değeri '.com' ile biten elemanları seçer
$("a[href$='.com']").css("text-decoration", "underline");
// Filtreleme Seçicileri
// İlk elemanı seçer
$("li:first").css("color", "blue");
// Son elemanı seçer
$("li:last").css("color", "red");
// Tekli elemanları seçer
$("li:odd").css("background-color", "#f2f2f2");
// Çiftli elemanları seçer
$("li:even").css("background-color", "#e6e6e6");
// N'inci elemanı seçer
$("li:eq(2)").css("font-size", "20px");
// İçinde belirli bir metni içeren elemanları seçer
$("p:contains('jQuery')").css("font-weight", "bold");
// Boş elemanları seçer
$("div:empty").css("border", "1px dashed #000");
// Çocuk elemanları olanları seçer
$("div:has(p)").css("padding", "10px");
// Görünür elemanları seçer
$("div:visible").css("border", "2px solid blue");
// Gizli elemanları seçer
$("div:hidden").show();
// Form Seçicileri
// İlk form elemanını seçer
$("input:first").css("border", "1px solid red");
// Son form elemanını seçer
$("input:last").css("border", "1px solid green");
// Form elemanlarını seçer
$(":input").css("background-color", "#f9f9f9");
// Metin kutularını seçer
$(":text").css("background-color", "#fff");
// Boş olmayan metin kutularını seçer
$(":text[value!='']").css("background-color", "#e0e0e0");
// Boş metin kutularını seçer
$(":text[value='']").css("background-color", "#f9e0e0");
// Radyoları seçer
$(":radio").css("margin", "5px");
// Checkbox'ları seçer
$(":checkbox").css("margin", "5px");
// Seçili elemanları seçer
$(":selected").css("background-color", "#cce0ff");
// Doldurulmuş elemanları seçer
$(":filled").css("background-color", "#e0ffe0");
// Odaklanmış elemanları seçer
$(":focus").css("outline", "2px solid blue");
});
Yukarıda oluşturdupumuz jQuery Seçicileri kod bloğu, jQuery'nin çeşitli seçicilerini kapsamlı bir şekilde kullanarak HTML elemanlarını seçip manipüle etmenize yardımcı olacaktır. Bu seçiciler, web geliştirme süreçlerinizi daha verimli hale getirerek kodunuzu daha okunabilir ve sürdürülebilir kılacaktır.
jQuery Seçicileri hakkında kafanız takılan veya mereak ettiğiniz bir konu olursa benimle iletişime geçebilirsiniz.