レイアウトデザイナーのjQuery(パート1):リンクの矢印

このミニ記事は、<a href=emplated jquery.com> jQueryライブラリーの初心者ユーザーが最初に興味を持つ非常にシンプルなものに専念します 。 各リンクに小さな画像を添付して目立つようにする方法を紹介します。





タスク番号1



最初のタスクは、右側の小さな「矢印」画像を各リンクに添付することです。これは、このテキストがリンクであることを示しています。 この機能を使用すると、ページのテキスト内のリンクをユーザーにさらに示すことができ、最も人気のあるインターネットリソースの1つであるWikipediaを含む多くのサイトで使用されます。 解決策は1行のみです(より正確には、標準の開始と終了を数える場合は3行)。



 $(ドキュメント).ready(関数(){
	 $( "a")。append( "<img src = 'link_arrow.png' />");
 });




$(ドキュメント).ready



それでは、その仕組みを見てみましょう。 イベントを処理するには、非同期メカニズムを使用します。つまり、このイベントが発生したときに呼び出す関数をメソッドに渡します。 処理している最初のイベントは$(ドキュメント).readyです。 これは、ドキュメントがロードされると、ドキュメントの処理準備が整ったときに発生します。 このイベントを従来のJavaScript window.onloadのイベントと非常に大まかに比較できます。 しかし、$(ドキュメント).readyは高速なので、スクリプトが機能するのに不要なWebページのすべての要素(大きな画像など)を読み込むのを待つ必要はありません。



$(...)



ここで、$(...)関数をより詳しく知る必要があります。 これはjQueryフレームワークの基礎であり、与えられた説明に従って、ページ上の必要な要素を見つけます。 「説明」という言葉を使用したのは無駄ではありませんでした。CSSとXPathの可能性がありますが、プラグインやその他の追加形式の助けを借りました。 つまり、$( "a")構造は、すべてのリンクのリスト、より正確にはタグ "a"の要素を検索します。処理が実行される現在の要素を選択するには、this変数を使用する必要があります。appendメソッドは、渡される行を右側に割り当てますパラメータ。

これで、ページ上のリンクには小さな矢印が付き、その画像はlink_arrow.pngファイルに保存されます。



しかし、熱心な読者は、純粋なCSSを使用してそのような効果を達成できると言うでしょう。また、Wikipediaページで外部リンクのみが矢印でマークされていることにも気付くでしょう。 これは、純粋なCSSを使用したサーバーコードなしでは実現できません(または、少なくともこのようなソリューション、特にクロスブラウザーを見つけることは困難です)。 より複雑な選択(外部リンクを含む)を行う方法については、次のパートで説明します。



PSまたは将来の計画



この記事が必要な場合は、jQueryマテリアルを処理することで行ういくつかのパートを公開しようとします。 タイプセッター、プログラマー(ハブに関するこのトピックに関する良い記事がありました)およびAJAX(jQueryの一部として)に関する資料があります。 記事のサイズは小さく、小さな実用的な問題に専念します。





記事のサイクル






All Articles