jQuery Seçiciler, HTML öğelerini seçmek ve işlemek için kullanılır. Seçiciler jQuery kitaplığının çok önemli bir parçasıdır.
jQuery seçicilerle, bir DOM’den kimliklerine, sınıflarına, özelliklerine, türlerine ve çok daha fazlasına göre HTML öğelerini bulabilir veya seçebilirsiniz.
Basit bir deyişle, jQuery kullanarak bir veya daha fazla HTML öğesini seçmek için seçicilerin kullanıldığını ve öğe seçildikten sonra bunun üzerinde çeşitli işlemler gerçekleştirebileceğinizi söyleyebilirsiniz.
Tüm jQuery seçicileri, bir $ işareti ve parantez ile başlar; $().
Her jQuery seçicisi $() ile başlar. Bu işaret fabrika işlevi olarak bilinir. Belirli bir belgede bir öğe seçerken üç temel yapı taşını kullanır.
| No. | Selector | Açıklama |
|---|---|---|
| 1) | Tag Name: | DOM’da bulunan bir etiket adını temsil eder. Örneğin: $(‘p’) belgedeki tüm paragrafları ‘p’ seçer. |
| 2) | Tag ID: | DOM’da belirli bir kimliğe sahip mevcut bir etiketi temsil eder. Örneğin: $(‘#real-id’) belgede gerçek kimliği olan belirli bir öğeyi seçer. |
| 3) | Tag Class: | DOM’da belirli bir sınıfla kullanılabilen bir etiketi temsil eder. Örneğin: $(‘gerçek-sınıf’), belgedeki gerçek sınıf sınıfına sahip tüm öğeleri seçer. |
Etiket seçicinin kullanımını görmek için basit bir örnek alalım. Bu, bir etiket adına sahip (p etiketi) tüm öğeleri seçer ve arka plan rengi ‘pembe’ olarak ayarlanmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>First jQuery Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("p").css("background-color", "pink"); }); </script> </head> <body> <p>Bu birinci paragraftır.</p> <p>Bu ikinci paragraftır.</p> <p>Bu üçüncü paragraftır.</p> </body> </html> |
Ekran Çıktısı:
Seçiciler Nasıl Kullanılır?
jQuery seçicileri, tek veya diğer seçicilerin kombinasyonu ile kullanılabilir. jQuery kullanırken her adımda gereklidirler. HTML belgenizden tam olarak istediğiniz öğeyi seçmek için kullanılırlar.
| No. | Selector | Açıklama |
|---|---|---|
| 1) | Name: | Verilen eleman adıyla eşleşen tüm elemanları seçer. |
| 2) | #ID: | Verilen id (kimlikle) eşleşen tek bir öğe seçer. |
| 3) | .Class: | Verilen sınıfla eşleşen tüm öğeleri seçer. |
| 4) | Universal(*) | Bir DOM’de bulunan tüm öğeleri seçer. |
| 5) | Birden Çok Öğe A,B,C | Belirtilen tüm seçiciler A, B ve C’nin birleşik sonuçlarını seçer. |
Farklı jQuery Seçiciler
| Selector | Örnek | Açıklama |
|---|---|---|
| * | $(“*”) | Tüm elemanları seçmek için kullanılır. |
| #id | $(“#firstname”) | id=’firstname’ olan öğeyi seçecektir. |
| .class | $(“.primary”) | class=’primary’ olan tüm öğeleri seçecektir. |
| class,.class | $(“.primary,.secondary”) | ‘primary’ veya ‘secondary’ sınıfına sahip tüm öğeleri seçecektir. |
| element | $(“p”) | Tüm p öğelerini seçecektir. |
| el1,el2,el3 | $(“h1,div,p”) | Tüm h1, div ve p öğelerini seçecektir. |
| :first | $(“p:first”) | Bu, ilk p öğesini seçecektir |
| :last | $(“p:last”) | Bu, son p öğesini seçecektir |
| :even | $(“tr:even”) | Bu, tüm çift tr öğelerini seçecektir |
| :odd | $(“tr:odd”) | Bu, tüm tek tr öğelerini seçecektir |
| :first-child | $(“p:first-child”) | Ebeveynlerinin ilk çocuğu olan tüm p öğelerini seçecektir. |
| :first-of-type | $(“p:first-of-type”) | Ebeveynlerinin ilk p öğesi olan tüm p öğelerini seçecektir. |
| :last-child | $(“p:last-child”) | Ebeveynlerinin son çocuğu olan tüm p öğelerini seçecektir. |
| :last-of-type | $(“p:last-of-type”) | Ebeveynlerinin son p öğesi olan tüm p öğelerini seçecektir. |
| :nth-child(n) | $(“p:nth-child(2)”) | Bu, ebeveynlerinin 2. çocuğu olan tüm p öğelerini seçecektir. |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | Bu, son çocuktan başlayarak ebeveyninin 2. çocuğu olan tüm p öğelerini seçecektir. |
| :nth-of-type(n) | $(“p:nth-of-type(2)”) | Ebeveynlerinin 2. p öğesi olan tüm p öğelerini seçecektir. |
| :nth-last-of-type(n) | $(“p:nth-last-of-type(2)”) | Bu, son alt öğeden başlayarak ebeveynlerinin 2. p öğesi olan tüm p öğelerini seçecektir. |
| :only-child | $(“p:only-child”) | Ebeveynlerinin tek çocuğu olan tüm p öğelerini seçecektir. |
| :only-of-type | $(“p:only-of-type”) | Kendi türünde ebeveyninin tek çocuğu olan tüm p öğelerini seçecektir. |
| parent > child | $(“div > p”) | Bir div öğesinin doğrudan çocuğu olan tüm p öğelerini seçecektir. |
| parent torun | $(“div p”) | Bir div öğesinin soyundan gelen tüm p öğelerini seçecektir. |
| element + sonraki | $(“div + p”) | Her div öğesinin yanındaki p öğesini seçer. |
| element ~ kardeş | $(“div ~ p”) | Bir div öğesinin kardeşleri olan tüm p öğelerini seçer |
| :eq(index) | $(“ul li:eq(3)”) | Listedeki dördüncü öğeyi seçecektir (dizin 0’dan başlar) |
| :gt(no) | $(“ul li:gt(3)”) | grea3’ten bir dizine sahip liste öğelerini seçin, 3’ten daha büyük bir dizine sahip öğelerini seçin |
| :lt(no) | $(“ul li:lt(3)”) | 3’ten küçük bir dizine sahip liste öğelerini seçin |
| :not(selector) | $(“input:not(:empty)”) | Boş olmayan tüm giriş öğelerini seçin |
| :header | $(“:header”) | Tüm başlık öğelerini seçin h1, h2 … |
| :animated | $(“:animated”) | Tüm animasyonlu öğeleri seçin |
| :focus | $(“:focus”) | Şu anda odaklanmış olan öğeyi seçin |
| :contains(text) | $(“:contains(‘Hello’)”) | ‘Hello’ metnini içeren tüm öğeleri seçin |
| :has(selector) | $(“div:has(p)”) | p öğesi olan tüm div öğelerini seçin |
| :empty | $(“:empty”) | Boş olan tüm öğeleri seçin |
| :parent | $(“:parent”) | Başka bir öğenin ebeveyni olan tüm öğeleri seçin |
| :hidden | $(“p:hidden”) | Tüm gizli p öğelerini seç |
| :visible | $(“table:visible”) | Tüm görünür tabloları seçin |
| :root | $(“:root”) | Belgenin kök öğesini seçecektir |
| :lang(language) | $(“p:lang(de)”) | ‘de’ ile başlayan bir lang öznitelik değerine sahip tüm p öğelerini seçin |
| [attribute] | $(“[href]”) | Bir href özniteliği olan tüm öğeleri seçin |
| [attribute=value] | $(“[href=’default.htm’]”) | ‘default.htm’ değerine eşit bir href öznitelik değerine sahip tüm öğeleri seçin |
| [attribute!=value] | $(“[href!=’default.htm’]”) | ‘default.htm’ değerine eşit olmayan bir href öznitelik değerine sahip tüm öğeleri seçecektir. |
| [attribute$=value] | $(“[href$=’.jpg’]”) | ‘.jpg’ ile biten bir href öznitelik değerine sahip tüm öğeleri seçecektir. |
| [attribute|=value] | $(“[title|=’Yarın’]”) | Başlık öznitelik değeri ‘Yarın’a eşit olan veya ‘Yarın’ ile başlayan ve ardından bir tire gelen tüm öğeleri seçin |
| [attribute^=value] | $(“[title^=’Tom’]”) | ‘Tom’ ile başlayan bir başlık özelliği değerine sahip tüm öğeleri seçin |
| [attribute~=value] | $(“[title~=’merhaba’]”) | Belirli ‘merhaba’ kelimesini içeren bir başlık öznitelik değerine sahip tüm öğeleri seçin |
| [attribute*=value] | $(“[title*=’hello’]”) | ‘hello’ kelimesini içeren bir başlık özelliği değerine sahip tüm öğeleri seçin |
| :input | $(“:input”) | Tüm giriş öğelerini seçecek |
| :text | $(“:text”) | type=’text’ ile tüm giriş öğelerini seçecektir. |
| :password | $(“:password”) | type=’password’ ile tüm giriş öğelerini seçecektir. |
| :radio | $(“:radio”) | type=’radio’ ile tüm giriş öğelerini seçecektir. |
| :checkbox | $(“:checkbox”) | type=’checkbox’ ile tüm giriş öğelerini seçecektir |
| :submit | $(“:submit”) | type=’submit’ ile tüm giriş öğelerini seçecektir. |
| :reset | $(“:reset”) | type=’reset’ ile tüm giriş öğelerini seçecektir. |
| :button | $(“:button”) | type=’button’ ile tüm giriş öğelerini seçecektir. |
| :image | $(“:image”) | type=’image’ ile tüm giriş öğelerini seçecektir. |
| :file | $(“:file”) | type=’file’ ile tüm girdi öğelerini seçecektir. |
| :enabled | $(“:enabled”) | Tüm etkin giriş öğelerini seçin |
| :disabled | $(“:disabled”) | Tüm devre dışı giriş öğelerini seçecektir |
| :selected | $(“:selected”) | Seçilen tüm giriş öğelerini seçecektir |
| :checked | $(“:checked”) | Tüm kontrol edilen giriş öğelerini seçecektir |
Add Comment