jQuery - Seçiciler

JQuery kitaplığı, Belge Nesne Modelindeki (DOM) öğelere veya öğe gruplarına hızlı ve kolay bir şekilde erişmemizi sağlamak için Basamaklı Stil Sayfaları (CSS) seçicilerinin gücünü kullanır.

Bir jQuery Selector, verilen kriterlere göre bir DOM'dan eşleşen öğeleri bulmak için ifadelerden yararlanan bir işlevdir. Basitçe söyleyebiliriz ki, jQuery kullanarak bir veya daha fazla HTML öğesi seçmek için seçiciler kullanılır. Bir öğe seçildikten sonra, o seçilen öğe üzerinde çeşitli işlemler gerçekleştirebiliriz.

$ () Fabrika işlevi

jQuery seçicileri dolar işareti ve parantezlerle başlar - $(). Fabrika işlevi$() belirli bir belgedeki öğeleri seçerken aşağıdaki üç yapı taşını kullanır -

Sr.No.	Seçici ve 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 verilen kimlikle kullanılabilen bir etiketi temsil eder. Örneğin$('#some-id') belgedeki bir kimliği olan tek öğeyi seçer.
3	Tag Class DOM'da belirtilen sınıfla kullanılabilen bir etiketi temsil eder. Örneğin$('.some-class') belgedeki bir sınıf sınıfına sahip tüm öğeleri seçer.

Yukarıdaki tüm öğeler kendi başlarına veya diğer seçicilerle kombinasyon halinde kullanılabilir. Bazı ayarlamalar dışında tüm jQuery seçicileri aynı prensibe dayanmaktadır.

NOTE - Fabrika işlevi $() eşanlamlıdır jQuery()işlevi. Bu nedenle, başka bir JavaScript kitaplığı kullanıyorsanız,$ işareti başka bir şeyle çelişiyor, sonra değiştirebilirsiniz $ imzalamak jQuery isim ve işlevi kullanabilirsiniz jQuery() onun yerine $().

Misal

Aşağıda, Etiket Seçiciden yararlanan basit bir örnek verilmiştir. Bu, bir etiket adı olan tüm öğeleri seçerp.

Canlı Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://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", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Seçiciler Nasıl Kullanılır?

Seçiciler çok kullanışlıdır ve jQuery kullanılırken her adımda gerekli olacaktır. HTML belgenizden tam olarak istediğiniz öğeyi alırlar.

Aşağıdaki tablo birkaç temel seçiciyi listeler ve bunları örneklerle açıklar.

Sr.No.	Seçici ve Açıklama
1	İsim Verilen öğeyle eşleşen tüm öğeleri seçer Name.
2	#İD Verilen ile eşleşen tek bir eleman seçer ID.
3	.Sınıf Verilenle eşleşen tüm öğeleri seçer Class.
4	Evrensel (*) Bir DOM'da bulunan tüm öğeleri seçer.
5	Çoklu Elemanlar E, F, G Belirtilen tüm seçicilerin birleşik sonuçlarını seçer E, F veya G.

Seçici Örnekler

Yukarıdaki sözdizimi ve örneklere benzer şekilde, aşağıdaki örnekler size farklı türde başka yararlı seçiciler kullanmayı anlamanızı sağlayacaktır -

Burada, farklı türde başka yararlı seçiciler var -

Sr.No.	Seçici ve Açıklama
1	*$('')** Bu seçici, belgedeki tüm öğeleri seçer.
2	*$("p > ")** Bu seçici, bir paragraf öğesinin alt öğesi olan tüm öğeleri seçer.
3	$("#specialID") Bu seçici işlevi id = "specialID" olan öğeyi alır.
4	$(".specialClass") Bu seçici, specialClass sınıfına sahip tüm öğeleri alır .
5	$("li:not(.myclass)") <li> ile eşleşen, class = "myclass" içermeyen tüm öğeleri seçer.
6	$("a#specialID.specialClass") Bu seçici, bağlantıları bir specialID kimliği ve bir specialClass sınıfı ile eşleştirir .
7	$("p a.specialClass") Bu seçici, <p> elemanları içinde belirtilen bir specialClass sınıfıyla bağlantıları eşleştirir .
8	$("ul li:first") Bu seçici, <ul> öğesinin yalnızca ilk <li> öğesini alır.
9	$("#container p") Kapsayıcı kimliğine sahip bir öğenin soyundan gelen <p> ile eşleşen tüm öğeleri seçer .
10	$("li > ul") <li> ile eşleşen bir öğenin alt öğeleri olan <ul> ile eşleşen tüm öğeleri seçer
11	$("strong + em") <strong> ile eşleşen bir kardeş öğeyi hemen takip eden <em> ile eşleşen tüm öğeleri seçer.
12	$("p ~ ul") <p> ile eşleşen bir kardeş öğeyi izleyen <ul> ile eşleşen tüm öğeleri seçer.
13	$("code, em, strong") <code> veya <em> veya <strong> ile eşleşen tüm öğeleri seçer.
14	$("p strong, .myclass") Seçer <p> gibi bir sınıf olan tüm elemanlar ile eşleşen bir elemanın <strong> olan soyundan uyuştuğu tüm elemanlar MyClass .
15	$(":empty") Alt öğesi olmayan tüm öğeleri seçer.
16	$("p:empty") <p> ile eşleşen, çocuğu olmayan tüm öğeleri seçer.
17	$("div[p]") <p> ile eşleşen bir öğe içeren <div> ile eşleşen tüm öğeleri seçer.
18	$("p[.myclass]") Sınıfım sınıfına sahip bir öğe içeren <p> ile eşleşen tüm öğeleri seçer .
19	$("a[@rel]") <a> ile eşleşen, rel özelliğine sahip tüm öğeleri seçer.
20	$("input[@name = myname]") <input> ile eşleşen ve tam olarak myname'e eşit bir ad değerine sahip tüm öğeleri seçer .
21	$("input[@name^=myname]") <input> ile eşleşen ve myname ile başlayan bir ad değerine sahip tüm öğeleri seçer .
22	$("a[@rel$=self]") <a> ile eşleşen tüm öğeleri seçer. relself ile biten özellik değeri .
23	*$("a[@href=domain.com]")** <a> ile eşleşen, domain.com'u içeren bir href değerine sahip tüm öğeleri seçer.
24	$("li:even") Çift dizin değerine sahip <li> ile eşleşen tüm öğeleri seçer.
25	$("tr:odd") Tek bir dizin değerine sahip <tr> ile eşleşen tüm öğeleri seçer.
26	$("li:first") İlk <li> öğesini seçer.
27	$("li:last") Son <li> öğesini seçer.
28	$("li:visible") Görünen <li> ile eşleşen tüm öğeleri seçer.
29	$("li:hidden") <li> ile eşleşen gizli olan tüm öğeleri seçer.
30	$(":radio") Formdaki tüm radyo düğmelerini seçer.
31	$(":checked") Formdaki tüm işaretli kutuları seçer.
32	$(":input") Yalnızca form öğelerini seçer (giriş, seçim, metin alanı, düğme).
33	$(":text") Yalnızca metin öğelerini seçer (girdi [tür = metin]).
34	$("li:eq(2)") Üçüncü <li> öğesini seçer.
35	$("li:eq(4)") Beşinci <li> öğesini seçer.
36	$("li:lt(2)") Üçüncü öğeden önce <li> öğesi ile eşleşen tüm öğeleri seçer; diğer bir deyişle, ilk iki <li> öğesi.
37	$("p:lt(3)") <p> dördüncü öğeden önceki öğelerle eşleşen tüm öğeleri seçer; diğer bir deyişle ilk üç <p> öğesi.
38	$("li:gt(1)") İkincisinden sonra <li> ile eşleşen tüm öğeleri seçer.
39	$("p:gt(2)") Üçüncünün ardından <p> ile eşleşen tüm öğeleri seçer.
40	$("div/p") <div> ile eşleşen bir öğenin alt öğeleri olan <p> ile eşleşen tüm öğeleri seçer.
41	$("div//code") <div> ile eşleşen bir öğenin soyundan gelen <code> ile eşleşen tüm öğeleri seçer.
42	$("//p//a") <p> ile eşleşen bir öğenin soyundan gelen <a> ile eşleşen tüm öğeleri seçer.
43	$("li:first-child") <li> ile eşleşen, ebeveynlerinin ilk alt öğesi olan tüm öğeleri seçer.
44	$("li:last-child") <li> ile eşleşen, ebeveynlerinin son çocuğu olan tüm öğeleri seçer.
45	$(":parent") Metin dahil, başka bir öğenin ebeveyni olan tüm öğeleri seçer.
46	$("li:contains(second)") <li> ile eşleşen ve ikinci metni içeren tüm öğeleri seçer.

Yukarıdaki seçicileri herhangi bir HTML / XML öğesi ile genel bir şekilde kullanabilirsiniz. Örneğin, seçici$("li:first") <li> öğesi için çalışır o zaman $("p:first") <p> elemanı için de işe yarar.