激安!家電のタンタンショップはこちら!

参考URL

前提

  • jquery-1.2.6.pack.jsを使用します
このページはjqueryに興味をもった作者のtipsです(予定)。間違いがあればご指摘ください

jQueryのインストール

jQueryといっても正体はjsファイルなのでjsファィルをダウンロードして普通の外部jsファィルのように設定するだけ。
  • DLサイト
  • DL対象ファィル
    • Uncompressed(非圧縮。ソース解析用)
    • Minified and Gzipped
    • Packed(圧縮。ようするに改行とかがない)
→いずれかをDL

  • あとは例のごとくこんな感じ。
<script type="text/javascript" src="./ui/js/jquery-1.2.6.pack.js"></script>


クリックしても上部に飛ばないかつ、hoverの色とかCSSで制御したい場合

<a href="#" onclick="sample()">あああ<a>
としているとページが上部に一瞬戻ってからいくので見苦しい
また
<a href="javascript:sample()">あああ</a>
みたいにすると連打したときに"return false"となる場合もあったりする。
またaタグに対して以下のようなCSSを定義していた場合も含めて
処理をする。
a:link{color:#000000;}
a:visited{color:#000000;}
a:hover{color:#FFFFFF;}
a:active{color:#FFFFFF;}

  • まずリンク部をaタグをやめてspanに変更。適当なclassを設定
<span class="samplelink" onclick="sample()">あああ</span>
  • JQueryを使って記述
<script type="text/javascript" src="./ui/js/jquery-1.2.6.pack.js"></script>
<script language=javascript>
<!--
$(function(){
  $(".samplelink").mouseover(function(){
   this.style.color = "#FFFFFF";
    });
   (".samplelink").mouseout(function(){
   this.style.color = "#000000";
    });
   });
 -->
 </script>
※.(ピリオドはクラス名を指定)。thisでその対象だけにする。
  • CSSに以下を記述(最初の表示でリンクっぽくするため)
.samplelink{
   cursor:pointer;
   color:#0000000;
   text-decoration:underline;
}
最終更新:2008年06月06日 13:01