JQuery ile CSS manipülasyonu

İle birlikte jQuery Kullanıcı etkileşimi düzeyinde birçok şeyi başarabiliriz. DOM ağacıAncak, akla gelmeyecek şeylerden biri, CSS manipülasyonu.
manipüle ederek CSS Ekranda gördüğümüz öğelerde, karmaşık işlevlere başvurmadan çok doğal ve akıcı bir şekilde değişiklik yapabiliriz. Javascript birkaç yıl önce yapmak zorunda olduğumuz gibi saf.
NS GÜNEŞ belgemizin düzenlenme şeklidir HTML, ekranda göstermek istediklerimize öngörülebilir ve hiyerarşik bir yapı vermemizi sağlar. Bu, tarayıcının belgeleri yorumlama şekli olduğu için çok önemlidir, ancak avantajımıza kullanabileceğimiz başka bir yön daha vardır; bu, üzerlerinde işlem yapmak için öğeleri bulabilmektir.
Bu nedenle, belirli bir öğe üzerinde değişiklik yapmamız gerektiğinde, GÜNEŞ Onu bulmak ve böylece içeriğini, stilini değiştirmek ve hatta gerçek zamanlı olarak belgeden çıkarmak için farklı yollar kullanabiliriz.
Bu, belgede bir işlem yaparken veya bir yanıt alırken bir öğeyi vurgulamamız gereken ve bu nedenle sayfayı değiştirmek veya tamamen yenilemek zorunda olmadığımız anlarda çok pratiktir.
Stil oluştururken en iyi uygulamalardan biri CSS sınıfları kullanmaktır, bununla, kodu tekrar tekrar yazmaya başvurmak zorunda kalmadan bağımsız olarak farklı öğelere uygulayabileceğimiz yönler oluşturabiliriz.
sınıf özelliğiBir öğenin bu stilleri alması için, onun niteliğine yerleştirmemiz yeterlidir. sınıf = "" ilgili sınıfın adı ve içine yazdığımız stil elemana uygunsa onu yansıtacaktır.
sınırlamaHer şey kulağa hoş geliyor ama bir sınırlama var, sayfa kaldırılırken stil yükleniyor ve yeni bir stil eklememiz gerekirse, normalde sayfanın yeniden yüklenmesi gerekir, bu nedenle kullanıcı için gezinme kesintisine neden olur.
jQuery tüm sayfayı yeniden yüklemek zorunda kalmadan söz konusu sınıfları gerçek zamanlı olarak belgeye dahil etme imkanı vererek bu sınırları atlamamıza izin veriyor, bunun için sadece yöntemi kullanmalıyız ekleSınıf () ve sınıfın adını iletin CSS şu an eklemek istediğimiz şey.
Adım adım küçük bir pratik örnek görelim ve ardından açıklananların tam kodunu göreceğiz:
1- İlk olarak isimli dosyamızı oluşturuyoruz. add-classes.html ve kütüphaneyi dahil edeceğiz jQuery, pratik amaçlar için doğrudan aramayı CDN yeterli, bu internet bağlantısı gerektirir, ancak dosyayı kaydedebilir ve yerel olarak sunabiliriz.
2- Ardından sınıflarımızı oluşturacağız CSSDeğişikliği daha iyi görebilmemiz için iki sınıf oluşturduk, her biri uygulandığı elementin arka plan rengini değiştiriyor ve her sınıf farklı bir renge sahip olacak.
3- Belgemizin gövdesinde iki tane oluşturuyoruz ve her birine, içinde onları tanımlayabileceğimiz bir kimlik atarız. GÜNEŞ seçiciler ile kolayca jQuery.
4- Sonra olayda olduğu bir öğe yaratırız tıklamada bir fonksiyon çağırmasını söylüyoruz Javascript.
5- Sonunda fonksiyonumuzu oluşturuyoruz Javascript, bu her öğeyi seçicisiyle ve yöntemle çağırır ekleSınıf () Başlangıçta oluşturduklarımızdan bir sınıf ekleyecek, bunu yaptığımızda değişikliği hemen göreceğiz.
Ne yapmamız gerektiğini tarif ettiğimize göre, kodu olduğu gibi göreceğiz:

 Sınıf Ekleİlk jQuery CSS bloğumuz
İkinci jQuery CSS bloğumuz
Sınıfları değiştirmek için tıklayın

Gördüğümüz gibi oldukça basit ve bunu tarayıcımızda çalıştırdığımızda, butona tıklamadan önce elemanların normal olduğunu ve tıkladıktan sonra renk değiştirdiklerini ve ilgili sınıfların nasıl eklendiğini göreceğiz. Aşağıdaki resimde neye atıfta bulunduğumuzu görelim:

BÜYÜT

Butona tıkladıktan sonra geçişi sayfamızda görselleştirebiliriz:

Bir sınıf ekleyebiliyorsak, bunun tersini de yapabilmeliyiz, yani onu kaldırabilmemiz için, bunun için jQuery bize yöntemi sağlar kaldırSınıf (), ve bu önceki örneğe çok benzer bir ilkeyle çalışır, biz sadece bir öğe yerleştiririz ve yöntem aracılığıyla belirtilen sınıfı kaldırması gerektiğini söyleriz, varsa kaldırılır, aksi takdirde hiçbir şey olmaz.
İşleri biraz daha ilginç hale getirmek için başka bir yöntemin kullanımını ekleyeceğiz ve bu sınıf kontrol yöntemidir, bu hasSınıf () bu, bir öğenin belirli bir sınıfı olup olmadığını doğrulamamıza izin verir, bununla koşullu ifadeleri kullanabilir ve mantığımızın gerektirdiği farklı deneyler yapabiliriz.
Bunun için birkaç fonksiyona sahip olacağımız küçük bir sayfa yapacağız, bir fonksiyon elemanın belirli bir sınıfı olup olmadığını doğrulayacak, eğer öyleyse kaldırılacak, ancak cevap olumsuzsa onu ekleyeceğiz. .
Bu bize, belirli değerleri ekleyip çıkarmadığımızı gerçek zamanlı olarak görebildiğimiz için, stiller ile dinamik olarak biraz oynama imkanı verir.
1- Bir önceki örneğe dayanarak sadece fonksiyonu yazdığımız kısma odaklanacağız. Javascript.
2- Fonksiyonun içinde iki koşul oluşturacağız, ilk önce ilk elemanla çalışacağız, önce koşullu bir blok ile soracağız Eğer () denilen sınıfa sahipseniz birinci sınıfEğer cevap olumlu ise remove class metodunu uygulayacağız, ancak elimizde class yoksa onu ekleyeceğiz, bu bize bir etki verecektir. değiştirmek.
3- İkinci eleman için bir önceki adımı tekrarlıyoruz ve böylece aynı şekilde davranmasını sağlıyoruz.
Aşağıda oluşturduğumuz yeni kodu görelim:

 Sınıf Ekleİlk jQuery CSS bloğumuz
İkinci jQuery CSS bloğumuz
Sınıfları değiştirmek için tıklayın

Şimdi programımızın yürütülmesinin nasıl olduğunu görelim, bu ilk resimde belgemizin nasıl göründüğünü göreceğiz. HTML İlk durumuna konsolu dahil ettik Krom böylece öğelerin nasıl değiştiğini fark ederiz:

BÜYÜT

Şimdi butona tıkladığımızda ve geçiş yapıldığında ne olacağını görelim:

BÜYÜT

İlk bakışta bu belge, bu eğitimde yaptığımız ilk belgeyle tamamen aynı şekilde çalışıyor gibi görünebilir, ancak tekrar tıklarsak yöntemin nasıl çalışacağını göreceğiz. kaldırSınıf ().
Yöntemin nasıl olduğunu da kontrol ettik. hasSınıf () çalışıyor, belki kullanıcının gördüğü hiçbir şeyi yapmıyor, ancak bize koşullu çalıştırma yeteneği veriyor. HTML.
Bize izin veren bir şey var jQuery ve bu, sınıflar arasında geçiş yapmaktır, bunun için yöntemi kullanıyoruz geçiş Sınıfı (), bununla elementimize, bir olayı tetiklediğimizde, listede zaten uygulanmışsa bir sınıf alacağını belirtebiliriz.
YararBu, durum değişiklikleri üzerinde çalışmak istediğimizde gerçekten kullanışlıdır, yöntem ile koşullu bir yapı yazmak zorunda kalmamak için bir tür kısayoldur. hasSınıfı (). Uygulaması şimdiye kadar gördüğümüz yöntemlere çok benzer, tek fark bir sınıf yerine bir boşlukla ayrılmış iki tane geçeceğiz.
Bakalım sadece fonksiyonu nasıl değiştireceğiz Javascript Bu yeni yöntemi dahil etmek için test belgemizin:
1- Elementlerimize bir başlangıç ​​sınıfı ekleyeceğiz, bu şekilde değişiklikler için bir başlangıç ​​noktamız olacak.
2- O zaman fonksiyonumuz içinde Javascript biz sadece yöntemi uygulayacağız geçiş Sınıfı () seçicisi aracılığıyla öğelerin her birine.
Uygulanan değişikliklerle kodumuzun nasıl göründüğüne bakalım:

 Sınıf Ekleİlk jQuery CSS bloğumuz
İkinci jQuery CSS bloğumuz
Sınıfları değiştirmek için tıklayın

Şimdi belgeyi ilk kez yüklediğimizde ne olacağını görelim:

Şimdi tekrar butona tıkladığımızda ne olacağını görelim:

BÜYÜT

Butona tıklamaya devam edersek sınıflar sınırsız dönüşümlü olarak devam edecek.
Bununla bu öğreticiyi bitiriyoruz, nasıl manipüle edebileceğimizi öğrendik. CSS doğrudan jQueryBununla, kullanıcı arayüzlerimizi işlevsellik açısından daha zengin hale getirmek için daha iyi fikirlere sahip olmaya başlayabiliriz.