javascript

jQueryと「生の」javascriptの違い

考え方はXPathと似てるかも。 ①$(selector) //[jQuery Object] は複数のノードっぽいものをいっぺんに扱える。要素なりの集合と思えばいい。 [HTMLCollection]や、[NodeList]では、for文を使って一つ一つ処理する必要がある。

jQuery コア

Core $('selector'); $('selector', parent-element); === $('parent-element').find('selector'); $("raw html", An new map of attr).appendTo("body");

setTimeoutとsetIntervalの違い

setTimeout( "何か関数(メソッド)の呼び出しをするための記述", 500); 一回きり。setInterval(指定したい関数,指定時間); サイクル。 setIntervalはなにが起ろうが、他の処理に関係なく、1分ごとなので、 ビジー状態をおこすとえらいことになるので、あま…

createTextNodeの第一引数

特殊文字が入っていた場合、エスケープしてくれる。

オブジェクト指向2 コンストラクタとリテラル

引数があるとき。 コンストラクタ(型)何個も変数を作るとき、型、つまり、コンストラクタを使う。 function Calender(year, month) { this.theYear = year; this.theMonth = month; //関数の場合もあたかも変数のように同じように扱ってよい。 this.getCal…

ul, olの組み方。

var li = ul.getElementsByTagName("li"); var liGroupLength = Math.ceil(li.length / 5); // 分割後のliGroupの数 var ulGroup = []; for (var i = 0; i

style系での代入の注意

var style = div.style; [Object CSSStyleDeclarationObject] だと、style.border = "~~"; ト代入しても、普通に反映されるが、var styleBorder = div.style.styleBorder; [Object DOMStringObject] ト代入すると、 中身({..}の部分)が表示されることにな…

table要素作成 まとめ。

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <caption></caption> </table>こういうのを作りたい。 DOM Level2に独自のHTMLTableElementとか、いろいろあるので、 それを使う。まずは、 var table =…

関数について

function foo() { } var foo = function() { } foo() <- ()をつけると、関数になる。関数はオブジェクト。 var foo = new Object(); foo.name1 = hoge; foo.name2 = function() { }; は var foo = { name1 : hoge, name2 : function() {...}, } とおなじ。Ja…

javascript全体図

オブジェクト指向の実験1

var today = new Date(); //今日の日付は2011.3.22とする。 var toYear = today.getFullYear(); var toMonth = today.getMonth() + 1; var toDate = today.getDate(); today.setMonth(1); alert(toDate); /*Dialog:: toDate = 1 */ あまりに不細工なので、ク…

Node.appendChild(Node)の挙動

いま、 <div id="content"> //ここからjavascriptの描画部分 <img /> <span>testtest</span> //ここまでjavascriptの描画部分 <div>とする。 function $id(id) { return document.getElementById(id); } var content = $id("content"); var df = document.createdocumentFragment();で取得して、imgは迷</div></div>…

getElementsByTagNameとgetElementByIdの違い

まず一番目。 document.getElementsByTagName('a')は複数[NodeList Object]だが、 document.getElementById('main')は単数[HTMLElement Object]である。 二番目 document.getElementsByTagName('a')......OK div.getElementsByTagName('a')...........OK最初…

Node::childNodes 以下がうまく認識しない理由

<ul> <li>first </li> <li>second </li> </ul> で、ulをNodeオブジェクトとして、取得したとする。 この時、 ul.childNodes.item(0)とかがうまく認識されず、 ul.childNodes.item(0).innerHTMLとしても、undefinedと表示されて困ったので、まとめ。 どうやら、半角の空白が入ってしまう…

属性のvalueを取りだす

わけあって、 <ul> <li> <a href="./images/pct_01.jpg"> <img src="./images/thumb_01.jpg" title="都会的なデザインの地下道" date="2011/3/10" /> </a> </li> </ul>とXHTML標準ではないdate属性を使ったとする。 XMLに準拠する、XHTMLでは、ブラウザに認識はされないが、こういう書き方もOK で、 とりあえず、HTMLImageElementオブジェクトのvar imageを取りだしましたよ、とする。目下のところ、date…

<ul> <li> <a href="./images/pct_01.jpg"> <img src="./images/hogehoge.jpg" title="tekitou" /> </a> </li> </ul> </div>ってのがあったとして、 var ul = document.getElementsByTagName("ul").item(0); my alert = function(ev) { alert(ev.target); } ul.addEventListener("click", myalert, false);とかくと、[firefox3.7.x] ul上ではHT…