Posted at

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

More than 5 years have passed since last update.

こんにちは。


勉強したことのメモ。

まず、そもそも論ですが


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>1番目</li>
<li>2番目</li>
<li>3番目</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>1番目</li>
<li>2番目</li>
<li>3番目</li>
</ul>

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

onclickイベントに定義したchangeColor()を呼び出すようにすれば

無事にいける~いけました~。

まだ他にも便利な方法(もっと簡略化とか)ありそう。

結構楽しくなってきました。

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