Neden nasıl JQuery-seçici kaydetmek ve gerekli?

Modern web tasarımcısı yalnızca usta olmamalıdır HTML, temellerini CSS ve JavaScript, aynı zamanda HTML belgelerle JavaScript etkileşime odaklanan JQuery kütüphane, çalışmak mümkün. Çabuk herhangi eleman DOM (içerik html-dosyalara erişim sağlar uygulama programlama arayüzüne) erişimi ve bunları manipüle edilmesine izin vermesidir. Kütüphanenin ana yapısal birimleri takımız. birini uygulamak amacıyla veya diğer takımın, bir JQuery-seçici gerekir.

JQuery kitaplığında Formül seçiciler

JQuery içinde seçiciler CSS'deki kullanımına dayalı. Onları (takım) manipüle bu veya diğer yöntemlerle neden bunları kullanmak için, Eşyaları HTML dosyasını seçmek için gereklidir. Arama seçici $ () fonksiyonu aracılığıyla gerçekleştirilir. Örneğin, $ ( 'div').

seçiciler elemanların nasıl seçimine bağlı olarak sınıflandırılabilir:

• temel;
• özelliğe göre;
• hiyerarşi;
• içerik;
• Duruma;
• form alanlarının seçimi;
• diğerleri.

Anahtar seçiciler

Bu kütüphane, ana gruba ait JQuery seçiciye kullanılır kullanıldığında vakaların% 90'ında. Hepsi oldukça basit ve net. Bize her biri düşünelim:

• * - vs kafa, gövde, dahil olmak üzere tüm sayfa öğeleri seçer;.
• p / div / kenar çubuğu / ... - önceden belirlenmiş etiketine ilişkin tüm unsurları seçer (yani p.div, kenar çubuğundan, vb ... için);
• .myClass / p.myClass - Belirtilen sınıfı adıyla elemanları seçer;
• # MyID / p # MyID -. Belirtilen kimliğe sahip herhangi bir öğe seçer.

İşte bir örnek. en aşağıdaki gibi olacaktır par sınıf girişi ile sayfadaki tüm unsurları seçmek gerekir diyelim: (. par) $. Bu sınıfın yalnızca gerekli p elemanları, daha sonra yazarsanız: $ (p.par).

seçiciler özellik

herhangi sınıfı sahip kimliğine ait bir öğeyi seçin veya sayfadaki tüm unsurları seçmek gerekiyorsa, JQuery ana-seçicisini kullanabilirsiniz. Bir öğe hiçbir sınıf veya kimliği vardır Ancak, durumlar da vardır. Bunun içindir ve özelliğe göre seçimleri vardır. Bana, senin üzerinde bir seçim yapmak için izin HTML öğelerin özelliğinde böyle href veya src gibi. Bu özellik, yazılır köşeli parantez [].

En basit örnek: $ ([src]) - src özelliğine sahip tüm unsurları seçer. Belli nitelik değerini belirleyerek numune daraltmak mümkündür: $ ([src = 'http: // site / haber / 132222 / değer']).

Eğer seçim alanını daraltmak istiyorsanız bazı JQuery seçicileri kullanabilirsiniz. Örneğin, $ (s [color = blue] [boyutu = 12]) - mavi renk ve boyut 12 sahip olan elemanlar p seçilir.

Seçiciler içerik

Eğer nitelikleri veya bazik seçicileri dayalı unsurları seçemezsiniz eğer durumda, Kendisine ait içeriğin başvurmalıdır. Toplamda bu tip 4 seçici vardır:

• : İçeren - Belirtilen metni içeren öğeleri seçer;
• : - line karakteristik başka öğeler içeren elemanları seçer;
• : Ana - başka içeren elemanları seçer;
• : Boş - Başka içermeyen elemanları seçer.

İşte bir örnek. Merhaba metni içeren tüm unsurlar div seçmek için, $ yazmanız gerekir (div: 'Merhaba') (içeren).

Seçiciler hiyerarşisi

Onların hiyerarşiye göre (yani, HTML sayfasındaki birbirlerine oranı) - yani JQuery, öğeleri seçmek için başka bir yolu yoktur. Birçoğu, bu yüzden en popüler, "çocuk" ve "torun" iki sunuyoruz.

İlk durumda öğeleri belirli bir eleman (ata) soyundan (yavrularını) olan seçilir. $ (ül # nav> li.light): Örneğin, bir çocuk nav listesidir ışık sınıfta listenin elemanlarını seçmek için, o zaman yazmak gerekir.

İkinci vaka - daha genel. Orada seçilmiş ve elemanın dolaylı torunları edilebilir. Örneğin, nav reçete listesinin içindeki bağlantıları seçmek için: $ (ül # nav a).

Böylece, JQuery öğeler HTML-belge unsurların bir sınıf, kimliği, nitelikler, içerik veya hiyerarşi olarak parametreleri kullanarak çeşitli şekillerde seçilebilir.