THE HAM MEDIA BLOG

jQueryの勉強:自作関数?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
勉強

jQueryの勉強:自作関数?

自作の関数ってどうやって作るんだろう?
どうやれば動くんだろう?

実はさっぱりわかっていなかったりします。

なので、今回は
魔法の鎖のつなぎ方(1) - [JavaScript]All About
これを見てお勉強することにしてみました。



サンプル

今回のは勉強するサイトにのっていたようにサンプルを作ってみます。

このブログのように、HTMLの途中でスクリプトを書いた場合、
サンプルを単に<script>の中に書いただけでは動作しなかった。
なので、$(function)を追加し、HTMLが読み込まれてから実行するようにし、
さらにbuttonをクリックしてから実行されるように組み直してみた。

■HTML

<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>
<button>実行!</button>

■JavaScript

$(function(){
$("div.preview button").click(function(){
    drawRed("div.testClass").animate({fontSize: "5em"},1000 ); 

    function drawRed(selector){
        $(selector).css("color","red");
        return $(selector);
    }
});
});

■プレビュー

DIVでtestClassです
DIVでnoTestClassです

PでtestClassです

どんな構造だ?

パッとみて、どういう構造しているのかよくわからなかった自分。
なのでいろいろいじってみた。その結果をまとめてみる。

  • ・return $(selector);が無いと動作しない。
  • ・selectorと名前を付けているところは全て同じでなければならない。
  •  ・selectorって名前じゃなくても、全て同じならなんでもいい。
  • ・drawRed()という風に括弧内を空にしてもエラーになる。
  • ・$(selector).css("color","red");を
       $("div.testClass").css("color","red");としても動作する。
  • ・$(selector).css("color","red");を削除した場合、色は変化しないがアニメーションする。

まとめてみると、
function drawRed(selector){
 return $(selector);
}

という風に指定をすると、■■(●●){return $(●●);}のうち、
■■と同じ名前の●●という指定部分を機能として実行するということだろう。

多分だけど、コールバックとかも含めて、
よくわかっていない事が多いから戸惑うのかなとも思ったり。。。

うーん、まだまだJavaScript自体の勉強も不足だから、戸惑う事が多そうだ。
もっと勉強せねば!



この記事へのコメント
ここで使っているselectorは引数ですね。

return $(selector);

がないと、

drawRed("div.testClass")

はnullを返すことになるので、

.css("color","red");

を実行できずにエラーになるわけです。
Posted by tokibito/nullpobug at 2008年09月13日
>tokibito
教えていただき、ありがとうございます!
調べてみたら、同じようなことが書いてました。
プログラミングもJavaScriptも
まだ半年くらいしか勉強できていないから、
まだまだ勉強不足だなーなんて思った。
というより、今まで固定の方法しかしらなかったのも、
自分としては問題だったのかも知れない。

・・・ちょっと反省。

そういえば、元気にしてますかー?
Posted by ハム at 2008年09月14日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。