jQuery: find ()
jQuery harika bir JavaScript çerçevedir. Onunla çalışmak için fırsat olmadı, ben şu yayını, bu özel çözüm yararlanmak için teşvik edeceğini umuyoruz. Kolay karmaşık çözümler oluşturmak için - bu en ilginç muhtemelen birçok yanı sıra birçok tarayıcı olarak onu karşılamak için kodu optimize, hız ile karakterize edilir çünkü.
Bugünkü yazıda find () çok kullanışlı bir yöntem üzerinde durulacak.
Bu çerçeve ile ilgili henüz, seni kullanarak, seçiciler temellerini daha yakından tanımak için çağırıyorum selectorów ilgili resmi API , ya Bartosz Medonia tarafından hazırlanmış olan jQuery temelleri elbette . Bu bilgi büyük ölçüde burada sunulan çözümlerin anlaşılmasını kolaylaştıracak.
En İyi Kullanıcı bu yöntemin bazı somut örnek alır. Çoğu sayfalarda, bir menü navigasyon için temel unsurlardan birisidir. Biz JavaScript destekleyen herhangi bir tarayıcı altında elemanları ve çalışma en az sayıda kullanarak kendi animasyonlu menü oluşturmak için çalışacağız.
Ilk Elemanlar hazırlanması
Boş bir HTML belgesi oluşturarak başlayalım:
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Menü </ title> </ Merkez> <body> </ Body> </ Html>
Sonra gelen jQuery son sürümü kapmak projenin resmi sitesi (üretim) ve HTML dosyaları bir klasöre kopyalayın.
Bu belge içinde, bazı örnek içerik ve menümüzü kullanabilirsiniz. Bu div ve span etiketleri için kullanılır. Tabii ki, bizim menüsünde bulunan öğeler, böylece bir blok yerleştirerek, bağlantılar olmalı. Bütün id = menü ile bir blok div içine koymak. JQuery script etiketini kullanarak dosya eklendi. Bir bütün bu gibi görünmelidir:
<div id="menu"> <div> href # 1 Menü </ a> <span> href # 1.1 Menü </ a> href # 1.2 Menü </ a> href # 1.3 Menü </ a> </ Span> </ Div> <div> href # 2 Menü </ a> <span> href # 2.1 Menü </ a> href # 2.2 Menü </ a> href # 2.3 Menü </ a> href # 2.4 Menü </ a> href # 2.5 Menü </ a> </ Span> </ Div> <div> href # 3 Menü </ a> <span> href # 3.1 Menü </ a> href # 3.2 Menü </ a> href # 3.3 Menü </ a> href # 3.4 Menü </ a> </ Span> </ Div> <div> href # 4 Menü </ a> <span> href # 4.1 Menü </ a> href # 4.2 Menü </ a> </ Span> </ Div> </ Div> <! - End # menüsünden -> Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. Orada bazı örnek içerik. <script type="text/javascript" src="jquery.js"> </ script>
Özellikle ne kadar kolay biz fareyi hangi blok bağlı olarak jQuery onları çok hitap edecek göstermek için menüsünde birçok öğe koydu.
Ikinci Menünün görünümünü (css) tanımlayın
Bu bölümde, HTML dosyası, kod bloklar halinde kullanılan bir görünüm tanımlar. Ben kafa bölümünde bulunan tarzı için, aşağıdaki kodu kendimi hazır:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} a {text-decoration: none; font: 20px Gürcistan, "Times New Roman ', Times, serif;} html, body {margin: 10px;} # Menü {top: 0px; float: left; width: 100%;} # Menüsünden div {:; şamandıra göreli: konum left;} Aktif, div # menüsü: # menüsünden bir div bağlantı div # menüsü: {display ziyaret: block; position: relative; vertical-align: middle; background: # ccc; color: # fff; padding: 5px 10px; width: 150px;} Div # menüsünden a: hover {background: # 999;} # Menüsünden div div {:;: mutlak, üst: 100%; left: 0; float: pozisyon yok display: none;} Div div # menüsünden a: active, # menüsünden div div a: link, div # menüsünden a a: visited {position: relative; display: block; float: left; top: 0px; background: # ddd; color: # fff; padding: 5px 10px; width: 150px;} Div div # menüsünden a: hover {background: # 999;} -> </ Style>
Örneğimizde, biz sadece basit iki düzey menü oluşturabilirsiniz, ancak bunları değiştirmek ve seviyeleri herhangi bir sayı adapte şekilde hiçbir şey yoktur.
Biz bu noktada iseniz, ayrıca bakmalıdır css'owego menü oluşturmak için çerçeve .
Üçüncü Programın çivi - bulabilirsiniz.
Bu tür önlemler, biz tam sayfa bir JavaScript kodu uygulamak için hazırlanmıştır. Belirtildiği gibi Biz de seçici söyleyerek, biliyorum. Bizim durumumuzda, sadece dört ana menü olmadığından örneğin, oldukça basit, ama orada daha fazla olabilir ve her biri birden fazla şubesi var olduğunu hayal etmek zor değil. Bu, sağılması niteliğini kaybetmesi de ayrı ayrı her durumda inceledikten sonra, bir kaba kuvvet dışlar. Ama bulmak yöntemi sayesinde, sorun aşağı kaynar bizim için tüm işi yürütmek kod çok net bir çizgi için. Bizim JavaScript kodu $ (document) olduğunu iyidir. Hazır, bunu bakın sağlanması, sayfa yüklenirken, tüm dış komut, stilleri ve diğer dosyaları.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Belge). Hazır (function () { $ ("Div # menüsünden"). Uçmak ( function () { . $ (Bu,) ("span") bul css ({opacity: 0,98}) slideToggle ("hızlı");.. } function () { . $ (Bu,) ("span") bul slideToggle ("hızlı").; } ); }); / /]]> -> </ Script>
Yukarıdaki kodu altında, biz jQuery bakın, hangi komut dosyası etiketi koymak öneririz.
Ana seçici olarak, id tag = "menü", bir div var olan iç bakın. Yöntem.) (Durun bir olay fare, seçili öğe işgal anlamına gelir ve parametreleri olarak, bu olayın başlangıcı sırasında gerçekleştirilen bir veya iki işlev alır. Ikinci bir özelliği, isteğe bağlıdır ve fare bizim elemanın alanı çıkarken gerçekleştirilir. Her iki işlevi okuyucuya şeffaf, ama mevcut projeleri kod minimize tavsiye böylece kod tanıtılmaya çalışılmıştır.
Şimdi işlevi içinde kod analiz edelim. Yine, burada seçici, biz yaşadığımız konu bakın bu kez kullanın. Her bu madde ile hitap edilebilir bir jQuery seçici döndürür. Ama öğesi içinde istiyorsanız, eşleşen tüm öğeleri bulur ve döndürür bul yöntemini kullanın, bir öğe içindeki öğe bakın. Belirli bir öğe başvurmak isterseniz, böyle bir sınıf kullanın çünkü, bunu aklınızda bulundurun ve itiraz sonrası. (". ClassNazwa") bulun. Tabii ki, bulmak içinde, aynı zamanda, daha karmaşık bir yapıya elemanları başvurmak gibi jQuery seçiciler olabilir.
Gördüğünüz gibi ilk özelliği, yöntemi bir nesne döndürür ve saydamlığını değiştirmek bulmak değiştirmek, sonra yöntemi slideToggle () kullanın, bu durumda, animasyon başlatılan edilecektir, bunu görüntülemek için belirlenen parametre belirler alt için "inen", animasyon Bir elemanın ayarlarında yok (bir eleman görünmez, bu yüzden yapabileceğiniz tek şey onu göstermektir kaydırın).
İkinci özellik ise, her şey zaten değiştirilmiş olduğundan biz artık, donukluk değiştirmek gerekir dışında çok benzer görünüyor. Bu da dahil olmak üzere, jQuery üzerinde yaptığı css çünkü, W3C validator ile tam uyum için gibi bir şekilde, mümkün olmazdı ve bu şeffaflığı destekleyen JavaScript tüm modern tarayıcılarda düzgün sergilendi.
4. Özet
Bu makalenin amacı, bu animasyonlu menüler oluşturabilirsiniz öğrenme, ancak,) yöntemi (bulmak ile ilgili birçok ilginç konular tanışmadan yanı jQuery gibi. Fırsatlar büyüktür, ve ben bu makaleyi okuduktan sonra, birkaç meraklıları elde umuyoruz.
Çalışmalarımızın etkisi, biz görebilirsiniz gösteri .
Çok güzel bir makale - çok kullanışlı bir yöntem jQuery açıklanan ve oldukça pratik bir örneğidir. Tüm açık ve hoş, ben sonraki sanatçılar için bekliyorum