jQuery’de Seçiciler

Değerli dostlarım, bu dersimizde jQuery ile Html elementlerinin nasıl seçildiğini öğreneceğiz. Öncelikle şunu söyleyelim. Sitemizde bu sayfalarda yer alan nesne, element, Html parçacığı, tag gibi ifadeler aynı şeyi ifade ediyor. Bunlar HTML sayfasını oluşturan kodlardır ve <nesne> şeklinde yazılır.

jQuery için elementler üzerinde işlem yapıyor dedik. O halde elementleri seçmek de işin bir parçası. Elementleri jQuery’de ifade ederken $(“nesne”) şeklinde ifade ediyoruz. Şimdi örnekler yoluyla nasıl element seçtiğimizi öğrenelim.

Seçici Örnek Açıklama
* $(“*”) Tüm etiketleri seçer
#id $(“#lastname”) id değere sahip etiketleri seçer
.class $(“.intro”) class değere sahip etiketleri seçer
.class,.class $(“.intro,.demo”) class’ı intro ve demo olan tüm etiketleri seçer
element $(“p”) p değere sahip tüm etiketleri seçer
el1,el2,el3 $(“h1,div,p”) Birden fazla etiket seçer
:first $(“p:first”) Sayfadaki ilk p etiketisi seçer
:last $(“p:last”) Sayfadaki son p etiketini seçer
:even $(“tr:even”) 0 dan başlayarak bir seçer bir seçmez
:odd $(“tr:odd”) 1 dan başlayarak bir seçer bir seçmez
:first-child $(“p:first-child”) ilk p etiketini seçer
:first-of-type $(“p:first-of-type”) ilk p etiketlerini seçer
:last-child $(“p:last-child”) Tüm en son p etiketlerini seçer
:last-of-type $(“p:last-of-type”) Tüm en son p etiketlerini seçer
:nth-child(n) $(“p:nth-child(2)”) Tüm p etiketlerinin belirtilen etiket sırasını seçer
:nth-last-child(n) $(“p:nth-last-child(2)”) tüm 2. p elementini seçer
:nth-of-type(n) $(“p:nth-of-type(2)”)  
:nth-last-of-type(n) $(“p:nth-last-of-type(2)”)  
:only-child $(“p:only-child”) tüm çocuk p elementlerini seçer
:only-of-type $(“p:only-of-type”)  
parent > child $(“div > p”) div içerisindeki p elementini seçer
parent descendant $(“div p”) p elementi içerisindeki div elementini seçer
element + next $(“div + p”) tüm div ve p elementlerini seçer
element ~ siblings $(“div ~ p”)  
     
:eq(index) $(“ul li:eq(3)”) 3. liste elementini seçer
:gt(no) $(“ul li:gt(3)”) 3. liste elementini seçer
:lt(no) $(“ul li:lt(3)”) 3. liste elementini seçer
:not(selector) $(“input:not(:empty)”) Boş tüm inputları seçer
     
:header $(“:header”) Tüm Header etiketlerini seçer
:animated $(“:animated”) Tüm Animated elemanlarını seçer
:focus $(“:focus”) Focus değerine sahip etiketleri seçer
:contains(text) $(“:contains(‘Hello’)”) Tüm contains hello değerlerini seçer
:has(selector) $(“div:has(p)”) Tüm div içinde p etiketi varsa seçer
:empty $(“:empty”) Tüm boş değere sahip etiketleri seçer
:parent $(“:parent”) Tüm içinde değere sahip etiketleri seçer
:hidden $(“p:hidden”) Tüm hidden değere sahip p etiketlerini seçer
:visible $(“table:visible”) Visible değere sahip tabloyu seçer
:root $(“:root”) <html> belgenin kök öğesi seçer.
:lang(language) $(“p:lang(de)”) Tüm p etiketlerinde lang özelliği de olan etiketleri seçer
[attribute] $(“[href]”) Tüm href özelliğine sahip etiketleri seçer
[attribute=value] $(“[href=’default.htm’]”) Href değeri default.html olan etiketleri seçer
[attribute!=value] $(“[href!=’default.htm’]”) Href değeri default.html olmayanları seçer
[attribute$=value] $(“[href$=’.jpg’]”) Href özelliği .jpg olanları seçer
[attribute|=value] $(“[title|=’Tomorrow’]”)  
[attribute^=value] $(“[title^=’Tom’]”)  
[attribute~=value] $(“[title~=’hello’]”)  
[attribute*=value] $(“[title*=’hello’]”)  
:input $(“:input”) Tüm inputlarını seçer
:text $(“:text”) Tüm Text inputlarını seçer
:password $(“:password”) Tüm Password inputlarını seçer
:radio $(“:radio”) Tüm Radio inputlarını seçer
:submit $(“:submit”) Tüm Submitinputlarını seçer
:reset $(“:reset”) Tüm Resetinputlarını seçer
:button $(“:button”) Tüm Button inputlarını seçer
:image $(“:image”) Tüm image type inputlarını seçer
:file $(“:file”) Tüm File inputlarını seçer
:enabled $(“:enabled”) Tüm enabled inputlarını seçer
:disabled $(“:disabled”) Tüm Disabled inputlarını seçer
:selected $(“:selected”) Tüm Select inputlarını seçer
:checked $(“:checked”) Tüm Checked inputlarını seçer

jQuery ile Html seçicileri bu şekildedir dostlar. Diğer bir dersimiz olan jQuery’nin metondları dersinde görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares