jQuery入門 : 2009 : 1月

jQuery入門 No.4

2009 01月29日
コメントは受け付けていません。

┼─────────────────────────────┼
　jQuery入門 No.4
┼─────────────────────────────┼

┼─────────────────────────────┼
■目次
┼─────────────────────────────┼

　├ 全要素にアクセスする
　├ 複数の要素にアクセスする
　├ タグの内容を取得する
　├ Tips　入力文字数チェックのプラグイン(1)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■全要素にアクセスする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

$(“*”)
となります。

以下の例では枠線追加ボタンを押すと
全ての要素に枠線が付きます。
枠線削除ボタンを押すと全ての要素の枠線を削除します。

例1)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function writeStrings() {
        $(“*”).css(“border”, “2px solid blue”);
      }
      function deleteStrings() {
        $(“*”).css(“border”, “none”);
      }

    </script>
</head>
<body>
    <div>ここはdiv</div>
    <p>ここはp</p>
    <form>
    <input type=”button” value=”枠線追加” onClick=”writeStrings();” />
    <input type=”button” value=”枠線削除” onClick=”deleteStrings();” />
    </form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■複数の要素にアクセスする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

$(“要素1,要素2,要素3….”).
となります。
以下の例ではボタンをクリックすると、div, pタグの中のtextClassのみ
“jQueryを使ってみましょう”が記述されます。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function changeString(){
        $(“div,p.textClass”).html(“jQueryを使ってみましょう”);
      }
    </script>
</head>
<body>
    <p class=”textClass”>ここは変わります</p>
    <p>ここは変わりません</p>
    <div>ここも変わります</div>
    <form>
      <input type=”button” value=”変更” onClick=”changeString();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■タグの内容を取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

html()
text()

となります。

html()
は、htmlタグを含む文字列が取得できます。

text(“文字列”)
は、htmlタグを削除した文字列が取得できます。

以下の例では
html取得ボタンを押すと、<b></b>を含む文字列が
表示されますが
テキスト取得ボタンを押すと、文字列のみが
表示されます。

例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function getHtml() {
        alert($(“div”).html());
      }
      function getText() {
        alert($(“div”).text());
      }
    </script>
</head>
<body>
    <div><b>jQueryを使ってみましょう</b></div>
    <form>
      <input type=”button” value=”html取得” onClick=”getHtml();” />
      <input type=”button” value=”テキスト取得” onClick=”getText();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Tips　入力文字数チェックのプラグイン(1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQueryの入力文字数チェックプラグインを
利用してみましょう。

http://www.anon-design.se/demo/maxlength/

から

jquery.maxlength-min.js

をダウンロードします。

設定方法は

maxlength({オプション})

となります。
オプションは
“オプション名”:”設定値”
で設定します。

設定できるオプションは以下の通りです。

maxCharacters:最大文字数未設定時は10文字
status:ステータス（何文字入力できるか）を表示するかどうか
(TRUE/FALSE 未設定時はTRUE)
statusClass:ステータスdivのクラス名
statusText:ステータスに表示する文字列
notificationClass:最大文字数に達したときのクラス名
showAlert:アラートを表示するか(TRUE/FALSE 未設定時はFALSE)
alertText:アラートに表示するテキスト

以下の例では、フォームの入力1とコメント欄のステータスの文字を
指定し、コメント欄は文字数を指定しています。

例4)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
<script type=”text/javascript” src=”jquery.maxlength-min.js”></script>

</script>
</head>
<body>
<form>
<p>入力1:<input type=”text” id=”text1″ /></p>
<p>コメント:<textarea id=”comment”></textarea></p>
</form>
</body>
</html>

tips_admin jQuery

jQuery入門 No.3

2009 01月22日
コメントは受け付けていません。

┼─────────────────────────────┼
■目次
┼─────────────────────────────┼

　├ 階層(ancestor descendant)
　├ 階層(parent > child)
　├ タグの内容を書き換える

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■階層(ancestor descendant)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

記述方法

$(“祖先子孫”)
となります。

以下の例ではボタンをクリックすると、

<div></div>内の<p></p>部分の文字

“jQuery入門”

が変更されます。

例1)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードを記述します!
      function changeText() {
        $(“div p”).html(“クリックされました!”);
      }

    </script>
</head>
<body>
    <div>
      <p>jQuery入門</p>
    </div>
    <p>ここはかわりません</p>
    <form>
      <input type=”button” value=”変更” onClick=”changeText();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■階層(parent > child)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

記述方法

$(“親 > 子”)
となります。

以下の例では、ボタンをクリックすると
idが”main”の子要素に枠線が表示されます。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードを記述します!
      function changeText() {
        $(“#main > *”).css(“border”, “3px solid blue”);
      }
    </script>
</head>
<body>
    <div id=”main”>
      <p>jQuery入門</p>
    </div>
    <div id=”nonmain”>
      <p>ここはかわりません</p>
    </div>
    <form>
      <input type=”button” value=”変更” onClick=”changeText();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■タグの内容を書き換える
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

記述方法

html(“文字列”)
text(“文字列”)
となります。

html(“文字列”)
はhtml文章として書き換えます。

text(“文字列”)
はhtmlとしてではなくテキスト文章として
書き換えます。

以下の例ではボタンをクリックすると、

$(“.text1″).html(“<b>jQueryを使ってみましょう</b>”);

部分は強調文字で表示されますが、

$(“.text2″).text(“<b>jQueryを使ってみましょう</b>”);
部分は<b></b>部分もテキストとして表示されます。
例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードを記述します!
      function changeText() {
        $(“.text1″).html(“<b>jQueryを使ってみましょう</b>”);
        $(“.text2″).text(“<b>jQueryを使ってみましょう</b>”);
      }
    </script>
</head>
<body>
    <div class=”text1″>ここはhtml</div>
    <div class=”text2″>ここはtext</div>
    <form>
      <input type=”button” value=”変更” onClick=”changeText();” />
    </form>
</body>
</html>

tips_admin jQuery

jQuery入門 No.2

2009 01月16日
コメントは受け付けていません。

┼─────────────────────────┼
■目次
┼─────────────────────────┼

　├ 特定のIDにアクセスする
　├ 特定のタグにアクセスする
　├ 特定のクラスにアクセスする

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■特定のIDにアクセスする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

$(“#ID”)
のID部分にid=の後ろに記述したIDを記述します。

以下は創刊号と同じ例になります。

$(“#ID”)

部分は

$(“#about”)

です。

idがaboutになっている

部分に

“jQueryを使ってみましょう”

という文章が記述されます。

例1)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      window.onload = function(){
        $(“#about”).html(“jQueryを使ってみましょう”);
      }
    </script>
</head>
<body>
    <p id=”about”></p>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■特定のタグにアクセスする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

$(“タグ名”)
となります。

タグ名部分に div p などのタグ名を
記述します。

以下の例ではタグ名部分が
divとなります。

$(“div”)

部分に

“jQueryを使ってみましょう”

という文章が記述されます。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      window.onload = function(){
        $(“div”).html(“jQueryを使ってみましょう”);
      }
    </script>
</head>
<body>
    <div></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■特定のクラスにアクセスする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

$(“.クラス名”)
となります。

クラス名にクラス名を書きます。

以下の例では
<div class=”jQueryText”>ここが変わります</div>の

“ここが変わります”

部分が

“jQueryを使ってみましょう”

に変更されます。

例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      window.onload = function(){
        $(“.jQueryText”).html(“jQueryを使ってみましょう”);
     }
    </script>
</head>
<body>
    <div class=”jQueryText”>ここが変わります</div>
    <div class=”helloText”>hello</div>
    <p class=”jQueryText”>ここが変わります</p>
</body>
</html>

tips_admin jQuery

jQuery入門 No.1

2009 01月09日
コメントは受け付けていません。

┼─────────────────────────┼
■目次
┼─────────────────────────┼

　├ jQueryとは
　├ jQueryをダウンロード
　├ 記述方法
　├ 簡単な例

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■jQueryとは
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
JavaScriptライブラリの1つで、アニメーション機能の
プラグインなども豊富で今一番注目されているライブラリです。

このメルマガはjQueryを使った簡単な
例を紹介していきます。
jQueryを使ったサイト制作の足がかりになれば
幸いです。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■jQueryをダウンロード
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
まず、
http://jquery.com/
より
Downloadボタンを押して
ファイルをダウンロードします。

2009年1月7日現在は
jquery-1.2.6.min.js
です。
バージョンアップすると、1.2.6の
部分が変わります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■記述方法
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
htmlと同じ階層に置く場合、以下のようになります。
例1)
<html>
<head>
    <script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
    </script>
</head>
<body>
    <a href=”http://jquery.com/”>jQuery</a>
</body>
</html>

別のディレクトリに置く場合は

src=”jquery-1.2.6.min.js”

部分を

src=”ディレクトリ名/jquery-1.2.6.min.js”

に変更してください。
また、htmlファイルはUTF-8で保存します。

もしSJISで保存する場合は、

とし、文字コードの指定部分も
<meta http-equiv=”Content-Type” content=”text/html; charset=”shift_jis” />
とします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■簡単な例
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
htmlを表示させると、jQueryのリンクの下部分に
jQueryを使ってみましょう
という文章が表示されます。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      window.onload = function(){ $(“#about”).html(“jQueryを使ってみましょう”);
      }
    </script>
</head>
<body>
    <p id=”about”></p>
</body>
</html>
例2)を
test1.html
という名前で保存します。
なお、UTF-8で保存してください。