読者です 読者をやめる 読者になる 読者になる

javascriptのみでjqueryもどき

jqueryを呼ばずにjquery風に使う例。
以下の例ではメソッド html()を作成。他も同じように追加すればよさげ。

<script type="text/javascript">
<!--
(function(w) {
	var $ = (function() {
		var Fake = function(id) { return new Fake.init(id); };
		Fake.init = function(id) { this.id = id; this.el = document.getElementById(this.id); };
		Fake.init.prototype.html = function(s) {
			if (s === undefined) {
				return this.el.innerHTML;
			}
			this.el.innerHTML = s;
			return this;
		};
		return Fake;
	})();
	w.$ = $;
})(window);

function view_result(id) {
	$('view_result').html($(id).html());
}
// -->
</script>

<div id="view_result">
	<p>ここに表示されます。</p>
</div>

<div id="nodisplay" style="margin: 0; padding: 0; display: none;">
	<div id="test1">
		<h2>テスト1</h2>
		<p>テスト1です。</p>
	</div>
	<div id="test2">
		<h2>テスト2</h2>
		<p>テスト2です。</p>
	</div>
</div>

<ul>
	<li><a href="#" onclick="view_result('test1');">テスト1表示</a></li>
	<li><a href="#" onclick="view_result('test2');">テスト2表示</a></li>
</ul>