JQuery ile DOM manipülasyonu

DOM ağacıNS DOM ağacı belgemizin içeriğinin hiyerarşik organizasyonudur HTMLBu, adı geçen belgede yer alan farklı öğeleri tanımlarken çok kullanışlıdır, çünkü benzersiz tanımlayıcılarla, benzer etiketlere sahip olmalarına rağmen farklı bir amacı olan yapılara farklı adlar atayabiliriz.
Geçmişteki sorun, köprüden kolayca geçmenin mümkün olmamasıydı. DOM ağacı gerçek zamanlı olarak, hantal rutinler ve işlevler oluşturulması gerektiğinden Javascript, ancak tüm bunlar görünümüyle değişti jQuery. Bu çerçeve, kullanımı için bir yaklaşım sağlamaya yardımcı oldu. Javascript uzman olmayanlar için popülaritesini yeniden artırdı.
Yapması çok karmaşık görünebilecek en ilginç şeylerden biri, bir elementin çocuklarıHiyerarşik bir yapıdan bahsettiğimiz gibi, babanın en yüksek unsur olduğu ve çocuklarının onun mantosu veya koruması altında yönetilen unsurlar olduğu bir aileden bahsedebiliriz.
Örneğin, sırasız bir listemiz veya öğemiz olduğunu varsayalım. , çocuklarının element olduğunu düşünmek mantıklı bir eleman seçmek istiyorsak içerebileceği Belirli bir liste çok karmaşık bir görev gibi görünebilir, ancak jQuery bunu çok basit ve temiz bir şekilde başarabiliriz.
yöntemlerBunu yapmak için, yalnızca ana öğemize benzersiz bir tanımlayıcı vermemiz ve ardından seçicisindeki yöntemi çağırmamız gerekir. çocuklar (), bununla, yöntemle gidebileceğimiz pozisyonu elde edeceğiz. her biri () çocuklarının her biri.
Aşağıdaki kodda neden bahsettiğimize dair küçük bir örnek görelim:

 JQuery ile DOM manipülasyonu

oğul 1
oğul 2
oğul 3

Denemek 

Her şeyden önce dahil ederek başlıyoruz jQuery itibaren CDN resmi, bununla dosyayı kaynak koduyla birlikte bilgisayarımızda saklamaya ihtiyacımız yok, bu nedenle bir tarayıcı ve bağlantı ile internet bu örneği kullanabiliriz.
Ardından, kimliği olan öğeye tıkladığınızda bunu belirttiğimiz küçük bir komut dosyası oluştururuz. Başlangıç içindeki kod çalıştırılır.
Yürütülecek kod basitçe, kimliğe sahip öğenin aranması gerektiğini ifade eder. baba ve bu seçiciye yöntemi uyguluyoruz çocuklar () çocuklarını bulmak ve nihayet yöntemle her biri () Her birinin üzerinden geçiyoruz, kod durumunda yolculuğu yapmamıza izin verecek üç tane var ve bu bize her birinin içerdiği metni göstermelidir. Yukarıdaki kodun tarayıcımızda nasıl çalıştığını görelim:

Düğmeye tıkladıktan sonra denemek ilkini görebiliriz Uyarı:

BÜYÜT

Uyarıları kapatmaya devam edersek, hiyerarşik yapıda yer alan tüm alt öğeleri göreceğiz:

BÜYÜT

Gördüğümüz gibi, sayfamızın yapısındaki öğelerin ele alınması hiç de karmaşık değil, bu, bu eğitimde görmeye devam edeceğimiz şeyler hakkında bize açık bir ağız veren küçük bir örnek.
Alt öğeleri bulmak oldukça faydalı olsa da, daha doğrudan arama yapmamızı sağlayan bir yöntem var. Git, dalgalar dersler. yönteme atıfta bulunuyoruz bulmak (), bu yöntem, onu çağıran seçicinin alt öğelerinin tüm eşleşmelerini bulur.
Bununla harika bir sahip olabiliriz ve ara bulmak () özellikle bir sonraki noktaya geldiğimiz sınıfları veya kimliği bulmak için.
Stilleri enjekte etİstenen öğeyi bulduktan sonra GÜNEŞ, çoğu zaman içeriğini bir şekilde vurgulamazsak yazdırmak istemiyoruz, ilginç bir yol da söz konusu öğeye bir stil eklemektir, bu bize öğeyi manipüle etmemize izin verecektir. CSS sayfamızın dolaylı olarak ve içindeki önemli unsurları vurgulayabilmek ve böylece belgemizde daha dinamik bir şey görebiliyoruz. HTML.
Aşağıdaki kodda metodun kullanımını nasıl uygulayacağımızı görelim. bulmak () ve sonra stil enjeksiyon bulunan elementler üzerinde, bu şekilde gerçek hayatta faydalı olabileceğimiz bir şeye yaklaşabiliriz:

 JQuery ile DOM manipülasyonu

oğul 1
oğul 2
oğul 3

Denemek 

Bu kodda, önceki numaraya çok benzer bir şeye bakarsak, değiştirdiğimiz şey, ilk etapta burada etiketin içeriğini bir öğenin çocuklarını geçmek yerine, yöntemi kullanıyoruz. bulmak () sınıfla bir öğeyi bulmak için vurgulamak ve bu elemana yöntemle css () İçine stiller enjekte edeceğiz, bu durumda onu kırmızı bir arka plan rengi olarak ayarlayacağız.
Butona tıkladığımızda tarayıcımızda nasıl göründüğüne bakalım denemek:

Bir elementin çocuğunun yerini tespit edebildiğimiz gibi, etkiyi hiyerarşinin zıt anlamında, yani bir elementten elde edebiliriz. oğlum babayı bulabiliriz. Bu, dinamik olarak oluşturulan uzun listelerde çok kullanışlıdır, çünkü bu şekilde ebeveynleri ihtiyaçlarımıza göre vurgulayabilir veya kullanabiliriz.
Ebeveynler () yöntemiBunun için yöntemimiz var ebeveynler () buna benzer bir şekilde çocuklar () çağrılan seçicinin ebeveynini bulur. Buna her () yöntemini eklersek, örneğin bir ise, elemanın tüm mirasını getireceğiz. elemanı getireceğiz ve hiyerarşide daha yukarıya, öğeye gidersek, öğeye ulaşana kadar bu böyle devam eder, çünkü hiyerarşiye göre hepsi içerdikleri şekilde ebeveyndir.
Aşağıdaki kodda nasıl bir komut dosyası oluşturabileceğimizi görelim. jQuery bu, seçtiğimiz öğenin tüm ebeveynlerini gösterme hedefine ulaşmamızı sağlar:

 JQuery ile DOM manipülasyonu

oğul 1
oğul 2
oğul 3

Denemek 

Yapı önceki örneklere çok benziyor, ancak burada bir değişiklik yapıyoruz, bu sefer sınıfı kullanıyoruz vurgulamak seçici olarak ve yöntemi uyguluyoruz ebeveynler () ve sonra bir her () ile içeriden dışarıya hiyerarşiyi geçebiliriz.
Tarayıcımızda çalıştırdığımızda yukarıdaki kodun nasıl göründüğünü görelim:

BÜYÜT

Bir önceki örnekte olduğu gibi, kapatmaya devam ettiğimiz sürece uyarılar gelene kadar öğenin tüm ebeveynlerini göreceğiz. HTML.
Önceki numara, bir elementin soy ağacını oluşturmamıza yardımcı olur, belki de hatalarımızı ayıklamamıza yardımcı olur. HTML, ancak belirli bir ebeveyn elde etmek istersek ne olur, örneğin birkaç listemiz varsa ancak belirli bir ebeveynin vurgulanmasını istiyorsak.
Endişelenmemeliyiz, bu durumda yöntemimiz var ebeveynlere kadar (), bununla bir varış noktası belirleyebiliriz ve HTML enjeksiyonu Tüm bloğu vurgulamak için, bu bilgiyi uyguladığımız aşağıdaki kodu görelim:

 JQuery ile DOM manipülasyonu

oğul 1
oğul 2
oğul 3

Denemek 

Bu kodun bir öncekinin küçük bir varyasyonu olduğunu fark edersek, asıl değişiklik az önce açıkladığımız yönteme yapılan çağrıda gerçekleşir. ebeveynlere kadar () Hangisine geçtik div, etkilediğimiz seçicinin üst öğelerini aramanın duracağı yer burasıdır.
Her şeyin çalıştığını göstermek için biraz enjekte ettik. HTML İşaretli bölümü kırmızı renkle boyamak için, tıkladığımızda tarayıcımızda bunun nasıl göründüğüne bakalım. denemek:

Daha sonra, yalnızca div'in olduğu bölümün kırmızı renkle renklendirildiğini görürüz, bu nedenle, öğe gibi doğrudan bir ebeveyne sahip olsa bile, belirli öğede üst öğeyi aramayı durdurduğumuzu gösteririz. bize aramanın gücünü gösteren DOM ağacı.
Bununla öğreticimizi bitirdik, tüm gücünün sadece küçük bir gösterimi. jQuery manipüle etmek GÜNEŞ bizden HTML, önemli olan, çok çalışmamız ve belgeleri çok iyi okumamız gerektiğidir, çünkü bununla birlikte, gelişme seviyemizi artırabilmek için ek bilgi ve kaynaklar elde edebileceğiz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.