jQuery, yalnızca DOM öğelerini seçen CSS seçicilerini destekler. Örneğin: ziyaret edildi ,: fareyle üzerine gelin ve: ilk satır desteklenmez.
Temel seçiciler
En az bir CSS şablonu oluşturduysanız temel seçiciler size aşinadır. jQuery ile büyük olasılıkla bu seçicileri zamanınızın% 90'ında kullanacaksınız:
Birden çok seçiciyi virgül kullanarak tek bir seçiciye birleştirebilirsiniz. jQuery, seçicilerden herhangi biriyle eşleşen tüm öğeleri seçecektir. Örneğin:
// .myClass sınıfına sahip tüm div'leri ve tüm paragrafları seçer var selectedElements \u003d $ ("div.myClass, p");
Özniteliğe göre öğe seçme
Bir sayfadaki tüm paragrafları seçmek istiyorsanız veya seçmek istediğiniz öğenin bir CSS sınıfı veya kimliği varsa, temel seçiciler harikadır.
Bununla birlikte, bazen bir sınıfı veya kimliği olmayan belirli bir öğeyi seçmeniz gerekir ve biçimlendirmedeki belirli bir öğeye bir sınıf veya kimlik eklemenin bir yolu yoktur. Bu durum, sabit bir HTML şablonuna sahip bir CMS kullanıldığında veya kullanıcı tarafından oluşturulan içerikle çalışırken ortaya çıkabilir.
Bu durumda seçilecek elemanın HTML niteliği kullanılarak seçimi daraltmak mümkündür. Örneğin, şunları seçebilirsiniz:
- Src özelliğine göre resim
- Href özelliğine göre bağlantı
- Type \u003d "checkbox" özelliğine sahip tüm form giriş alanları
jQuery, öğeleri özniteliğe göre seçmek için kullanılabilecek birçok seçiciye sahiptir:
| Seçici | Açıklama | Misal |
|---|---|---|
| Öznitelik | Öznitelik değerinden bağımsız olarak belirli bir özniteliği içeren öğeleri seçer. | $ ("div") |
| Öznitelik | Belirtilen özniteliği belirtilen değere sahip öğeleri seçer. | $ ("div") |
| Öznitelik eşit değil | Belirtilen özniteliği içermeyen veya belirtilen özniteliği içeren, ancak değer belirtilen öznitelikle eşleşmeyen öğeleri seçer. | $ ("div") |
| Öznitelik şununla başlar: | Değeri belirtilen dizeyle başlayan belirtilen özniteliği içeren öğeleri seçer. | $ ("div") |
| Öznitelik biter |
Değeri belirtilen dizeyle biten bir öznitelik içeren öğeleri seçer. | $ ("div") |
| Öznitelik şunları içerir: | Değeri verilen dizeyi içeren bir özniteliği içeren öğeleri seçer. | $ ("div") |
| Öznitelik kelimesini içerir | Değeri verilen kelimeyi içeren bir öznitelik içeren eleman (lar) ı seçer. "Kelime", boşluksuz karakter dizisidir. | $ ("div") |
| Öznitelik bir önek içeriyor | Değeri belirtilen dize olan veya belirtilen dizeyle başlayan ve ardından bir tire ile başlayan bir öznitelik içeren öğeleri seçer. | $ ("div") |
Seçiminizi daraltmak için öznitelik seçicileri birleştirebilirsiniz. Örneğin:
// Yalnızca 300 piksel genişliğinde ve 200 piksel yüksekliğindeki resimleri seçin var selectedImages \u003d $ ("img");
"Nitelik Önek İçeriyor" seçicisi etkisiz görünüyor, ancak lang \u003d "en" ve lang \u003d "en-US" gibi dil özelliklerini işlemek için yapılmıştır.
İçeriğe göre öğe seçme
Seçimi ana seçiciler ve özniteliklere göre daraltmak mümkün değilse, seçim için uygun olup olmadığını belirlemek için öğenin içeriğini "kazabilirsiniz". jQuery'nin bu amaç için 4 seçici vardır:
| Seçici | Açıklama | Misal |
|---|---|---|
| : içerir () | Verilen metni içeren öğeleri seçer. Metin, öğenin kendisinde veya seçili öğenin içindeki herhangi bir öğede olabilir. Note :: contains () büyük / küçük harfe duyarlıdır - "Merhaba", "merhaba" ile eşleşmez. | // "myText" içeren tüm div'leri seçin: $ ("div: contains (" metnim ")") |
| : vardır () | Verilen dizeyle eşleşen 1 veya daha fazla öğe içeren öğeleri seçer. Seçici, bir eşleşme için verilen öğe içindeki tüm öğelere bakar. | // Paragraf içeren tüm div'leri seçin: $ ("div: has (p)") |
| : ebeveyn | Diğer öğeleri veya metin düğümlerini içeren öğeleri seçer. | // Bir şey içeren tüm div'leri seçin: $ ("div: parent") |
| : boş | Diğer öğeleri veya metin düğümlerini içermeyen öğeleri seçer. | // Hiçbir şey içermeyen tüm div'leri seçin: $ ("div: boş") |
Aşağıdaki örnek nasıl kullanılacağını gösterir: contains (), belirli bir sınıfa sahip paragrafları seçmek için bir sınıf seçici ile birlikte, belirli bir satırın (veya satırların) içeriği için koşul ek bir koşuldur:
// "intro" sınıfına sahip olan ve ayrıca "MegaWidget" metnini içeren tüm paragrafları seçin. Var selectedElements \u003d $ ("p.intro: contains (" MegaWidget ")"); // "Giriş" sınıfına sahip tüm paragrafları seçin // ve hem "MegaWidget" hem de "WonderWidget" içeren tüm paragrafları seçin var selectedElements \u003d $ ("p.intro: contains (" MegaWidget "): contains (" WonderWidget ")");
Üyeleri hiyerarşiye göre seçme
JQuery'de öğeleri seçmenin başka bir yolu da, sayfadaki birbirleriyle nasıl ilişkili olduklarına bakmaktır. Muhtemelen bu CSS seçicilerinin çoğunu biliyorsunuzdur:
| Seçici | Açıklama | Misal |
|---|---|---|
| Çocuk | Belirtilen ataların alt öğesi (doğrudan nesli) olan öğeleri seçer. | // "nav" kimliğine sahip listenin alt öğeleri olan "vurgu" sınıfına sahip tüm liste öğelerini seçin: $ ("ul # nav\u003e li.highlight") |
| Azalan | Verilen atanın (ataların) torunları (çocuklar, torunlar vb.) Olan öğeleri seçer. Bu, Çocuk seçicinin daha genel bir biçimidir. | // Listedeki "nav" kimliğine sahip tüm bağlantıları seçin: $ ("ul # nav a") |
| Sonraki bitişik öğe |
Verilen öğeyi hemen takip eden, her iki öğenin de aynı ebeveyne sahip olduğu öğeleri seçer. | // H1 başlığını hemen takip eden tüm paragrafları seçin: $ ("h1 + p") |
| Sonraki kardeş öğesi |
Her iki öğenin de aynı ebeveynin soyundan geldiği başka bir öğeyi izleyen öğeleri seçer. Bu, sonraki kardeş seçicinin daha genelleştirilmiş bir versiyonudur. | // Tabloda "Merhaba" kelimesini içeren hücreden sonraki tüm hücreleri seçin: $ ("td: içerir (" merhaba ") ~ td") |
| İlk çocuk | Ebeveyninin ilk çocuğu olan öğeleri seçer. | // Sayfadaki tüm listelerde bulunan ilk öğeleri seçin: $ ("li: ilk-çocuk") |
| Son çocuk | Ebeveyninin son çocuğu olan öğeleri seçer. | // Sayfadaki tüm listelerdeki son öğeleri seçin: $ ("li: son-çocuk") |
| N. çocuk | Olan öğeleri seçer n. onun ebeveyninin çocuğu (aşağıdaki nota bakın). | // Sayfadaki tüm listelerdeki üçüncü öğeleri seçin: $ ("li: nth-çocuk (3)") |
| Tek çocuk | Yalnızca çocukları olan bir ebeveynin çocuğu olan öğeleri seçer. | // Yalnızca tek öğeli listelerdeki öğeleri seçin: $ ("li: yalnızca-çocuk") |
Şunu kullanarak belirli bir alt sayı belirtmeye ek olarak: nth-child (), çift (tüm çift numaralı çocukları seçmek için), tek (tüm tek numaralı çocukları seçmek için) veya bir ifade (örneğin, "li: nth-child ( 3n + 2) "listedeki her üçüncü öğeyi seçer ve ikinci öğeden başlar).
Aşağıdaki örnek, "myTable" kimliğine sahip bir tablodaki tüm tek satırların ilk hücresini seçer:
Var selectedElements \u003d $ ("tablo # myTable tr: nth-çocuk (tek)\u003e td: ilk-çocuk");
Form alanlarının seçilmesi
Form öğelerinin, sizi onları seçmek için bazı hileler kullanmaya zorlayan bazı belirli özellikleri vardır. Örneğin, diğer birçok alan türü gibi onay kutuları da girdi öğeleridir. Bu nedenle, bir formdaki onay kutularını seçmek için $ ("input") kullanın.
Benzer şekilde, bir formdaki seçili öğeleri veya işaretli onay kutularını belirlemek sıkıcı olabilir.
Neyse ki jQuery, hayatı kolaylaştıran birkaç forma özgü seçici sağlar:
| Seçici | Açıklama | Misal |
|---|---|---|
| : buton | Formdaki tüm düğmeleri seçer. | $ ("input: düğme") |
| : onay kutusu | Tüm onay kutularını seçer. | $ ("input: onay kutusu") |
| : dosya | Tüm dosya yükleme alanlarını seçer. | $ ("input: dosya") |
| : resim | Tüm görüntü giriş alanlarını seçer. | $ ("input: image") |
| : parola | Tüm şifre alanlarını seçer. | $ ("input: parola") |
| : radyo | Tüm radyo düğmelerini seçer. | $ ("input: radio") |
| : Sıfırla | Tüm form yeniden yükleme düğmelerini seçer. | $ ("input: sıfırla") |
| : Sunmak | Tüm form gönderme düğmelerini seçer. | $ ("input: gönder") |
| : Metin | Tüm metin giriş alanlarını seçer. | $ ("input: metin") |
| : girdi | Giriş, metin alanı ve belirli öğeler dahil tüm form alanlarını seçer. | $ (": girdi") |
| : kontrol | İşaretli tüm radyo düğmesi onay kutularını seçer. | $ ("girdi: işaretlendi") |
| : seçildi | Tüm seçenek öğelerini seçer. | $ ("seçenek: seçildi") |
| : devre dışı | Kullanılamayan tüm form alanlarını seçer. | $ ("giriş: devre dışı") |
| : etkin | Tüm Kullanılabilir form alanlarını seçer. | $ ("input: etkin") |
Yazılana ek olarak, sayfadaki tüm onay kutularını seçmek için örneğin $ ("input: checkbox") kullanabilirsiniz. Ancak, $ ("input: checkbox") daha hızlıdır çünkü jQuery, arama kapsamını yalnızca giriş öğeleriyle hızlı bir şekilde sınırlamak için JavaScript'in getElementsByTagName () işlevini kullanabilir. Bu genel olarak jQuery için geçerlidir - kodunuzu hızlandırmak için her zaman seçicilerin mümkün olan yerlerde çalışma kapsamını sınırlayın. Örneğin, $ ("*") çok yavaştır çünkü jQuery sayfadaki her bir öğeyi bulmak zorundadır.
Aşağıdaki örnek, "mailform.php" değerine sahip bir eylem özniteliğine sahip bir formu arar, ardından formdaki tüm işaretli radyo düğmelerini seçer:
Var selectedElements \u003d $ ("form girişi: radyo: işaretlendi");
Öğeleri konumlarına göre seçme
Bazen önceden seçilmiş bir dizi öğede bulunduğu bilinen bir öğeyi seçmeniz gerekir. Örneğin, "myClass" sınıfına sahip ilk paragrafı vurgulamanız gerekir. Örneği karmaşıklaştırmak için, bir listedeki "sınıfım" sınıfına sahip tüm öğeleri seçmeniz ve ardından ortaya çıkan kümeden 5. öğeyi seçmeniz gerektiğini varsayalım.
jQuery, arama kapsamını öğe konumuna göre sınırlamak için kullanılabilecek yedi seçiciye sahiptir:
| Seçici | Açıklama | Örnekleri |
|---|---|---|
| : ilk | Seçilen öğeler kümesindeki ilk öğeyi seçer. | // "myClass" sınıfına sahip ilk paragrafı seçin: $ ("p.myClass: ilk") |
| : son | Seçilen öğeler kümesindeki son öğeyi seçer. | // "myClass" sınıfına sahip son paragrafı seçin: $ ("p.myClass: last") |
| : eq () | Seçilen öğeler kümesindeki tek bir öğeyi seçer. Sıralı dizin numarasına göre bir öğe seçilir (0 \u003d birinci öğe, 1 \u003d ikinci vb.). | // "myClass" sınıfına sahip 3. paragrafı seçin: $ ("p.myClass: eq (2)") |
| : lt () | Verilen dizindeki öğeden önce gelen bir dizi seçili öğe içindeki öğeleri seçer. Örneğin, dizin 2 ise (yani 3. öğe), ilk 2 öğe (0 ve 1 indeksli) seçilecektir. | // / "myClass" sınıfına sahip ilk 2 paragrafı seçin: $ ("p.myClass: lt (2)") |
| : gt () | Verilen dizine sahip öğeden sonra bulunan seçili öğeler kümesindeki öğeleri seçeriz. Örneğin, dizin 2 ise (yani, 3. öğe), üçüncü öğeden sonraki tüm öğeler seçilecektir. | // İlk üçü dışında "sınıfım" sınıfına sahip tüm paragrafları seçin: $ ("p.myClass: gt (2)") |
| : hatta | Seçilen öğeler kümesindeki tüm çift sayılı öğeleri seçer. Endekslerin 0'dan başladığını, dolayısıyla 1'inci, 3'üncü ve benzerlerinin gerçekte seçildiğini unutmayın. | // "myClass" sınıfına sahip paragraflarda 1., 3., 5. ve benzerlerini seçin: $ ("p.myClass: çift") |
| : garip | Zaten seçilmiş öğeler kümesindeki tüm tek dizine alınmış öğeleri seçer. Endekslerin 0'dan başladığını, dolayısıyla 2., 4. ve benzeri öğelerin gerçekten seçildiğini unutmayın. | // "myClass" sınıfına sahip paragraflarda 2., 4., 6. ve benzerlerini seçin: $ ("p.myClass: tek") |
Bu seçicilerin ilk çocuk ,: son çocuk vb. İle aynı şekilde çalışmadığını unutmayın. Örneğin, li.myClass: first-child, yalnızca karşılık gelen listedeki ilk öğe olan "myClass" sınıfına sahip liste öğesini seçer. Ve li.myClass: önce sayfadaki "myClass" sınıfına sahip tüm liste öğelerini bulur ve ardından arama sonucu kümesindeki ilk liste öğesini seçer.
Aşağıdaki örnek, "myTable" kimliğine sahip bir tablonun ilk iki satırındaki tüm hücreleri seçer:
Var selectedElements \u003d $ ("table # myTable tr: lt (2)\u003e td");
Diğer kullanışlı jQuery seçicileri
Listelenen seçicilerden hiçbiri istediğiniz öğeleri vurgulamanıza yardımcı olmadıysa, aşağıdaki seçicileri kullanmayı deneyin:
| Seçici | Açıklama | Misal |
|---|---|---|
| : değil () | Verilen kaydırıcıyla eşleşmeyen tüm öğeleri seçer. | // "myClass" sınıfına sahip olmayan tüm paragrafları seçin: $ ("p: değil (. sınıfım)") |
| : animasyonlu | Şu anda jQuery tarafından canlandırılan tüm öğeleri seçer (örneğin, kaybolma). | // Şu anda hareket eden tüm div'leri seçin: $ ("div: animasyonlu") |
| : gizli | Tüm gizli öğeleri seçer. Bir öğe şu durumda "gizli" olarak kabul edilir: display özelliği "yok" olarak ayarlanmışsa; form alanları - "gizli" yazın; genişlik ve yükseklik 0 olarak ayarlanmışsa; verilen öğeyi içeren öğelerden biri gizliyse. Ancak, element değil yalnızca görünürlük özelliği "gizli" olarak ayarlanmışsa "gizli" olarak kabul edilir. | // "myClass" sınıfına sahip tüm gizli paragrafları seçin: $ ("p.myClass: gizli") |
| : gözle görülür | Görünen tüm öğeleri seçer. Bu, gizli için ters seçicidir. | // "sınıfım" sınıfına sahip tüm görünür paragrafları seçin: $ ("p.myClass: görünür") |
| : başlık | tüm başlık öğelerini (h1, h2 vb.) seçer. | // "sınıfım" sınıfına sahip tüm üstbilgileri seçin: $ (": header.myClass") |
Aşağıdaki örnek, h1 başlıkları dışında sayfadaki tüm öğeleri seçer:
Var selectedElements \u003d $ (": başlık: değil (h1)");
Sonuç
Bu makalede, jQuery seçicileri kullanarak öğelerin nasıl seçileceğini inceledik. Aşağıdaki seçici türleri ayrıştırılmıştır:
- Temel seçicilerçoğu zaman proje üzerinde çalışırken kullanılacak
- Öznitelik seçiciler öznitelik adlarına ve değerlerine göre öğeleri seçmek için
- İçerik seçicileriçeriklerine göre öğe seçmenize izin veren
- Hiyerarşik seçicilersayfadaki diğer öğelerle ilişkilerine göre öğeleri seçmek için kullanılabilir
- Form alanı seçicilerifarklı form alanı öğelerini seçmenin kolay bir yolunu sağlayan
- Konum seçiciler öğeleri bir dizi öğe içindeki konumlarına göre seçmek için
- Ek seçicilerörneğin: seçiciyle eşleşmeyen öğeleri seçmek için not () ve: animasyonlu öğeleri seçmek için animasyonlu
Son güncelleme: 1.11.2015
Önemli jQuery işlevlerinden biri öğe seçimidir. Elemanlarla bir şeyler yapmak, onları manipüle etmek, onlara jQuery metotları uygulamak için önce onları almalıyız. Kitaplık, seçicilere göre öğeleri seçmek için bize uygun bir yol sağlar. Sadece jQuery işlevine bir seçici geçirmemiz gerekiyor ve bu seçiciye karşılık gelen ihtiyacımız olan öğeyi alabiliriz. Örneğin, img'nin tüm öğelerini almak istiyorsak, şu ifadeyi kullanabiliriz: $ ("img"). Bu durumda, "img" bir seçici olarak hareket edecektir.
Elemanları seçmek için kullanılan temel jQuery seçicilerine bakalım.
Temel jQuery seçicileri
Seçici desen | Açıklama | |
Tüm sayfa öğeleri getiriliyor | Örneğin, $ ("*"). Css ("arka plan rengi", "kırmızı") ifadesi tüm sayfa öğelerini ve sayfanın kendisini kırmızıya boyar |
|
Belirli bir etiket adına sahip tüm öğeleri seçer | $ ("img") tüm img öğelerini seçer |
|
Belirli bir id öznitelik değerine sahip bir öğeyi getirme | $ ("# btn1"), id değeri btn1 olan bir öğe seçer (örneğin, ) |
|
Belirli bir sınıf öznitelik değerine sahip tüm öğeleri getirme | $ (". redStyle"), sınıf değeri redStyle olan öğeleri seçer (örneğin, ) |
|
$ ("selector1, selector2, selectorN") | Belirtilen seçicilerle eşleşen tüm öğeleri seçer | Örneğin, şöyle bir kodumuz var: $ (". apple, .orange") seçicisi, kalın yazılan öğeleri seçer |
Seçim özellikleri
Öğelerin seçimini daha ayrıntılı olarak özelleştirmek için aynı anda birkaç seçici kullanabiliriz. Örneğin, şöyle bir web sayfamız var:
Sözlük
Aktar | |
masa | |
elma |
Bu durumda #tab seçiciyi kullanırız, yani id \u003d tab olan tablomuzu seçeriz. Css ifadesi ("arka plan rengi", "gümüş") öğenin rengini belirler - bu durumda gümüş.
Bu sayfayı bir web tarayıcısında çalıştırarak aşağıdaki resmi elde ederiz:
Ancak işlemi daha ayrıntılı yapmak için bir dizi seçici de kullanabiliriz. Örneğin, yalnızca class \u003d "tabhead" özelliğine sahip ilk satırı doldurmamız gerekir. Sonra şu seçiciyi kullanabiliriz: $ ("# tab .tabhead"). Bu durumda seçici, id \u003d "tab" olan öğede bulunan class \u003d "tabhead" öğesini seçecektir.
Böylece, seçimi daraltmak için birçok farklı seçici kullanabiliriz, örneğin: $ ("div # menu a.redStyle"). Örneğin, bu seçici, örneğin böyle bir elemanı bulabilir:
Bu durumda, hiyerarşik bir seçici uyguladık; bu, ikinci seçicinin öğesinin birinci seçicinin öğesinde olması gerektiğini ima eder. Ancak ek olarak, bir dizi hiyerarşik seçici de uygulayabiliriz:
Seçici desen | Açıklama | |
parent_selector\u003e child_selector | İkinci seçiciyle eşleşen ve ilk seçicinin öğelerinin alt öğesi olan tüm öğeleri seçer |
|
selector1 + selector2 | "Selector1" öğelerinden hemen sonra bulunan "selector2" seçicili öğeler getiriliyor. Üstelik her iki unsur da aynı seviyede olmalıdır. |
Daha sonra $ (". Closed + .open") seçicisi, kalın olan bağlantıları seçecektir çünkü class \u003d "open" özniteliğine sahip bu öğeler, class \u003d "closed" özniteliğine sahip öğeleri hemen takip eder. |
selector1 ~ selector2 | Seçici "seçici2" ile "seçici1" seçicisine sahip öğelerle aynı hizada olan öğelerden oluşan bir seçim. |
Örneğin, aşağıdaki bağlantı bloğumuz var:
Daha sonra, $ (". Closed ~ .open") seçicisi, class \u003d "open" özniteliğine sahip bu öğeler, class \u003d "closed" özniteliğine sahip öğelerle aynı seviyede olduğundan, kalın olan bağlantıları seçecektir. |
Öznitelik seçiciler
Aramayı yukarıda tartışılan temel ve hiyerarşik seçicilerin ötesinde daraltmak için öznitelik seçicileri kullanabiliriz. Bu durumda jQuery, belirtilen özniteliklerin değerlerine ve tanımlarına dayalı olarak öğeler döndürür.
Seçici desen | Açıklama | |
Attr özelliğine sahip tüm öğeleri getirme | Örneğin, $ ("a") ifadesi, class özniteliğine sahip tüm bağlantı öğelerini seçecektir. |
|
Attr değeri değerine eşit olan tüm öğeleri seçer | Örneğin, $ ("a") ifadesi, class \u003d "redStyle" özniteliğine sahip tüm bağlantı öğelerini seçecektir. |
|
Öznitelik değeri dize değeriyle başlayan tüm öğeleri getirme | Örneğin, $ ("a") ifadesi class \u003d "redStyle" niteliğine sahip bağlantı öğelerini seçer çünkü "redStyle" kelimesi "red" ile başlar. |
|
Öznitelik değeri dize değeriyle biten tüm öğelerin seçimi | Örneğin, $ ("a") ifadesi class \u003d "redStyle" niteliğine sahip bağlantı öğelerini seçecektir çünkü "redStyle" kelimesi "Style" ile biter. |
|
Attr özniteliğinde boşlukla ayrılmış değerler listesi olan ve bu değerlerden biri değer olan tüm öğeleri getirme | Örneğin, $ ("a") ifadesi, aşağıdaki öznitelik değerine sahip olabilen bağlantı öğelerini seçer class \u003d "redStyle kapalı". |
|
Attr özniteliğinin değerinin alt dize değerine sahip olduğu tüm öğelerin seçimi | Örneğin, $ ("a") ifadesi, aşağıdaki öznitelik değerine sahip olabilen bağlantı öğelerini seçer class \u003d "redStyle1". |
|
Öznitelik değeri değer veya kısa çizgiyle ayrılmış değerler listesi olan ve bu listedeki ilk değer değer olan tüm öğelerin seçimi | Örneğin, $ ("a") ifadesi, aşağıdaki öznitelik değerine sahip olabilen bağlantı öğelerini seçer class \u003d "red-freeStyle-closed". |
Seçici bağlam
Yukarıda, bir eleman seçmek için bu gösterimi kullandık: $ (selector). Bu ifade, elemanın seçici ile eşleşip eşleşmediğini görmek için DOM ağacının tamamına baktı. Ancak, arama bağlamını uygulayarak aramayı sınırlayabiliriz. Bağlam, içindeki öğeleri seçmek istediğiniz bir seçicidir. Örneğin şöyle bir web sayfamız var:
Sayfada üç bağlantımız var, hepsi aynı sınıfa sahip, ancak ikisi div öğesinde ve onlar bizim almak istediğimiz şeyler. Sonra $ (". Open", "div # menu") ifadesini kullanırız - burada ikinci seçici parametresi seçim bağlamı olacaktır. Ve bu durumda sonuç aşağıdaki sayfa olacaktır:
Bu ifadeyi birçok seçicinin yaptığı bir seçimle karıştırmamak önemlidir, örneğin, $ (". Open, div # menu") - bunlar farklı sonuçlar verecek farklı ifadelerdir.
Bu derste, bir sayfadaki öğeleri özniteliklerine göre nasıl bulacağımızı göreceğiz.
JQuery'de, öğelerin özniteliğe göre getirilmesi, CSS belirtimine göre yapılır.
Öğeleri seçmek için öznitelikleri kullandığınızda, bazı özniteliklerin boşlukla ayrılmış birden çok değeri olabileceğini unutmayın.
Örneğin:
... ... ...
Seçici ifadesindeki öznitelik değeri tırnak işaretleri arasına alınmalıdır. Bu, aşağıdaki yollardan biriyle yapılır:
- tek tırnak içinde çift tırnak: $ ("a").
- çift \u200b\u200btırnak içinde tek tırnak: $ ("").
- tek tırnak içinde tek tırnaktan kaçtı: $ ("a").
- çift \u200b\u200btırnak içinde kaçan çift tırnak: $ ("a").
JQuery'de, çeşitli seçicileri kullanarak özniteliğe göre öğeleri arayabilirsiniz. Ek olarak, öğeleri seçmek için birkaç öznitelik seçicinin bir kombinasyonunu kullanabilirsiniz. Bu durumda, yalnızca belirtilen seçicilerin her biriyle eşleşen öğeler seçilecektir.
jQuery - Öğeleri özniteliğe göre bulmak için seçiciler
Belirtilen dizeye (değer) eşit bir değere sahip belirtilen özniteliğe (ad) sahip olan veya bu dizeyle (değer) başlayan ve ardından bir tire gelen öğeleri seçer.
Örneğin, uyarı değerine eşit veya uyarı- ile başlayan bir sınıf özniteliğine sahip tüm div öğelerini seçin.
...
