İçindekiler
Bu öğeler veya seçiciler, efektler oluşturmak ve içerik elde etmek, gizlemek veya eklemek ve ona bir efekt uygulamak için Jquery ve css ile manipüle edilebilir, bu da programcıların işini kolaylaştırır. Bazı seçiciler, örneğin css koduyla daha iyi bilinir:TANIMLAYICILAR
En yüksek hiyerarşinin öğeleridir ve bir bloğun öğeleri için genel parametreleri tanımlarlar.#id olarak tanımlanırlar ve genellikle listelere veya bloklara uygulanırlar.
Bu, paragraf kimliği seçicisidir
Seçici olmayan paragraf
DERSLER
Bunlar daha düşük hiyerarşinin öğeleridir ve tek tek öğeler için veya bir kimlik içindeki sınıfları tanımlamak için kullanılırlar, örneğin:
Bu, paragraf kimliği seçicisidir
P ile mavi paragraf
Div ile mavi paragrafDiv ile kırmızı paragraf
Bağımsız sınıf .parrafoazul kimseye bağlı olmayan p öğesini uygulayabilirken, onu div gibi diğer öğelere bile uygulayabiliriz, ancak parraforojo sınıfını #paragraph tanımlayıcısından bağımsız olarak uygulamaya çalışırsak, çalıştığını göreceğiz. #paragraph tanımlayıcısını dayatan hiyerarşiyi yerine getirmediğinden çalışmaz.
Burada kullanabileceğimiz birçok seçici var, bazılarını göreceğiz.
Çift (çift) ve tek (tek) seçici
Bu seçici, aynı sınıfı kullanan bir dizi öğeye uygulanır ve çift veya tek öğeleri etkileyebilir, örneğin bir paragraf listesinin arka planını renklendiririz.
PARAGRAFLAR
Kullanıcı 1 bir mesaj bıraktı
Kullanıcı 2 bir mesaj bıraktı
Kullanıcı 3 bir mesaj bıraktı
Kullanıcı 4 bir mesaj bıraktı
UL LİSTESİ
- Kullanıcı 1 bir mesaj bıraktı
- Kullanıcı 2 bir mesaj bıraktı
- Kullanıcı 3 bir mesaj bıraktı
- Kullanıcı 4 bir mesaj bıraktı
SEÇİCİ İLK (İlk) VE SON (Son)
Bu seçiciler, belirli bir listenin ilk ve son öğesini değiştirmemize izin verir, örneğin listeyi gri, ilk öğeyi yeşil ve son öğeyi mavi olarak ayarlarız.
UL LİSTESİ
- Kullanıcı 1 bir mesaj bıraktı
- Kullanıcı 2 bir mesaj bıraktı
- Kullanıcı 3 bir mesaj bıraktı
- Kullanıcı 4 bir mesaj bıraktı
ODAK SEÇİCİ
Bir öğeye odaklanma, bir öğeye tıkladığınızda etkinleştirilir ve web'in başka bir alanına veya başka bir öğeye tıkladığınızda devre dışı bırakılır. Giriş formu ile bir örnek göreceğiz, .focologin sınıfını oluşturuyoruz ve ardından içerdiği tüm elementleri etkilemek için #login formunun tanımlayıcısına uyguluyoruz. Ayrıca bunu bir katman veya div bloğuna uygulayabilir ve formu bloğun içine yerleştirebiliriz.
BİÇİM
Kullanıcı şifresi:
AddClass ile bir öğeye bir css stili atayın veya değiştirin
Dinamik olarak bir css stili atamak veya belirli bir koşula göre değiştirmek istiyorsak, AddClass kullanacağız. Bu durumda, bir sınıf .green düğmemiz var ve giriş türü metnine Jquery'den .box sınıfını atadık. Parola türü girişi etkilenmez ve onlara herhangi bir css sınıfı atamadığımız için gönder düğmesi de etkilenmez.
KAYIT FORMU
İsim:
Adres:
Telefon:
E-posta:
Bu seçici, bir tablo hücresinin bulunduğu konuma göre bir dizi öğenin bir öğesini tanımlamaya izin verir, örneğin, öğelerin 0,1,2, vb. ile başlayan bir matrisin dizinleri olarak listelendiğini unutmamalıyız. .
| Başlık A | Başlık B | Başlık C |
|---|---|---|
| hücre 0 | hücre 1 | hücre 2 |
| hücre 3 | hücre 4 | hücre 5 |
Tablolar ve seçicilerin uygulanması ile devam ederek, daha önce paragraflar ve listelerle uygulanana benzer şekilde, bir tablonun satırlarının renklerinde dönüşümlü bir şekilde bir arka plan tasarımının nasıl oluşturulacağını göreceğiz. Efektin temelde daha iyi anlaşılması için çok fazla css veya tasarım eklemiyoruz.
SELECTOR nth-child
Önceki örnekle devam edersek, nth-child seçiciyi eq seçiciye benzer bir tamamlayıcı olarak kullanabiliriz, ancak fark, nth-child ile konumların aritmetik bir işlem şeklinde gösterilebilmesidir. Bir veya daha fazla öğeyi seçmek için kullanılır, ancak ebeveyninin n'inci çocuğu olması şartıyla. Bu seçici, bir bloğun ikinci paragrafını veya bir listenin üçüncü öğesini vb. seçmek için kullanışlıdır. Öğeler bir dizi olarak değil, birinci, ikinci vb. sırayla alınır.
Örneğin, önceki komut dosyasında eklersek
Bu durumda tek sütunlar seçilecek
- Tek Sütunlar nth-child (2n + 1)
- Eşleştirilmiş sütunlar nth-child (2n)
- Birinci ve dördüncü sütun nth-child (3n + 1)
