GINPRO / SQLの窓と銀プログラマ

$("#target1").val("この文字列を設定"); は、jQuery の value 属性対象の属性の扱いですが、特別な属性ですと、$("#target2").get(0).value のような参照になってしまいます。

そこで。

$("#target3")[0].value = "この文字列を設定" という書き方は、結構いいかも・・・って思ってます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$("#target1").val("この文字列を設定");
	$("#target2").get(0).value = "この文字列を設定";
	$("#target3")[0].value = "この文字列を設定";
});
</script>
<input type="text" id="target1">
<br>
<input type="text" id="target2">
<br>
<input type="text" id="target3">

document.getElementById が正当である事は解ってるのですが、とにかくタイプミスしやすいので、簡単に代替えされている方は多いと思うのですが、その手間を考えると、結局 Google が ホスティングしている jQuery を使ったほうが早いなぁ・・・といつも思います。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
// *************************************
// 代替コード
// *************************************
var $id = function(s) { return document.getElementById(s); }


// *************************************
// 代替コードを使う
// *************************************
function TestLocal() {
	alert( $id("mydata").value );
}

// *************************************
// jQuery を使う
// *************************************
function TestJquery() {
	alert( $("#mydata").val() );
}

</script>
<input type="text" id="mydata" >
<input type="button" value="Test local" onclick="TestLocal();">
<input type="button" value="Test jQuery" onclick="TestJquery();">

圧縮版だとデバッグできないので、ソース版をダウンロードして来てエラーが出るところで try 〜 catch 入れて console.log してみると、関数の引数が undefined になっているにも関わらず、その引数が string であるという前提でメソッドを使ってしまって『そんなものは無い』と言われてしまいます。

エラーそのものは検索すると、英語圏でのみ数多くヒットしますが、自分のコードで出た事に対する質問が多く、それならば対処も可能なのですが、jQuery のプラグインを使っていて起きたのではどうしようも無く、とりあえず 1.7.1 で運用して様子を見るしかありません。

その、プラグインのページへ行くと、何故か動いているのでよくよく調べてみると、goolge.load API を使っていて、何故か google では 1.7.2 は存在しない事になっていました。URL で直接参照は 1.7.2 は最新として存在するのですが、google.load で動的にロードする場合は、1.7.1 が最新扱いでした。やはり、 Google も 1.7.2 は問題ありと判断しているのかもしれません。

しかし、本家はそのまま 1.8.0 にバージョンアップした上に状況は変わっていないと言う事なので、何らかの jQuery である為の根本的な何かと考えられるので、古いプラグインはことごとく危ない・・・という事が考えられます。困ったなぁ・・・・

.text( function(idx,text){} ) で、テーブルの要素に一度にアクセスしています。中で text は その要素内の text で、return しなければ、元の TD の中が変更される事はありません。

ここでは、HTML 文字列をセットして、後で < や > を &lt; や &gt; に変換する処理を行っており、その時に .each を使ってすべて読み込んで、.html で参照しています。

alert( $(this).html() ) と alert( this.innerHTML) は同じ結果になります。

<script type="text/javascript" src="http://winofsql.jp/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

$(function(){
	$("#action").click(function(){
		// TD をすべて取り出す
		$("#tbl td").text(function(idx,text){
			if ( idx % 2 == 0 ) {
				// 先頭の列には、行番号をセット
				return (idx/2+1);
			}
			else {
				// ２列目には、HTML が含まれた文字列
				// ( return しなければ変更されない )
				return text+=idx+"<input />";
			}
		})
	});
	$("#disp").click(function(){
		// TD をすべて取り出す
		$("#tbl td").each(function(idx){
			if ( idx % 2 == 0 ) {
				// 先頭列はなにもしない
			}
			else {
				// ２列目の中身を 変換後の文字列として取得
				alert($(this).html());
			}
		})
	})
});

</script>

<style type="text/css">
#tbl td {
	padding: 20px;
	border: 1px solid #000;
}
</style>
<input id="action" type="button" value="実行">
<input id="disp" type="button" value="変換後表示">
<table id="tbl">
<tr>
<td></td><td>A</td>
</tr>
<tr>
<td></td><td>B</td>
</tr>
<tr>
<td></td><td>C</td>
</tr>
</table>

※ jQuery JavaScript Library v1.7.2 の中から。

正式ドキュメントでも、『the selector can be omitted』と書かれていますが、$() の かっこの中は、function 以外はなんでも良いみたいです。ドキュメントそのものでは３通りの書き方を示してはいますが、ソースの中では  function のみがこの目的の為の『セレクタ』として機能しています。

		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return rootjQuery.ready( selector );
		}

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)


これらの3通りの書き方は、2番目は "" でも null でも 未定義でも同じ結果となりますし、ソースコード上では違うところへ分岐しますが、document でも、windows でも結局は .ready メソッドを使った場合は結果は同じです。

後、 $(document).bind("ready", handler) に関しては、既に ready イベントが実行されてしまっていた場合は動作しないとあります。仕様上の意味は解りませんが、わざわざ使う構文でも無いと思います。やはりもっとも解りやすく正当なのは $(handler) だと思います。
( 3つの記法では、document.readyState === "complete" で即呼び出すようです。あと、load イベントの保険もあるみたいです / A fallback to window.onload, that will always work )

ready イベントの中身は、Mozilla, Opera and webkit nightlies currently support this event という但し書きで、DOMContentLoaded イベントを使用するとあり、IE の場合は同等のイベント(onreadystatechange)を実装してあります。・・・この詳細を読むと相当 IE はきかん坊のようです。
※ document.attachEvent で判断しているので、実際は、IE8 以前用の記述だとは思います 

具体的な意味

.ready() の意味は、load イベントがページがレンダリングされた後に実行されるイベントであるのに対して(画像などのすべての資産を完全に受信されるまで、このイベントがトリガされない)、DOMの階層構造が完全に構築された時に実行することができます。但し、CSSスタイルプロパティの値に依存するスクリプトを使用する際には、スクリプトを参照する前に外部スタイルシートまたは埋め込​​みスタイルの要素を先に参照することが重要だそうです。


.ready() 原文