8/3/2019 Jquery ve Seiciler

1/6

Jquery ve Seiciler (Jquery Selectors)

Jquery renmeye balayan birisinin ilk olarak seicileri renmesini gerektiini dnyorum. Ziraseicileri iyi renmeden HTML elemanlarna olaylar vermek, deitirmek v.b. gibi ilemleri yapmas zor. Buyzden Jquery iin seicilerin en nemli konu olduunu syleyebilirim.

Seicileri 4 ana grupta toplayabiliriz.

1) Basit seiciler2) Hiyerarik seiciler3) Filtreli seiciler4) Form seiciler

Bu seicileri srayla tm zellikleri inceledikten sonra farkl tipte seicileri bir arada kullanarak Jquery ile tmelemanlara hakim olalm.

1) Basit seiciler

Basit seiciler elemanlar filtresiz direk semek iin kullanlan seicilerdir. Aadaki rneklere bakalm :

Jquery ve Seiciler rnek : $('div')

tm div etiketlerini seer.Jquery ve Seiciler rnek : $("#main")

id znitelii main olan elemti seer. Bu bir katman ya da baka bir eleman da olabilir.Jquery ve Seiciler rnek : $(".name")

class znitelii name olan tm elemanlar seer.

Jquery ve Seiciler rnek : $("div.name")

class znitelii name olan tm div etiketlerini seer.

Jquery ve Seiciler rnek : $("div.name.title")

class znitelii name ve title olan tm div etiketlerini seer.

Jquery ve Seiciler rnek : $("img , div ")

tm img ve div etiketlerini seer.

Jquery ve Seiciler rnek : Jquery ve Seiciler rnek : $("*")tm elemanlar seer

2) Hiyerarik seiciler

st eleman yani alt kme iinde olan elamlanlar seerken kullanlan seicilerdir. rnekle konuya girelim.

8/3/2019 Jquery ve Seiciler

2/6

Jquery ve Seiciler rnek : $("#main div")

id znitelii main olan elementin iindeki tm div etiketelerini seer. ( i ie olan div etiketleri dahil )

bu div eleman seilir

bu div eleman seilmez

$("#main div span ")

id znitelii main olan elemann iindeki div elamanlarn iindeki span etiketlerini seer. ( soldan saa doruhiyerarik bir ekilde )

Jquery ve Seiciler rnek : $("#main div span ")

bu span eleman seilir bu span eleman seilir bu span eleman seilmez bu span eleman seilmez

$("#main > div")

id znitelii 'main' olan elementin iindeki 1. dereceden yakn olan div etiketlerini seer. ( setii div etiketiniindeki div etiketlerini semez. )

Jquery ve Seiciler rnek : $("#main > div")

bu div eleman seilir bu div eleman seilir bu div eleman seilir bu div eleman seilmezbu div eleman seilmez

$("div + span")

div elamanndan sonra gelen ilk span elamann seer. ( birden fazla olsa dahi ilk olan seer )

Jquery ve Seiciler rnek : $("div + span")

bu span etiketi seilmez bir katmankatman iinde katman

8/3/2019 Jquery ve Seiciler

3/6

bu span eleman seilirbu span eleman seilmezbu span eleman seilmez

$("div ~ span")

div elemanndan sonra gelen tm span elemanlarn seer. ( setii div etikentin iindeki baka divetiketlerini semez. )

Jquery ve Seiciler rnek : $("div ~ span")

bu span eleman seilmez bir katmankatman iinde katman bu span eleman seilir

bu span eleman seilirbu span eleman seilmez bu span eleman seilir

3) Filtreli Seiciler

Basit ya da hiyerarik seicileri kullanarak seilen elemanlar filtrelemek iin kullanlr.

Jquery seilen elemanlar indexler. Bu sayede index numaralarna gre filtreleme yapabiliriz.

Filtreleri kullanmadan nce filtrelerin isimlerini ve ilevlerine bakalm:

y :firsty 0 numaral indexe sahip elaman seer.y r : $('div:first')y :lasty Son numaral indekse sahip eleman seer.y :not(selector)y eleen zelliklere sahip elemanlar eler.y Jquery ve Seiciler rnek : $("div :not ( .name )" )y :eveny ift numaral indekse sahip elemanlar seer.y Jquery ve Seiciler rnek : $('ul li : even')y :oddy Tek numaral indexe sahip elemanlar seer.

8/3/2019 Jquery ve Seiciler

4/6

y :eq(index)y Verilen indekse sahip elemanlar seer.y Jquery ve Seiciler rnek : $('ul li : eq(2)')y :gt(index)y Verilen indeksten daha byk indekse sahip olan elemanlar seer.y Jquery ve Seiciler rnek : $('ul li : gt(2)')y :lt(index)y Girilen indeksten daha kk indekse sahip elemanlar seer.y :headery ,... header etiketleri seer.y :animatedy O andaki animasyonlu elemanlar seer.y Jquery ve Seiciler rnek : $(' div: animated')y :nth-child(index/even/odd/equation)y Girilen seiciye alt kmedeki elemanlar seer.y Jquery ve Seiciler rnek : $(' ul li: nth-child(even)')y :first-childy Bulunduu alt kmenin ilk elamann seer.y Jquery ve Seiciler rnek : $(' ul li: first-child')y :last-childy Bulunduu alt kmenin son elamann seer.< /li>y :only-childy Bulunduu kmede eleman tek ise eleman seilir.y Jquery ve Seiciler rnek : $(' ul li: only-child')

Bu filtrelerin dnda baka tipte bir filtre daha var:

Attributed filters ( znitelik filtreleri )

Elamanlar zniteliklerine gre filtrelemek iin kullanlr.

Jquery ve Seiciler rnek :

Jquery ve Seiciler rnek : $("img [alt = img1]")

alt znitelii img1 olan img etiketli elaman seer.

Jquery ve Seiciler rnek : $("img [alt*= img]")

8/3/2019 Jquery ve Seiciler

5/6

alt zniteliinde img barndran img etiketli elaman seer ki bu rnekteki tm elamlar seer.

Jquery ve Seiciler rnek : $("img [src^=images/image1]")

src znitelii images/image1 ile balyan tm img etiketli elamanlar seer.

Jquery ve Seiciler rnek : $("img [alt$= .jpg]")

src znitelii .jpg ile biten tm img etiketli elamanlar seer.

imdi elemanlarn gizli ya da grnr olanlar semek ve eleman ieriine gre filtrelemek iin kullanlarseicileri inceleyelim.

y :hiddeny Jquery ve Seiciler rnek : $("div : hidden")

Gizlenmi elemanlar seer.

y :visibley Grnr elemanlar seer:contains(text)y Girilen ifadeyi bulunduran elemanlar seer.y Jquery ve Seiciler rnek : $("p : contains ('elma')")y :emptyy Alt eleman bulundurmayan bo elamanlar seer.y :has(selector)y Girilen elaman alt eleman olarak barndran elemanlar seer.y :parenty Alt eleman barndran elemanlar seer.

4) Form seiciler.

Form elemanlarn direk semek iin kullanlan seicilerdir.

y :inputy Tm form elemanlarn seer.y :texty text tipi form elemanlarn seer.y Jquery ve Seiciler rnek : $(':text')y eleman seer.y :passwordy password tipi form elemanlarn seer.y :radio

8/3/2019 Jquery ve Seiciler

6/6

y radio tipi form elemanlarn seer.y :checkboxy chechbox tipi form elemanlarn seer.y :submity submit tipi form elemanlarn seer.y :imagey image tipi form elemanlarn seer.y :resety reset tipi form elemanlarn seer.y :buttony button tipi form elemanlarn seer.y :filey file tipi form elemanlarn seer.y

imdi form elanlarnn filtrelemek iin kullanlan seicileri inceleyelim.

y :enabledy Deitirilebilen elemanlarn seer.y Jquery ve Seiciler rnek : $('form : enabled')y :disabledy Deitirilmeye kapatlm elamanlarn seer.y :checkedy aretlenmi onay kutularn seer. Jquery ve Seiciler rnek : $('form : checked')y :selectedy option tipi seilmi elemanlar seer.