【jQuery】jQueryの形と、呼び出し方

こんにちは。

勉強したことのメモ。

まず、そもそも論ですが

jQueryはほとんどがWebページ(HTML)を

読み込んだあとではないと実行ができない。

まぁこれは以前JavaScriptでもご教授頂いたように、
先にJavaScriptを読んでしまうと、機能が動かない！
というのと同じですかね。

http://qiita.com/g_lay_tomohiko/items/d7e1efab29f7f2a62407
外部 JS を読み込むということは、そのタイミングで外部 JS を実行するということです。
結果として実行時点ではなんの要素も存在しない状態となります。

ではjQueryではどうか。

jQuery( function )
DOM要素が全て読み込まれた段階で、functionを返します。

※「"jQuery"は"$"に置き換えることも可能」

→$(function)

僕はずっとこっちで書いていました。

---

そしてではどうすれば、onclickとかで呼び出せるか色々試してみました。
もともとはページ内で完結させていて、実行させれば動く～みたいなのにしていましたが
せっかくなのでイベントも使いたいと思い、最初に書いたコード

※ダメだったコード

<ul> 
  <li>１番目</li> 
  <li>２番目</li> 
  <li>３番目</li> 
</ul>

<input type="button" onclick='function()' value="てすと">

 $(function(){
        $("ul li:even").css("color","blue");
        $("ul li:odd").css("color","red");
   });

これ、どうやってonclickで呼び出すんだ。

と、更に調べたところjQuery側で実行させているこの機能を
functionで定義させて上げました。

function  changeColor(){
   $(function(){
        $("ul li:even").css("color","blue");
        $("ul li:odd").css("color","red");
   });
}

おぉ、これなら

<ul> 
  <li>１番目</li> 
  <li>２番目</li> 
  <li>３番目</li> 
</ul>

<input type="button" onclick='changeColor()' value="てすと">

onclickイベントに定義したchangeColor()を呼び出すようにすれば
無事にいける～いけました～。

まだ他にも便利な方法(もっと簡略化とか)ありそう。
結構楽しくなってきました。

それでは、これからも宜しくお願いいたします。