JQuery HTML Eleman Seçicileri

Web sayfalarında Client tabanlı programlamayı JQuery ile gerçekleştiriyorsak eğer HTML Componentlerine ulaşabilmemiz gerekmektedir.Lakin ben buna ulaşma yerine seçme terimini daha uygun buluyorum.JQuery ile seçtiğimiz HTML nesnesi üzerinde istediğimiz işlemleri asenkron bir yapıda gerçekleştirebiliyoruz.

JQuery ile HTML sayfa elemanlarını seçebilmek için birbirinden bağımsız beş yöntem bulunmaktadır.Şimdi sırasıyla bu yöntemleri inceleyelim.
# Seçicisi
Sayfa elemanlarını “ID” ya da “Name” özellikleri ile seçmemizi sağlar.
Örnek olarak aşağıdaki kod bloğunu inceleyiniz.

<!DOCTYPE html>
<html>
<head>
    <title></title>
//JQuery kütüphanesini sayfamıza entegre ediyoruz.
    <script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(
            function ()
            {
                $("#Ornek").html("Bu bir örnek uygulamadır.");
                $("#Ornek2").val("Gençay Yıldız");
            }
            );
    </script>

</head>
<body>
    <div id="Ornek"></div>
    <input type="text" id="Ornek2" />
</body>
</html>

Yukarıdaki kod bloğunu izah etmem gerekirse eğer,
“$(document).ready();” metoduyla, kodumuzun sayfa yüklenirken çalışacağını belirtiyoruz.
Read metodunun içine “function (){}” fonksiyonunu oluşturuyoruz ve içine “$(“#Ornek”)” komutuyla seçilecek olan HTML nesnesinin idsini veriyoruz.
Dikkat ederseniz # işaretiyle bu işlemi gerçekleştiriyoruz.
.Class Seçicisi
Sayfa elemanlarını class özelliği ile seçmemize yarar.
Örnek olarak aşağıdaki kod bloğunu inceleyiniz.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $(".dis").css("background-color", "yellow");
                $(".ic").css("color", "blue");
            }
            );
    </script>
</head>
<body>
    <div class="dis" style="text-align:center;">
        <div class="ic">Fenerbahçe</div>
    </div>
</body>
</html>

Yukarıdaki kod bloğunu incelersek eğer, class isimleri “dis” ve “ic” olan Div’lere, sayfa yüklenirken JQuery tarafından seçilip, CSS değişikliği gerçekleştiriliyor.
[] Öz Nitelik(Attribute) Seçicisi
Sayfa elemanlarındaki Attribute’lar aracılığıyla seçim yapar.Lakin dört farklı seçim prosedürü mevcuttur.
Bu dört farklı seçim prosedürünü aşağıdaki html nesneleri üzerinde örneklendirerek inceleyelim.

    <div hidden="bu birinci attribute">Örnek 1</div>
    <div hidden="bu ikinci attribute">Örnek 2</div>
    <div hidden="bu üçüncü attributem">Örnek 3</div>
    <div hidden="bu dördüncü attribute">Örnek 4</div>

1. Prosedür

        $(document).ready(
            function () {
                $("div[hidden='bu birinci attribute']").css("color", "red");
            }
            );

Bu prosedürde direkt “=” operatörüyle işlem yapıyoruz.”hidden” isimli Attribute içindeki değer tırnaklar içindeki değerle eşit ise css değişikliği gerçekleştiriyor.Haliyle içinde “Örnek 1” yazan div nesnemiz etkilenecektir.

2. Prosedür

        $(document).ready(
            function () {
                $("div[hidden^='bu']").css("color", "blue");
            }
            );

Bir diğer prosedürümüz “^=” operatörüyle gerçekleştirilmektedir.Mantıksal olarak verilen Attribute’un değeri tırnak içine verilen değer ile başlıyorsa, o nesne üzerinde işlemler gerçekleştirilmektedir.Bu örneğimizde de tüm div nesnelerinin içindeki değerler “bu” kelimesi ile başladığından dolayı hepsi etkilenecektir.

3. Prosedür

        $(document).ready(
            function () {
                $("div[hidden$='attributem']").css("color", "grey");
            }
            );

Şimdi ise “$=” operatörüyle karşılaştık.Bu şekilde de Attribute’un değerinin sonu, tırnağa verilen değere eşit olduğu durumlarda ki sayfa elemanlarını etkilemektedir.Burada gördüğünüz gibi “hidden” isimli Attribute’unun sonu “attributem” olarak biten eleman bir tek içinde “Örnek3” değeri yazan div nesnemizdir.

4. Prosedür

        $(document).ready(
            function () {
                $("div[hidden*='dördüncü']").css("color", "yellow");
            }
            );

Son olarak “*=” operatörü kalıyor.Bu operatör, Attribute içine yazılan değer içinde verilen değeri aramaktadır.Bu örnekte etkilenecek olan nesnemiz “Örnek4” değerini taşıyan html nesnemizdir.

İyi çalışmalar diliyorum…