①html、 javasriptのツールの開発
→オンラインツールを使えるため、ツールのダウンロードが不要です。
https://jsfiddle.net/
②HTML分にHTMLソースを追加してから、実行する
<html>
<head>
<title>Hoge</title>
</head>
<body id="main-id">
<table>
<tr>
<td>hoge</td>
</tr>
</table>
</body>
</html>
イメージ
③HTMLのかわり、JQUERY(OOP)でページを表示する
①HTMLのTABLEがJQUERYのTABLEに変換する
②HTMLのTRがJQUERYのTRに変換する
③HTMLのTDがJQUERYのTDに変換する
//マインオブジェクト
var $main = $("#main-id");
//オブジェクトに変換する
var $table = $("<table>"); //テーブルオブジェクト
var $tr = $("<tr>"); //行オブジェクト
var $td = $("<td>") .html("hoge"); //カラムオブジェクト
//親オブジェクトに子オブジェクトを追加
$tr.append($td);
$table.append($tr);
$main.append($table);
イメージ
④実行した後、HTMLの表示の結果と同じ
⑤JQUERY(OOP)のclickのメソッド
var $table = $("<table>"); //テーブルオブジェクト
$table.click(function() {
//todo
});
var $tr = $("<tr>"); //行オブジェクト
$tr.click(function() {
//todo
});
var $td = $("<td>") .html("hoge"); //カラムオブジェクト
$td.click(function() {
//todo
});
以上