「jQuery1.2系開発メモ」の編集履歴（バックアップ）一覧はこちら

「jQuery1.2系開発メモ」(2008/06/06 (金) 13:01:46) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#contents()
----
**参考URL
http://www.mikage.to/jquery/
http://labs.unoh.net/2007/08/introducing_javascript_jquery.html
**前提
-jquery-1.2.6.pack.jsを使用します
 このページはjqueryに興味をもった作者のtipsです(予定)。間違いがあればご指摘ください
----
**jQueryのインストール
 jQueryといっても正体はjsファイルなのでjsファィルをダウンロードして普通の外部jsファィルのように設定するだけ。
-DLサイト
http://jquery.com/
-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;
 }

#html2(){{{{{{
激安！家電のタンタンショップは<a href="http://px.a8.net/svt/ejp?a8mat=1BZOP6+9HQU0I+24O+NV1XE" target="_blank">こちら！</a>
<img border="0" width="1" height="1" src="http://www13.a8.net/0.gif?a8mat=1BZOP6+9HQU0I+24O+NV1XE" alt="">
}}}}}}

#contents()
----
**参考URL
http://www.mikage.to/jquery/
http://labs.unoh.net/2007/08/introducing_javascript_jquery.html
**前提
-jquery-1.2.6.pack.jsを使用します
 このページはjqueryに興味をもった作者のtipsです(予定)。間違いがあればご指摘ください
----
**jQueryのインストール
 jQueryといっても正体はjsファイルなのでjsファィルをダウンロードして普通の外部jsファィルのように設定するだけ。
-DLサイト
http://jquery.com/
-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;
 }