jQueryの：find（）は
jQueryは、偉大なJavaScriptのフレームワークです。 あなたは彼と一緒に仕事する機会がなかった場合、私は次の出版物は、この特定のソリューションを活用するために奨励することを願っています。 複雑なソリューションを構築しやすいので - それは、最も興味深いのはおそらく多くの同様に多くのブラウザで彼を収容するためにコードを最適化する高速、ことを特徴としている。
今日の記事では、find（）は非常に有用な方法に焦点を当てます。
このフレームワークを扱っていない場合は、私が使用して、セレクターの基礎を自分で理解することを強くお勧め selectorówに公式のAPIを 、またはでBartosz Medoniaをすることによって調製jQueryの基礎コース 。 この知識は、非常に本明細書に示されるソリューションの理解を容易にします。
ベストのは、このメソッドのいくつかの具体例を紹介しています。 ほとんどのページで、メニューのナビゲーションのための基本的な要素の一つ。 我々には、JavaScriptをサポートする任意のブラウザでのコンポーネントとオペレーティングシステムの最小数を使用して独自のアニメーションメニューを作成しようとします。
最初の 要素の準備
空のHTMLドキュメントを作成してみましょう：
<DOCTYPE HTML PUBLIC " - / / W3C / / DTD XHTML 1.0暫定/ / 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>メニュー</ TITLE> </ HEAD> <BODY> </ BODY> </ HTML>
その後からjQueryの最新バージョンを取得 プロジェクトの公式サイト （本番）、我々のHTMLファイルのフォルダにコピーします。
このドキュメントの中に、いくつかのサンプルコンテンツを、我々のメニューを使用することができます。 このdiv要素やspanタグに使用されます。 もちろん、私たちのメニューの項目は、このようブロックに置いて、リンクでなければなりません。 全体は、id =メニューで、ブロックのdiv内に配置。 jQueryのスクリプトタグを使用してファイルを追加しました。 全体は次のようになります。
<div id="menu"> <DIV> HREF第1メニュー</ a> <SPAN> HREF＃1.1メニュー</ a> HREF＃1.2メニュー</ a> HREF＃1.3メニュー</ a> </ SPAN> </ DIV> <DIV> HREF第2メニュー</ a> <SPAN> HREF＃2.1メニュー</ a>を HREF＃2.2メニュー</ a> HREF＃2.3メニュー</ a>を HREF＃2.4メニュー</ a> HREF＃2.5メニュー</ a> </ SPAN> </ DIV> <DIV> HREF＃3メニュー</ a> <SPAN> HREF＃3.1メニュー</ a>を HREF＃3.2メニュー</ a> HREF＃3.3メニュー</ a>を HREF＃3.4メニュー</ a> </ SPAN> </ DIV> <DIV> HREF＃4メニュー</ a> <SPAN> HREF＃4.1メニュー</ a> HREF＃4.2メニュー</ a> </ SPAN> </ DIV> </ DIV> <！ - 終わり＃メニュー - > そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 そこにいくつかのサンプルコンテンツ。 全トラックsrc="jquery.js"> </ SCRIPT>
特に我々がマウスを移動しているブロックに応じて、jQueryのからそれらの多くにいかに簡単かをアピールする表示するメニューの多くの項目を入れた。
2番目の メニューの外観（CSS）を定義
このセクションでは、htmlファイル、コードブロックで使用されている外観を定義します。 私は、ヘッド部に位置し、スタイルに自分自身、次のコードを用意。
<style type="text/css"> <！ - * {マージン：0px、パディング：0px;} {テキスト装飾：なし;フォント：20pxのジョージア "はTimes New Roman"、タイムズ、セリフ;} はhtml、body {マージン：10pxの;} ＃メニュー{トップ：0px;フロート：左;幅：100％;} div要素＃メニュー{位置：相対;フロート：左;} アクティブは、div＃メニュー：＃メニューディビジョンリンクは、div＃メニュー：{ディスプレイ訪問：ブロック;位置：相対;のvertical-align：中央;背景：＃cccの;色：＃FFF;パディング：5pxの10pxの;幅：875;} div要素＃メニュー：ホバー{背景：＃999;} div要素＃メニュースパン{表示：なし;位置：トップ、絶対100％、左：0;フロート：なし;} div要素のdiv＃メニュー：＃、アクティブなメニューのdiv div要素：リンクは、div＃メニュースパン：訪問した{位置：相対;表示：ブロック;フロート：左;トップ：0px;背景：＃DDD;色：＃FFF;パディング：5pxの10pxの;幅：875;} div要素のdiv＃メニュー：ホバー{背景：＃999;} - > </ STYLE>
この例では、単純な2つのレベルのメニューを作成するが、何もそれらを変更し、任意の数のレベルに適応するための方法ではありません。
我々はこの時点であれば、あなたはまた、参照してくださいする必要がありcss'owegoメニューを作成するためのフレームワーク 。
3番目の プログラムの爪 - 見つける。
そのような措置により、私たちは、フルページのJavaScriptコードを実装するために用意されています。 述べたように我々はまた、セレクタを言って、知っています。 我々のケースでは、唯一の4つの主なメニューがあるので、この例では、非常に簡単ですが、それはそこに多くの可能性があり、それぞれが複数のブランチを持つことができることは想像に難くありません。 これは、ループメソッドを不適格にも個別にすべてのケースを検証した後、ブルートフォースを除外しています。 しかし、findメソッドのおかげで、問題の沸騰下に私たちのために、ジョブ全体を実行するコードのいずれかの非常に明確なラインに。 それは我々のJavaScriptコードは、$（文書）であったことをいいます。レディ、ページのロード時に、すべての外部スクリプト、スタイルおよびその他のファイルを我々はそれを参照して確保されます。
<script type="text/javascript"> <！ - / / <！[CDATA [ $（ドキュメント）。準備（関数（）{ $（ "部＃メニュー"）。ホバー（ 関数（）{ $（この）（ "スパン"）を見つけ、CSSは（{不透明度：0.98}）SlideToggle（ "速い"）;。 } 関数（）{ $（この）（ "スパン"）を検索SlideToggle（ "速い"）; } 。） }）; / /]]> - > </ SCRIPT>
私は上記のコードは下に我々は、jQueryを参照するscriptタグを、置くことをお勧めします。
メインセレクタで、div要素があるの内側には、id = "メニュー"のタグを参照してください。 方法。ホバー（）は、発生はマウス、選択した項目に侵入し、パラメータとして意味、このイベントの開始時に実行される1つまたは2つの関数を取ります。 第二の特徴はオプションであり、マウスが私たちの要素の領域を出るときに実行されます。 両方の関数は、読者に対して透過的ですが、私は既存のプロジェクトのコードを最小限に抑えることをお勧めするようにコードを導入しようとしました。
私たちは今、関数内のコードを分析してみましょう。 再び、ここでは、セレクタ、私たちが住んでいるテーマを参照してください。この時間を使用しています。それぞれは、この句によって対処することができますjQueryのセレクタを返します。 しかし、あなたが要素内にしたい場合は、一致するすべての要素を見つけて返します。Findメソッドを使用し、項目の内部項目を参照してください。 あなたが特定の項目を参照したい場合は、このようなクラスを使用しますので、このことを念頭に置いてくださいとアピールした後に（ "。ClassNazwa"）を検索します。 もちろん、見つけるの内側に、我々はまた、より複雑な構造体の要素と同様に、jQueryのセレクタを参照することがあります。
あなたが見ることができるように最初の機能は、メソッドはオブジェクトを返しますし、その透明度を変更見つけるの変更、メソッドのslideToggle（）を使用し、この場合には、アニメーションを開始されなければならない、それが表示されるように設定パラメータを決定するボトムに "降順"、アニメーションです。 要素の設定でなし（要素が不可視である、これを行うことができる唯一のことは、それを示すことであるスライド）。
第二の特徴では、すべて、それが既に変更されているので、我々はもはや、不透明度を変更する必要はないことを除いて、非常によく似ています。 我々を含む、jQueryの上でそれをやった CSSのために、W3Cのバリデータを完全に遵守を達成するような方法で、可能ではありませんし、その透明性は、JavaScriptをサポートしているすべてのモダンブラウザで正しく表示されていました。
第四 要約
この記事の目的は、それは、アニメーションメニューを作成する方法を学習する、しかし、多くの興味深い方法は、find（）に関する問題と同様に、jQueryを知っているなっていた。 機会が巨大であり、私はこの記事を読んだ後、それは少数の愛好家を得ることを願っています。
我々の仕事の効果が、我々は見ることができるデモンストレーションを 。
とても素敵な記事 - 非常に有用な方法は、jQueryを説明し、非常に実用的な例。 オールクリアで快適な、私は次のアーティストを待っている