SQLの窓

2015年08月05日


jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する

nextAll は、起点となる要素から下方向に存在する同じ階層の要素を全て取得します。引数にセレクタが指定できるので、ここでは TD にクラスを設定して目的の要素を特定していますが、特定する要素の属性が無い場合は、$(this).nextAll().eq(0).text() のようにして eq(順序番号) を指定して特定できます。

コード 名称 金額 購入日 担当者 発注先
0002 問題集 002 4000 2015/08/24 田中 発注先002
0003 問題集 003 3000 2015/08/23 山田 発注先003
0004 問題集 004 2000 2015/08/22 山田 発注先004
0001 問題集 001 1000 2015/08/21 田中 発注先001
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {

	$(".check").click(function(){
		$("#cd").val($(this).prevAll(".t0").text());
		$("#name").val($(this).text());
		$("#kin").val($(this).nextAll(".t1").text());
		$("#bdate").val($(this).nextAll(".t2").text());
		$("#tanto").val($(this).nextAll(".t3").text());
		$("#co").val($(this).nextAll(".t4").text());
	});

});

</script>
<style type="text/css">
.check {
	text-decoration: underline;
	cursor: pointer;
	color: blue;
	width: 100px;
}
#lboxtable input {
	width:100px;
}
#lboxtable table {
	margin-top: 10px;
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
}
#lboxtable th {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
}
#lboxtable .header {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
}
</style>
<div id="lboxtable">
<input id="cd">
<input id="name">
<input id="kin">
<br>
<input id="bdate">
<input id="tanto">
<input id="co">
<table>
    <tbody>
        <tr>
            <th>コード</th>
            <th>名称</th>
            <th>金額</th>
            <th>購入日</th>
            <th>担当者</th>
            <th>発注先</th>
        </tr>
        <tr>
            <td class="t0">0002</td>
            <td class="check">問題集 002</td>
            <td class="t1">4000</td>
            <td class="t2">2015/08/24</td>
            <td class="t3">田中</td>
            <td class="t4">発注先002</td>
        </tr>
        <tr>
            <td class="t0">0003</td>
            <td class="check">問題集 003</td>
            <td class="t1">3000</td>
            <td class="t2">2015/08/23</td>
            <td class="t3">山田</td>
            <td class="t4">発注先003</td>
        </tr>
        <tr>
            <td class="t0">0004</td>
            <td class="check">問題集 004</td>
            <td class="t1">2000</td>
            <td class="t2">2015/08/22</td>
            <td class="t3">山田</td>
            <td class="t4">発注先004</td>
        </tr>
        <tr>
            <td class="t0">0001</td>
            <td class="check">問題集 001</td>
            <td class="t1">1000</td>
            <td class="t2">2015/08/21</td>
            <td class="t3">田中</td>
            <td class="t4">発注先001</td>
        </tr>
    </tbody>
</table>
</div>



タグ:jquery
posted by lightbox at 2015-08-05 15:47 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年12月10日


jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル

JavaScript で要素を作成するとなると、createElement で作成する事になりますが、jQuery では直観的に HTML の文字列として作成するサンプルが jQuery の正式ドキュメントのいたるところで見る事ができます。

その際、大きく分けて二種類に分ける事ができますが、その差は親要素に対して実行するか、隣の要素に対して実行するかの違いになります。

.append と .prepend

append は、親要素の子要素として最後に挿入され、prepend は、先頭に挿入されます。さらに、appendToprependTo という、最初に挿入する要素を $("要素記述") で確定しておいて、appendTo( または prependTo )  でセレクタを指定して実行する二通りがあります。

後者のほうが、ソースコード上で作成される内容が最初に来るので意味が解りやすくなると思いますが、処理としては前者のほうが自然に記述できると思います。

.after と .before

afterbefore にも、insertAfterinsertBefore と言う、ペアとなるメソッドがありますが、append 等と違うのは、最初に指定する要素が隣の要素であるところです。しかし、親要素から、find メソッドで子孫全部から取り出したり、children メソッドで子要素だけを対象にする事もできるので、出来上がったコードが解りやすいかどうかの違いでしか現れません。どちらを使ってもいいと思います。

移動について

既存の jQuery のオブジェクト同士で実行すると移動になるので、この場合は一行で書かずに変数を使用して移動の対象と移動先を明確にしたほうが良いでしょう

置き換えについて

使い方のペアとして replaceWithreplaceAll というメソッドがあり、現在の要素の種類そのものを置き換える事ができます。ここでは、TD を TH に置き換えて、TH に対するスタイル設定が有効になるサンプルになっています。
一行目 タイトル

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#tbl {
	border: solid 2px #000000;
	border-collapse: collapse;
	margin-top:10px;
}
#tbl td {
	border: solid 1px #0000ff;
	padding:10px;
}
#tbl th{
	border: solid 1px #0000ff;
	padding:10px;
	background-color: #c0c0c0;
}
</style>
<input type="button" value="処理開始" id="test_start">
<table id="tbl" stryle=''>
<tr>
	<td>一行目</td>
	<td>タイトル</td>
</tr>
</table>

<script>
$("#test_start").click(function(){
	// テーブル内の td の背景色が全て 白 になります
	$( "#tbl" ).find("td").css( "background-color", "#ffffff" );

	// tbody のみが背景色赤になります
	$( "#tbl" ).children().css( "background-color", "red" );

	alert("一番外側の要素(table)の子要素(tr)を追加");
	$( "#tbl" ).append("<tr><td>10</td><td>20</td></tr>");

	alert("一番外側の要素(table)の子要素(tr)を先頭に挿入");
	$( "#tbl" ).prepend("<tr><td>11</td><td>21</td></tr>");

	alert("一行目/タイトルの次に行を挿入");
	$( "#tbl tr" ).eq(1).after("<tr><td>12</td><td>22</td></tr>");

	alert("一行目/タイトルを先頭に移動");
	var target = $( "#tbl tr" ).eq(1);	// タイトル部分
	$( "#tbl tr" ).eq(0).before(target);

	alert("一行目/タイトルを TD から TH に変更");
	$( "#tbl tr" ).eq(0).find("td").each(function(){
		var txt = $(this).text();
		$(this).replaceWith("<th>" + txt + "</th>");
	});
});

</script>


タグ:jquery
posted by lightbox at 2014-12-10 16:22 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年07月06日


jQuery の .contents と .children の違い

メソッドとしては、.children に引数としてセレクタが使えますが、.contents との本来の違いは、.contents には、テキストノードが含まれることです。

▼ 英文ドキュメントの記述
The .contents() and .children() methods are similar, except that the former includes text nodes as well as HTML elements in the resulting jQuery object.
以下のように DIV を対象にして実行すると、.contents では、文章を取り出す事ができます ※ コードのテスト
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// テキストノードが含まれる
	$( "#text_div1" )
		.contents()
		.each(function(){
			console.log(this);
		});

	// テキストノードが含まれない(HTMLのみ)
	$( "#text_div2" )
		.children()
		.each(function(){
			console.log(this);
		});

});
</script>
<div id="text_div1">
	今は昔、竹取の翁といふ者ありけり。
	<br><br>
	野山にまじりて竹を取りつつ、よろづのことに 使ひけり。
	<br><br>
	名をば、さぬきの造となむいひける。
</div>

<div id="text_div2">
	今は昔、竹取の翁といふ者ありけり。
	<br><br>
	野山にまじりて竹を取りつつ、よろづのことに 使ひけり。
	<br><br>
	名をば、さぬきの造となむいひける。
</div>




タグ:jquery
posted by lightbox at 2014-07-06 22:12 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年07月05日


jQuery の .children で、直近の子要素のみを選択して処理する

一般的には、セレクタを使って、ある特定の要素の中の全ての特定要素を取得できますが、要素内の次のレベルのみ取得したい場合は、.childlen を使用して、引数にセレクタを渡します。以下の例では、一番上のボックスがなにもしない状態で、2番目のボックスで jQuery の最初のセレクタで level-2 内の全ての li 要素を取得しています。

そして、3番目のボックスで次のレベルにある li 要素だけを取り出しています。

※ 最初の検索は、$( "#levelTarget1 .level-2" ).find("li") でも可能です
  • I
  • II
    • A
      • 1
      • 2
      • 3
      1. 1
      2. 2
      3. 3
    • B
  • III
  • I
  • II
    • A
      • 1
      • 2
      • 3
      1. 1
      2. 2
      3. 3
    • B
  • III
  • I
  • II
    • A
      • 1
      • 2
      • 3
      1. 1
      2. 2
      3. 3
    • B
  • III

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

$( "#levelTarget1 .level-2 li" )
	.css( {
		"background-color": "pink",
		"width": "300px",
		"padding": "10px",
		"border": "1px solid #123456",
		"border-radius": "5px"
	});

$( "#levelTarget2 .level-2" )
	.children("li")
	.css( {
		"background-color": "pink",
		"width": "300px",
		"padding": "10px",
		"border": "1px solid #123456",
		"border-radius": "5px"
	});

});
</script>
<style>
.level-1 {
	width:450px;
	border: 1px solid #c0c0c0;
	padding: 10px 0 10px 30px;
	border-radius: 10px;
	box-shadow: 0 15px 30px -15px;
}
</style>
<ul class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>
<ul id="levelTarget1" class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>
<ul id="levelTarget2" class="level-1">
	<li>I</li>
	<li>II</li>
	<ul class="level-2">
		<li style="background-color:#fff">A</li>
		<ul class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ul>
		<ol class="level-3">
			<li style="background-color:#fff">1</li>
			<li style="background-color:#fff">2</li>
			<li style="background-color:#fff">3</li>
		</ol>
		<li style="background-color:#fff">B</li>
	</ul>
	<li>III</li>
</ul>



タグ:jquery
posted by lightbox at 2014-07-05 20:53 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年07月04日


jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う

この方法では、任意の集合に対して複数の条件を OR で処理を行う事が想定されます。
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6
.filter()

この .filter 例は、最も良く使う方法としての、セレクタでの選択例です。.filter は、対象となる jQuery オブジェクト集合の中で、さらに選択範囲を狭くするという機能です。その機能に対応して、.end によって filter の範囲選択を解除して元の jQuery オブジェクト集合 に戻します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	$( "#listitems li" )
		// **********************************
		// まず偶数だけを対象にします
		// **********************************
		.filter( ":even" )
		.css({ 
			"background-color": "#123456",
			"color": "#aaaaaa",
			"padding": "10px",
			"width": "300px"
		})

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 再度全体から奇数を対象にします
		// **********************************
		.filter( ":odd" )
		.css({ 
			"padding": "10px",
			"width": "300px"
		})
		.text("OK")

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 全てに対して、輪郭線と角丸を設定
		// **********************************
		.css({ 
			"border": "solid 1px #c0c0c0",
			"border-radius": "8px"
		})


});

</script>
<ul id="listitems">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

jQuery のドキュメントでは、function を使用した例が多く掲載されています。function の中で条件を設定して、対象ならは true を return するように書かれています。これはすぐ理解できますが、DOM のリストと jQuery のオブジェクトを引数とした場合は少し解りづらいので以下のように具体例を作成しました。

elements とは、その意味の通りではありますが、ここでは配列として動作を確認しました。jQuery はそのままの意味で、セレクタで選択されたものが対象となりますが、セレクタを使うのであれば最初が filter の引数にすれば良いので、既に変数として存在するか、関数内で引数で渡されている事を想定すればいいと思います。
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	$( "#listitems2 li" )
		// **********************************
		// まず DOM で選択
		// **********************************
		.filter( [document.getElementById("d1"), document.getElementById("d2")] )
		.css({ 
			"background-color": "#123456",
			"color": "#aaaaaa",
			"padding": "10px",
			"width": "300px"
		})

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 再度全体から jQuery で選択
		// **********************************
		.filter( $("[id*=j]") )
		.css({ 
			"padding": "10px",
			"width": "300px"
		})
		.text("OK")

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 全てに対して、輪郭線と角丸を設定
		// **********************************
		.css({ 
			"border": "solid 1px #c0c0c0",
			"border-radius": "8px"
		})


});

</script>
<ul id="listitems2">
  <li id="jquery1">list item 1</li>
  <li id="d1">list item 2</li>
  <li id="jquery2">list item 3</li>
  <li id="jquery3">list item 4</li>
  <li id="d2">list item 5</li>
  <li id="jquery4">list item 6</li>
</ul>


タグ:jquery
posted by lightbox at 2014-07-04 21:49 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")








要素(エレメント)を動的に作成するのは、DOM では document.createElement です。もちろんそれでも使えますが、jQuery では至極簡単に $("要素の記述") で作成されます。作成されただけでは画面に所属しないので( 表示されない )、.appendTo( 既に存在する要素 ) として親要素の1番目の要素として登録します。

その後は、必要な属性・値・CSS・イベント・前後の補正を追加して完成させます。
	// ************************************
	// a 要素を作成して、
	// anchorContent の子要素として追加する
	// ************************************
	$("<a></a>").appendTo( $("#anchorContent") )

		// ************************************
		// 属性として id と href と target の値をセット
		// ************************************
		.attr({
			"id": "anchorContent1",
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})

		// ************************************
		// テキストノードとしての値をセット
		// ************************************
		.text("Google")

		// ************************************
		// 表示関連の属性をセット
		// ************************************
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"text-decoration": "none",
			"color": "navy"
		})

		// ************************************
		// イベントをセット
		// ************************************
		.click(function(){
			console.log("アンカーがクリックされました");
		});


二つ目以降は、最初のアンカーに対して、.insertAfter する事によって繋いで行きます。ここでは、親要素が PRE なので、二つ目以降は改行する為に最後に .before("\n\n") を追加しています。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function(){

	// 通常リンク
	$("<a></a>").appendTo( $("#anchorContent") )
		.attr({
			"id": "anchorContent1",
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})
		.text("Google")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"text-decoration": "none",
			"color": "navy"
		})
		.click(function(){
			console.log("アンカーがクリックされました");
		});
	

	// ボタンがわり
	$("<a></a>").insertAfter($("#anchorContent1"))
		.attr({
			"id": "anchorContent2",
			"href": "#"
		})
		.text("ボタンのかわり")
		.css({
			"font-size": "20px",
			"font-weight": "bold"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました1");

			window.open("https://translate.google.co.jp/?hl=ja&tab=iT");

			// クリックする事によって起こる # の機能をキャンセル
			event.preventDefault();
		})
		.before("\n\n");

	// jQuery UI でアンカーをボタン化
	$("<a></a>").insertAfter($("#anchorContent2"))
		.attr({
			"id": "anchorContent3"
		})
		.button()
		.text("jQuery UI でアンカーをボタン化")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "10px"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました2");

			window.open("https://www.google.co.jp/maps/preview?hl=ja");

			// クリックする事によって起こるかもしれない処理をキャンセル
			event.preventDefault();
		})
		.before("\n\n");

});

</script>

<pre id="anchorContent"></pre>




タグ:jquery
posted by lightbox at 2014-07-04 14:54 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年07月03日


jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます

二つ並んでいるボタンと DIV をクリックすると、それぞれが click イベントによって、ピンク色になります。

一番下のボタンは、それらの定義済みの click イベントを一行で全て呼び出しています。但し、その時に色コードを渡しているので、結果としてピンクでは無く濃い灰色に変化します。

※ この場合の一括用セレクタは "[id*=target]" です。
※ パラメータは配列で渡し、イベント側でその数ぶんの仮引数を定義します。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// 拡張パラメータにより、単独か trigger か判断できます
	$( "#target1" ).click( function( event, color ) {
		console.log( $( this ).val() );
		if ( color ) {
			$(this).css("background-color", color  );
		}
		else {
			$(this).css("background-color", "#ffc0c0"  );
		}
	});

	// 拡張パラメータにより、単独か trigger か判断できます
	$( "#target2" ).click( function( event, color ) {
		console.log( $( this ).val() );
		if ( color ) {
			$(this).css("background-color", color  );
		}
		else {
			$(this).css("background-color", "#ffc0c0"  );
		}
	});

	$( "#div_target" )
		.css({
			width: "300px",
			height: "30px",
			border: "1px solid #000000",
			"border-radius": "8px"
		})
		// 拡張パラメータにより、単独か trigger か判断できます
		.click( function( event, color ) {
			console.log( "クリックされました" );
			if ( color ) {
				$(this).css("background-color", color  );
			}
			else {
				$(this).css("background-color", "#ffc0c0"  );
			}
		});

	// **************************************************
	// trigger で呼び出した場合は、拡張パラメータを使用
	// するようにしているので単独でクリックした時と色が
	// 違います
	// **************************************************
	$( "#all" ).click( function() {
		// id に target の文字列を含む要素の click イベントを呼び出す
		$( "[id*=target]" ).trigger("click", [ "#c0c0c0" ] );
	});

});

</script>

<input type="button" id="target1" value="この文字を表示するボタン1">
<input type="button" id="target2" value="この文字を表示するボタン2">
<div id="div_target"></div>
<br>
<input
	type="button"
	id="all"
	value="上のコンテンツの click イベントを呼び出すボタン">
jQuery ドキュメント : .trigger


posted by lightbox at 2014-07-03 10:52 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年03月25日


JavaScript と jQuery : 位置関係から id の無い要素の参照を取得

SELECT 要素の後に、ボタンがあるとして、ボタンから SELECT要素を参照するのに、両方の要素を DIV で囲みます。

id を付けてしまえば簡単ですが、いくつも埋め込む前提ですと面倒です。このユニットで閉じてしまえる参照のほうが場合によっては便利です。

とりあえず、jQuery でも同じ機能を実装してみましたが、parent と children のメソッドでいずれもセレクタが使用できます。ただ、parent は特殊で、ここでは this の parent は一つしかありませんが、最初の jQuery オブジェクトが複数の場合、それぞれの親の中から選択するのが parent( "セレクタ" ) のようです。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<div>
   <select>
      <option value="http://winofsql.jp/download/WinOfSql102.zip">SQLの窓 Build C++</option>
      <option value="http://winofsql.jp/download/hanbaib.zip">簡易販売管理用DBデータ</option>
   </select> 
   <input type=button value="JavaScriptのみで取得" onclick='
         var a = this.parentNode;
         alert( a.getElementsByTagName("select")[0].value );
      '
   >
   <input type=button value="jQueryで取得" onclick='
         var a = $(this).parent().children("select").eq(0)
         alert( a.val() );
      '
   >
</div>



関連する記事

JavaScript : 同一階層(または下の階層)の要素を親経由で参照する


posted by lightbox at 2014-03-25 21:23 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年02月27日


JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する

ブログシステム側で作成される HTML 要素には name や id が付いていないものもたくさんあり、class が付く事は良くありますが、何も無い要素もたくさんあります。

そのような要素はその要素の親から getElementsByTagName で取得するのが一般的です。child のつながりで取得すると、不要なテキストノードとかが混じって、ブラウザによって結果も違うからです。

class で取得する場合は、IE に関してだけバージョン制限があり、IE9 以上で getElementsByClassName が使用できます。

しかし、結局のところこういう IE の事情により jQuery を使う事が最も簡単な解決方法となります。

3) は目的の要素にクラスがあるので使用していますが、もし無ければ順序番号で参照する事になります。jQuery のままで順序番号を使用するには、4) のように .eq(n) を使います。ただ、この程度の参照であれば、5) のように jQuery から DOM に変更して .value プロパティを使うのもいいと思います。、
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src='" + window[window.location.hostname+'.loadjQuery'] + "'></"+"script>");
}
</script>
<table>
<tr>
<td>
	<input
		class="message"
		type="text"
		name="jtext"
		value="こんにちは"
	>
	<br>
	1) <input
		type="button"
		value="getElementsByTagName"
		onClick='
			alert( this.parentNode.getElementsByTagName("input")[0].value );
		'
	>
	<br>
	2) <input
		type="button"
		value="getElementsByClassName"
		onClick='
			alert( this.parentNode.getElementsByClassName("message")[0].value );
		'
	>( IE は 9以上 ) 
	<br>
	3) <input
		type="button"
		value="jQuery parent and children 1"
		onClick='
			alert( $(this).parent().children(".message").val() )
		'
	>
	<br>
	4) <input
		type="button"
		value="jQuery parent and children 2"
		onClick='
			alert( $(this).parent().children().eq(0).val() )
		'
	>
	<br>
	5) <input
		type="button"
		value="jQuery parent and children 3"
		onClick='
			alert( $(this).parent().children()[0].value )
		'
	>
</td>
</tr>
</table>




1)
2) ( IE は 9以上 )
3)
4)
5)
この例では、name 属性で getElementsByName で取得できますが、name はページ内で複数存在する可能性も無いわけでは無いので、コードが見えている範囲だけで言えば、このほうが確実となります

関連する記事

JavaScript と jQuery : 位置関係から id の無い要素の参照を取得


タグ:javascript
posted by lightbox at 2014-02-27 18:38 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2014年02月11日


jQuery の .val() と .val('値') と一括変更用の .val(関数)

.val() はとても解りやすい便利なメソッドです。ちなにみに alert( $('#a1').val ) とすると .val メソッドのソースの内容が表示されます。

.val('値') もその逆ですから普通に使えてしまいますが、.val( 関数 ) はちょっと解りづらいです。関数が返した値で、オブジェクトの値を書き換えるのですが、その関数内では対象となったオブジェクトのインデックスと値が順次渡される仕様となっています。jQuery のドキュメントでは、無名関数で書かれていますが、以下のサンプルでは checkVal 関数として独立して定義して使用しています。関数内ではその時対象となるオブジェクトも参照できるので、使い方としては対象となるオブジェクトの値をキー(id)に対して明細を全て表示するような処理で使えます。( 明細は、XMLHttpRequest 等で取得 )
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<input class="action1" type="text" id="a1" value="lightbox" />
<input class="action1" type="text" id="a2" value="lightbox" />
<script type="text/javascript">

// val の引数として与える関数のサンプル
// もちろん無名関数でも良い
function checkVal( index, value ) {
	console.log(this.id);
	alert( index + "|" + value + " : これは入力フィールドのインデックスと現在の値です" );
	return( '変更' );
}

function action1() {

	// 現在の値の取得
	var x = $('#a1').val();

	// 表示
	alert("この値は、id=a1 の入力フィールドの現在の値です => "+x);

	// 現在の値を変更
	$('#a1').val('123');

	// 内容を変更する関数を呼び出す
	// input を両方変更するように、
	// index が変化しながら全て呼び出される
	$('input.action1').val(checkVal);

}

</script>
<input type="button" value="実行" onclick='action1();'>


もう少し具体的なサンプル

jQuery の .val(関数) を使用した、社員コードに対する明細データの表示サンプル


posted by lightbox at 2014-02-11 05:30 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2013年12月06日


jQuery の 名前空間に、Flash のバージョンをチェックするメソッドを追加( 戻り値が 0 なら Flash なし )

$.getFlashVarsion(11) のようにして実行しますが、引数は現在インストールされているであろう Flash の最大値を指定します。実際より大きくても問題ありません。

戻り値には実際のバージョンが返りますが、もしインストールされていない場合は 0 が戻ります。

実際問題、自分は Google Chrome 以外で Flash をインストールしていないので、このような処理が必要になりました。
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script>
$.extend({
	getFlashVarsion:function(top) {
		var objFlash,i;
		var description,flashPlugin;

		if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1 || window.navigator.userAgent.toLowerCase().indexOf("trident/") > -1 ) {
			for( i = top; i >= 5; i-- ) {
				try {
					objFlash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + i );
					break;
				}
				catch( e ) {
					if ( i == 5 ) {
						i = 0;
						break;
					}
				}
			}
		}
		else {
			i = 0;
			if ( navigator.plugins && navigator.plugins.length > 0) {
				flashPlugin = navigator.plugins['Shockwave Flash'];
				if (typeof flashPlugin == 'object') {
					description = flashPlugin.description;
					for( i = top; i > 4; i-- ) {
						if (description.indexOf(i+'.') != -1) {
							break;
						}
					}
					if ( i == 4 ) {
						i = 0;
					}
				}
			}
		}

		return i;

	}
});

// 確認処理
console.log($.getFlashVarsion(11));

</script>



posted by lightbox at 2013-12-06 21:53 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2013年02月21日


$.extend メソッドで jQuery の中に処理を書いて、その中で使ったデータをグローバルで使えるようにする

重要な事

$.extend( object, object ) で、前のオブジェクトに後のオブジェクトが追加されます。ですから、前のオブジェクトに $ を指定し、後のオブジェクトに { メソッド名 : function(引数) {処理} } を指定すればいい事になります。

グローバル変数に使う

また、この extend では、単純な変数としての JSON オブジェクトに利用して、window.mydata = {} として空のオブジェクトをグローバルに作っておいて、jQuery の内部で処理したデータを extend メソッドで追加させます。

そうすると、(ここでは)後から mydata.ken と mydata.hour と mydata.browser で参照できる事になります。



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.mydata = {};

$.extend( $, { myfunc: function( url, target, item ) {
		$.ajax({
		// javascript の実行分を書いたテキストを呼び出す
			url: url,
			cache: false,
			dataType: "json"
		}).done( function( result, textStatus, jqXHR ) {
			// result がそのまま JSON オブジェクトです
			$.extend( window.mydata, result );
			var op = null;
			for( var i = 0; i < result[item].length; i++ ) {
				op = document.createElement("option");
				$(op).append(result[item][i]);
				$(target).append(op);
			}
		});
	}
} );

$(function () {

	$.myfunc("http://lightbox.on.coocan.jp/ken.php", "#target1", "ken" );
	$.myfunc("http://lightbox.on.coocan.jp/hour.php", "#target2", "hour" );
	$.myfunc("http://lightbox.on.coocan.jp/browser.php", "#target3", "browser" );

	console.dir(mydata);

});

</script>

<select id="target1">
</select>
<hr />
<select id="target2">
</select>
<hr />
<select id="target3">
</select>

文法的に重要なところ

result[item] は、最初の処理では result.ken と同じ内容を参照をします。JavaScript のオプジェクトのプロパティの参照方法は、識別子として参照する方法と、["文字列"] という連想配列(のようなもの)として参照する方法があります。

ですから、後者では動的(文字列変数を使って)に JSON の内部を参照可能になります
ken.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';

?>

hour.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"hour" : ["1時間","2時間","3時間","4時間","5時間","6時間","7時間","8時間","9時間","10時間","11時間","12時間","18時間","19時間","20時間","21時間","22時間","23時間","24時間"]}';

?>

browser.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"browser" : ["chrome","firefox","ie6","ie7","ie8","ie9","ie10","safari","opera"]}';

?>

php を使用しているのは、Access-Control-Allow-Origin: * を出力する為で、これによって、別ドメインからのデータの読み込みを JavaScript( クライアント ) から可能になります。

ですから、IE8 や IE9 以外( それより前は論外 ) ならば、このコードを普通に実行して、データがセットされたコンボボックスを作成する事が出来るはずです。





posted by lightbox at 2013-02-21 10:00 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2012年02月04日


jQuery のイベント名によるイベント登録の中身

以下のように、each メソッドで登録されています。引数が無い場合は trigger 処理となり、イベント登録は、on メソッドで行われているので return arguments.length > 0 の部分でその判断をしています。

※ bind でも on メソッドで登録されています。
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		if ( fn == null ) {
			fn = data;
			data = null;
		}

		return arguments.length > 0 ?
			this.on( name, null, data, fn ) :
			this.trigger( name );
	};

	if ( jQuery.attrFn ) {
		jQuery.attrFn[ name ] = true;
	}

	if ( rkeyEvent.test( name ) ) {
		jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
	}

	if ( rmouseEvent.test( name ) ) {
		jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
	}
});

※ jquery-1.7.1.js



タグ:jquery
posted by lightbox at 2012-02-04 02:30 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2012年02月03日


jQuery の each メソッドの『秘密の使い方』

本家のドキュメントにその記述が無かったんですが、ソースを読むと明らかに二通り
の使い方がありました。一つは、ドキュメントの通りに each の引数はコールバック
のみを渡して、第一引数はインデックス番号で、第二引数は this と同じものが使え
るというものです。

しかし、もうひとつでは each の引数にはコールバックともうひとつ配列を渡せるよ
うになっていて、その場合はそれぞれのコールバックの引数には配列の値が一つ一つ
渡されるというものです
<a href="#" target="_blank">001</a>
<a class="test" href="http://winofsql.jp" target="_blank">001</a>
<a class="test" href="http://toolbox.winofsql.jp" target="_blank">002</a>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
<script type="text/javascript">
// ドキュメントに無い使い方
$(".test").each(function(i,me){
	console.log(i+" "+me.href+" "+this.href);
},['これは',{href:"秘密の使い方"}]);

// 普通の使い方
$(".test").each(function(i,me){
	console.log(i+" "+me.href+" "+this.href);
});
</script>

以下はその該当部分( jquery-1.7.1.js )
※ callback.apply で呼び出しています

// args is for internal usage only
each: function( object, callback, args ) {
	var name, i = 0,
		length = object.length,
		isObj = length === undefined || jQuery.isFunction( object );

	if ( args ) {
		if ( isObj ) {
			for ( name in object ) {
				if ( callback.apply( object[ name ], args ) === false ) {
					break;
				}
			}
		} else {
			for ( ; i < length; ) {
				if ( callback.apply( object[ i++ ], args ) === false ) {
					break;
				}
			}
		}

	// A special, fast, case for the most common use of each
	} else {
		if ( isObj ) {
			for ( name in object ) {
				if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
					break;
				}
			}
		} else {
			for ( ; i < length; ) {
				if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
					break;
				}
			}
		}
	}

	return object;
},

この中では、each に渡されるオブジェクトが length の無い通常オブジェクト
も想定されているのですが、$( {} ) では動作しませんでした。もし、その場合
で動くのであれば、インデックスのかわりにプロパティ名が渡る事になっていま
す。
( ※ 動作しなかったと言うのは、配列扱いされてしまっていたという事です )


タグ:jquery
posted by lightbox at 2012-02-03 15:18 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする

2011年07月24日


jQuery のイベント登録。.bind() で総合的に基本路線

オブジェクトで複数のイベントを一度に登録していますが、一つづつ登録
しても同じ事です。ただ、大は小を兼ねるのでこの方法をまず最初に頭に
入れておくといいと思います。また、関数内で必ずしも jQuery のオブジ
ェクトを使う必要も無いので、this を直接使用しています


▼ このコードをソースコードから実行してみる
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<div id="jq_test_dev1" style='width:100px;height:100px;border:solid 1px #000'></div>
<script type="text/javascript">
$('#jq_test_dev1').bind( 
	{
		click: function() {
			alert("click");
		},
		mouseenter: function() {
			this.style.backgroundColor = '#555';
			this.style.cursor = 'pointer';
		},
		mouseleave: function() {
			this.style.backgroundColor = '#AAA';
			this.style.cursor = 'arrow';
		}
	}
);
</script>


posted by lightbox at 2011-07-24 00:27 | jQuery メソッド | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり