JavaScript の履歴(No.11)

もはや入力チェックやアラートダイアログを出すだけの存在ではない！

Chromeでデバッグ†

https://app.codegrid.net/entry/breakpoint-1

クラスの定義†

// この一文でprototypeプロパティが使えるようになる
function Foo() {};
// ここで定義を代入。
Foo.prototype = {
    init:function() { alert('A');},
    test:function() { alert('B');}
};

// newして使う必要があるのか･･･
var foo = new Foo();
foo.init();

function Foo() {};
Foo.prototype = {
    init:function() { alert('A');},
    test:function() { alert('B');}
};
Foo.A = function()
{
    alert('A is static');
}
Foo.B = function()
{
    alert('B is static');
}
// newして使う必要があるのか･･･
var foo = new Foo();
foo.init();
// prototypeをはさまないとそのまま実行可能！
Foo.A();
Foo.B();

↑

便利なライブラリ†

↑

Prototype.js†

一昔前の主流

↑

JQuery†

2009年現在はこちらのほうがよろしいらしい。

http://www.slideshare.net/hayatomizuno/jquery-7665168

↑

プラグインの作り方†

http://web-terminal.blogspot.jp/2012/11/jquery4.html

↑

onLoadで動かす。†

$(function () { alert('test'); });

↑

タイマーを仕込む†

setInterval(function(){ alert('test'); },10000);

↑

指定の要素の数をカウントする。†

if ($('#探したい場所のID .その配下のクラス').length > 0) { alert('test'); }

↑

関数が定義されているかをチェックする†

alert(typeof($.cookies.set));

定義されていればobjectとでる。

↑

Jqueryのセレクタ†

LI要素

$('li')

LI要素かつクラス名hoge

$('li.hoge')

LI要素かつIDhoge

$('li#hoge')

子孫セレクタDIV contentsのLI

$('DIV#contents LI')

子セレクタ DIVの直下のLI

$('DIV#contents > LI')

グループセレクタ(カンマで区切る)

$('#first, #third")

Aタグのhref要素を回す

$("a[href]").each(function(){
}

DIV#hoge以下のAで絞るバージョン

$("DIV#hoge a[href]").each(function(){
}

チェックボックスをすべてOFF

$("input[type='checkbox']").removeAttr( 'checked' );

チェックボックスをすべてON

$("input[type='checkbox']").attr( 'checked', 'checked' );

クラス名hoge以下クラス名fuga以下のチェックボックスOFF
```
$(".hoge .fuga input[type='checkbox']").removeAttr( 'checked' );
```

↑

属性セレクタ†

href属性を持つものを取得

$("[href]")

href属性がhogeであるもの

$("[href='hoge']")

href属性がhogeで始まる、終わるもの

$("[href^='hoge']")
$("[href$='hoge']")

↑

フォームの操作†

値の取得と設定

$("input").val();
$("input").val("初期値");

↑

変更関連（フォーカスON,OFF,変更)†

$("input").("focus",function(){});
$("input").("blur",function(){});
$("input").("change",function(){});

↑

フォーム用のセレクター†

input[type='text']
input[type='password']
input[type='radio']
input[type='checkbox']
input[type='submit']
input[type='image']

↑

セレクトされたもの、チェックされたもの†

:selected
:checked

↑

Joose†

↑

その他†

↑

Rhino†

JavaでかかれたJavaScript実装。J2SE6.0から標準添付