Jquery seçiciler

Sezai AlkanFrontend Developer

Jquery #jquery

Jquery'de Seçiciler Olmazsa Olmazdır. Bir Öğeyi Veya Bir Nesneyi Seçmeden İşlem Yaptırmamız Biraz Zordur. Seçicilerin Çok Farklı Türde Kullanımı Mevcuttur. Bunlara Örneklerden Ulaşabilirsiniz.

Etiket Seçicileri

Aşağıdaki Örnekte Bir Paragraf Etiketi Oluşturduk. Etiketi $(document).ready(function(){}); İle Sayfa Hazır Olduğunda Paragraf Rengini Kırmızı(red) Yap Diyoruz.

    <p>Etiket</p>

    <script type="text/javascript">
        $(document).ready(function(){
            $('p').css('color','red');
        });
    </script>

Id Ve Class Seçiciler

Jquery 'de Id Ve Class Seçicileri, Eğer Css'e Hakim İseniz Ordakiyle Aynısı Diyebiliriz. Id Seçicilerde tag(#), Class Seçicilerde nokta(.) Kullanıyoruz. Aşağıdaki Örnekte Bir Etiket Id 'si Bulunan Bir Div 'in Yükseklik,Genişlik Ve Arka Planını Değiştiriyoruz. İstersek Bu Üç Satırlık css Fonksiyonunu Tek Satırdada Yazabiliriz.

    <div id="etiket">Div İçeriği</div>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#etiket').css("height","200px");
            $('#etiket').css("width","200px");
            $('#etiket').css("background","orange");
        });
    </script>

Form Elemanları Seçme

Form Elemanlarını Seçmek İçin Birden Fazla Seçenek Vardır. İlk Seçenek Normal Etiket Seçer Gibi input Değeri İle Seçiyoruz Fakat Bunda Sayfanızdaki Tüm input Etiketine Sahip Elemanları Seçecektir. İkinci Seçenek Tipini Belirterek Seçme input:text Şeklinde Seçebiliriz. İki Noktadan Sonra Tipini Belirtebiliriz. Üçüncü Seçenek İse input[type="text"] Köşeli Parantezler İçerisinde type İle Belirtebiliyoruz. Bu Yöntem Css de de Kullanılıyor.

    <input type="text" placeholder="Sezai ALKAN">

    <script type="text/javascript">
        $(document).ready(function(){
            $('input').width(300);
            $('input:text').width(300);
            $('input[type="text"]').width(300);
        });
    </script>