Jquery seçiciler

sezaialkan
Sezai Alkan Frontend Developer

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>

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol