JQueryを使わないといけないのでJavaScriptのおさらいとかしてみた。

a1180 007490 m 1024x776 JQueryを使わないといけないのでJavaScriptのおさらいとかしてみた。

覚書程度です。
JQuery使わないといけないのでちょっとまとめてみました。

JavaScriptの関数ーイベント

まずは

function func(){
     alert("helo world");
}

これをヘッダに書いておく

イベントをhtmlの中に書いておく

<input onclick="func();" type="button" name="btn" value="アラート" />

htmlにボタンをつくり、そのボタンを押下するとJavaScriptを呼び出すことになる。

こんな感じでイベントを呼び出して処理をさせます。

JQueryでは以下のように書く感じです。

$(document).ready(function(){
     $("button").click(function(){
          func();
     })
})

最初にロードしてクリックイベントを仕込んでしまうので厳密には違うかもしれませんがJQueryの場合だいたい要素を作るときにイベントも仕込んでしまう場合が多いので大体こんな感じと覚えておくとよいでしょう。

ちなみに「”button”」のところが要素の指定となります。

JavaScriptの関数ーonload処理

画面の部品をJQueryで作って表示させる場合はこのつくりが基本となります。

function func(){
     alert("helo world");
}

先ほどと同じ関数を使います

<input type="button" name="btn" value="アラート" onclick="func();"/>

とhtmlに書いてみます。

すると今度はhtmlを表示した瞬間にalertが出てきます。

これは以下と同じです。

$(document).ready(function(){
     func();
});

または

$(function(){
     func();
});

という形です。

JavaScript DOMとJQueryの表記

DOMというと以下のようなJavaScriptで要素がとれるお話になります。

document.getElementByID("id")
document.getElementsByName("name")
document.getElementsByTagName("Tag")

この辺を使ってちょっと以下のことを試してみましょう。

よくつかうgetElementsByNameを例にしてみましょう。

var elementName = document.getElementsByName("check");

これでhtml内のnameのcheckが一通り取得できます。

elemetNameは配列です。name要素は複数ある可能性があります。

たとえばhtml内の以下のような要素があったとします。

<input type="checkbox" name="check" value="apple" /><label>apple</label>
<input type="checkbox" name="check" value="orange" /><label>apple</label>
<input type="checkbox" name="check" value="pear" /><label>pear</label>
var elementName = document.getElementsByName("check");

for(i=0;i&lt;elementName.length;i++){
alert(elementName[i].value);
}

こういう関数を作って表示させてみてください。

おそらくapple、orange、pearが表示したと思います。

こんな感じでnameに紐づいた要素が取得できます。

この辺がDOMの基本になると思います。

参考書的な話題はほかにゆずって実践的な話をすると

elementName[i].value

をかえるといろいろなものがみれます。

たとえば

elementName[i].type

こうするとどうなるでしょうか?

“checkbox”が表示されます。

つまりelementName[i]がその要素自体をとってきて、そのtypeとかvalueとかとってこれるということです。

cssが設定されていれば「style」で取得できます。

さて、JQueryではどう表記されるでしょうか?

document.getElementsByName(“check”);

$(“[name=check]“);

で表記されます。

document.getElementsByID(“id”);

$(“#id”)

document.getElementsByTagName(“Tag”)

$(“Tag”)

となっています。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">