Jquery Seçicileri

Bu makalemizde jquery seçicileri ve açıklamalarını görebileceğiz.

Jquery Seçicileri

Jquery’de kullanılan tüm seçiciler, seçicilere ait örnek kullanım ve açıklamaları alttaki tabloda yer almaktadır.

SeçiciÖrnekSeçim
*$(“*”)Tüm Elemanlar
#id$(“#lastname”)Eleman özelliği ve değeri id=”lastname” olan.
.class$(“.intro”)Eleman özelliği ve değeri class=”intro” olan.
.class,.class$(“.intro,.demo”)Elemanın class değeri “intro” veya “demo” olanlar.
element$(“p”)Tüm p elemanları
el1,el2,el3$(“h1,div,p”)Tüm h1, div ve p Elemanları
:first$(“p:first”)İlk p elemanı
:last$(“p:last”)Son p elemanı
:even$(“tr:even”)Tüm çift tr elemanları
:odd$(“tr:odd”)Tüm tek tr elemanları
:first-child$(“p:first-child”)Tüm p elemanları içerisindeki ilk eleman.
:first-of-type$(“p:first-of-type”)Tüm p elemanları içerisindeki ilk eleman.
:last-child$(“p:last-child”)Tüm p elemanları içerisindeki son eleman.
:last-of-type$(“p:last-of-type”)Tüm p elemanları içerisindeki son eleman.
:nth-child(n)$(“p:nth-child(2)”)Tüm p elemanları içerisindeki 2.eleman
:nth-last-child(n)$(“p:nth-last-child(2)”)Tüm p elemanları içerisindeki sondan 2.eleman
:nth-of-type(n)$(“p:nth-of-type(2)”)Tüm p elemanları içerisindeki 2.eleman
:nth-last-of-type(n)$(“p:nth-last-of-type(2)”)Tüm p elemanları içerisindeki sondan 2.eleman
:only-child$(“p:only-child”)All

elements that are the only child of their parent

:only-of-type$(“p:only-of-type”)All

elements that are the only child, of its type, of their parent

parent > child$(“div > p”)
altındaki

etiketlerinin tümünü verir

parent descendant$(“div p”)All

elements that are descendants of a

element
element + next$(“div + p”)The

element that are next to each

elements
element ~ siblings$(“div ~ p”)All

elements that are siblings of a

element
:eq(index)$(“ul li:eq(3)”)The fourth element in a list (index starts at 0)
:gt(no)$(“ul li:gt(3)”)List elements with an index greater than 3
:lt(no)$(“ul li:lt(3)”)List elements with an index less than 3
:not(selector)$(“input:not(:empty)”)All input elements that are not empty
:header$(“:header”)All header elements

,

:animated$(“:animated”)All animated elements
:focus$(“:focus”)The element that currently has focus
:contains(text)$(“:contains(‘Hello’)”)All elements which contains the text “Hello”
:has(selector)$(“div:has(p)”)All

elements that have a

element

:empty$(“:empty”)All elements that are empty
:parent$(“:parent”)All elements that are a parent of another element
:hidden$(“p:hidden”)All hidden

elements

:visible$(“table:visible”)All visible tables
:root$(“:root”)The document’s root element
:lang(language)$(“p:lang(de)”)All

elements with a lang attribute value starting with “de”

[attribute]$(“[href]”)All elements with a href attribute
[attribute=value]$(“[href=’default.htm’]”)All elements with a href attribute value equal to “default.htm”
[attribute!=value]$(“[href!=’default.htm’]”)All elements with a href attribute value not equal to “default.htm”
[attribute$=value]$(“[href$=’.jpg’]”)All elements with a href attribute value ending with “.jpg”
[attribute|=value]$(“[title|=’Tomorrow’]”)All elements with a title attribute value equal to ‘Tomorrow’, or starting with ‘Tomorrow’ followed by a hyphen
[attribute^=value]$(“[title^=’Tom’]”)All elements with a title attribute value starting with “Tom”
[attribute~=value]$(“[title~=’hello’]”)All elements with a title attribute value containing the word “hello”
[attribute*=value]$(“[title*=’hello’]”)All elements with a title attribute value containing the string “hello”
:input$(“:input”)All input elements
:text$(“:text”)All input elements with type=”text”
:password$(“:password”)All input elements with type=”password”
:radio$(“:radio”)All input elements with type=”radio”
:checkbox$(“:checkbox”)All input elements with type=”checkbox”
:submit$(“:submit”)All input elements with type=”submit”
:reset$(“:reset”)All input elements with type=”reset”
:button$(“:button”)All input elements with type=”button”
:image$(“:image”)All input elements with type=”image”
:file$(“:file”)All input elements with type=”file”
:enabled$(“:enabled”)All enabled input elements
:disabled$(“:disabled”)All disabled input elements
:selected$(“:selected”)All selected input elements
:checked$(“:checked”)All checked input elements

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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