HTML5 ve CSS3 Programlama için jQuery Nesneleri'ne Olayların Nasıl Ekleneceği - aumlalar

JQuery kütüphanesi, JavaScript'e son derece güçlü bir yetenek ekler. HTML5 ve CSS3 programcılarının herhangi bir jQuery nesnesine kolayca bir olay takmasına izin verir. Farmakale bir göz atın. html.

İmlecinizi herhangi bir liste öğesinin üzerine getirdiğinizde, öğenin etrafında bir kenarlık görüntülenir. Sıradan CSS'de elde edilmesi zor bir sonuç değil, ancak jQuery'de daha da kolay.

Nasıl fareyle üzerine gelme olayı eklenir

Nasıl çalıştığını görmek için koda bakın:

fareyle üzerine gelin. html $ (init); işlevi init () {$ ("li"). hover (border, noBorder);} / / end init işlevi border () {$ (this). css ("border", "1px solid black");} işlev noBorder () {$ (this). css ("border", "0px none black");}

Hover Demo

alfa
beta
gama
delta

HTML basit olamazdı. Bu sadece sırasız bir liste. JavaScript çok daha karmaşık değildir. Üç tek satırlı işlevden oluşur:

• init () belge hazır olduğunda çağrılır. Tüm liste öğelerinin jQuery nesnelerini yapar ve olayı onlara iliştirir. Hover () işlevi iki parametreyi kabul eder:

  • Birincisi, imleç nesnenin üzerine geldiğinde çağrılabilecek bir işlevdir.

  • İkincisi, imleç nesneden ayrıldığında çağrılabilecek bir işlevdir.

• border () geçerli öğenin etrafına bir kenarlık çizer. $ (this) tanımlayıcısı, geçerli nesneyi belirtmek için kullanılır.

• noborder () , border () işlevine çok benzer ancak geçerli nesneden bir kenarlığı kaldıran bir işlevdir.

Bu örnekte üç farklı işlev kullanıldı. Birçok jQuery programcısı, tüm işlevselliği tek bir satırda: $ ("li") içine alan anonim işlevleri (bazen lambda

işlevleri) kullanmayı tercih eder. css ("border", "0px none black");});}}}}))))}}}});

Bunun hala teknik olarak tek bir kod satırı olduğunu unutmayın. Zaten oluşturulmuş olan iki fonksiyona referans vermek yerine, fonksiyonları gereken yere derleyebilirsiniz. Her işlev tanımı, hover () yönteminin bir parametresidir.

Eğer bir bilgisayar bilimcisiyseniz, bunun bir lambda işlevinin mükemmel bir örneği olmadığını iddia edebilir ve doğru olurdunuz. Önemli olan işlevsel programlamanın bazı fikirlerinin (lambda işlevleri gibi) ana akım AJAX programlamaya sızmakta olduğunu ve bunun heyecan verici bir gelişme olduğunu fark etmektir.

anında sinekleri değiştirme

jQuery başka harika bir özelliği destekliyor.Bir CSS stili tanımlayabilir ve sonra o stili bir öğeye dinamik olarak ekleyebilir veya stilden kaldırabilirsiniz.

Kod, bu tür özelliklerin eklenmesinin ne kadar kolay olduğunu gösterir:

sınıf. html. sınırlanmış {border: 1px düz siyah}; $ (init); işlevi init () {$ ("li"). tıkla (toggleBorder);} / / bitiş init işlevi toggleBorder () {$ (this). toggleClass ("bordered");}

Sınıf Demosu

alfa
beta
gam
delta

Bu programı nasıl oluşturacağınız:

1. Temel bir HTML sayfasıyla başlayın.

   CSS ve JavaScript'te ilginç şeyler olur; bu nedenle sayfanın gerçek içeriği o kadar kritik değildir.

2. Eklemek ve kaldırmak istediğiniz bir sınıf oluşturun.

   Sadece eleman çevresinde bir sınır çizen bir CSS sınıfı oluşturabilirsiniz. Tabii ki, isterseniz her türlü biçimlendirmeyle daha sofistike bir CSS sınıfı oluşturabilirsiniz.

3. Bir init () yöntemini bağlayın.

   Görmeye başladıkça, çoğu jQuery uygulaması bazı türde başlatma gerektirir. İlk işlevi arayabilirsiniz. init ()

4. Kullanıcı bir liste öğesini tıklattığında toggleBorder () işlevini çağırın.

   init () yöntemi basitçe bir olay işleyicisi oluşturur. Bir liste öğesi click olayını aldığında (tıklandığında) toggleBorder () işlevi etkinleştirilmelidir. ToggleBorder () işlevi, sınırı ters çevirir.

   Bir öğenin sınıfını değiştirmek için jQuery'nin çeşitli yöntemleri vardır:

   • addClass () elemana bir sınıf atar.

   • removeClass () bir sınıf tanımını bir öğeden kaldırır.

   • toggleClass (), sınıfı değiştirir (şu anda bağlı değilse ekler veya aksi takdirde kaldırır).