jQueryについて

らら
らら

jQueryとは

JavaScriptコードをより簡単に記述できるように作成された。JavaScriptライブラリになります。

JavaScriptとは、オブジェクト指向で作成され、Window オブジェクト、 Documentオブジェクト、 Event オブジェクト、Navigator オブジェクト、Console オブジェクト等で構成されます。

JavaScriptでは

正式にはwindow.document.getElementByID()ですが、一般的には、windowは省略可能でdocument.getElementByID()で表記されることが多いです。

windowはブラウザ全体を表し、documentはHTMLを表示する領域を表します。ブラウザーの戻る・進むのある操作部はNavigatorの領域を示します。

window.navigatorで表記されます。windowが省略されることが多いので関連が分かりずらく。なんでこのときはwindowつくのとか・・

.で区切られる先頭が親・その下を子表現され（ノード）、その単位でオブジェクト化されています。

DOM(Document Object Model)で表現される部分はwindow.documentの部分でJavaScript、JQueryで追加されたHTMLタグを追加した場合、実際にHTMLコードで展開された時点のことをDOMを構築されたとかDOMが展開されたという表現になります。

JavaScript記述すると下記のように記述が長くなってしまうので


window.document.getElementByID('test');

jQueryでは、下記のように省略して記述できます。


$('#test').val();

また、JavaScriptの記述などブラウザーによって異なる場合などあったため、制作者側がブラウザーの依存を意識することなく記述できたことがメリットでもあります。

jQueryの前には、prototype.js というものを使用していましたが、prototype.js自体にウィルスが混入されていたケースがあり、弊社では、そこの時点でjQueryに切り替えましたね。

その後、多くのjQueryプラグインが作成されメジャーになりました。

現在、JavaScriptではECMAScript 2015　ES6というバージョンになってから

var をletなど記述方法が異なってきました。

JavaScript 1.0からJavaScript 1.3

その後　ECMAScript(ES)に代わっています。

JavaScript自体Don't break the Webという概念で作成されているので、phpのように、過去の記述がつかえないなど多分ないとは思いますが・・

DOMを意識したHTMLインデント


<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>sample</title>
	</head>
	<body>
		<header>
		</header>
		<section>
			<p>test1</p>
			<p>test2</p>
		</section>
		<footer>
			<a href="https://omakase.net">omakase</a>
		</footer>
	</body>
</html>

DOMのツリー。便宜上、インデントで表現しています。


DOCTYPE
HTML
	HEAD
		META
		TITLE
			text:sample
	BODY
		HEADER
		SECTION
			P
				text:test1
			P
				text:test2
		FOOTER
			A
				href:https://omakase.net
				text:omakase

はじめに

まずは、DOMは上記で説明しましたが、ここではJavaScriptのonloadとreadyの説明をします。

ここは、重要です。

readyはDOMがロードされて操作・解析が完了された場合になります。この時点では(重要)画像は読み込みされていません。

onloadは、readyの状態プラス。画像が読み込みが完了した状態になります。

これをjQuery,JavaScriptの記述方法を並べます。


//①
$(function(){
});
//②
jQuery(function(){
});
//③
$(document).ready(function(){
});
//④
$(window).load(function () {
});
//⑤
$(window).on('load', function() {
});
//⑥
window.onload = function() {
}

①②③同じ ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行

④⑤⑥DOMがロードされ画像などの関連データの読み込みが完了後処理を実行　⑤はjQueryV3では使用できなくなりました。

⑥はJavaScript記述です。jQueryを使わない場合はこちらで。

なので、①②③は書き方だけで動作は同じ

①に注目すると、よくネット上のホームページソースで下記の記述があると思いますが。readyの時に発火しますよ？何個も

まぁ。HTML、JavaScriptではコードの上から順番に実行されるインタプリタで動作するので順番に実行されますが。

一番最後のなんか処理３が強いですね。こういうのは１つにまとめましょう！


$(function(){
	//なんか処理１
});
$(function(){
	//なんか処理２
});
$(function(){
	//なんか処理３
});

下記に


$(function(){
	//なんか処理１
	//なんか処理２
	//なんか処理３
});

コードは一番上から順番に実行される話をしましたが、①②③④⑤⑥のいずれかで記述して処理を括った場合、コードの最後まで実行され。

実際のHTMLコードがレンダリングされたか。画像がすべてレンダリングされたかの時点で呼び出しされます。

ネット記事とかでは</body>の直前にjavascript書きましょうとかありますが、これを理解していればそういったことがありません。たぶん

ただ、javascriptでは最近。非同期する設定ができますので、そちらに関しては特別扱いになります。

さて、それでもよく、画像の高さとか取得できないとかありますよね。その時にも</body>の直前に書いたら動いたとか・・

その場合は、①②③の記述ではなく、④⑤⑥の記述を使用すれば、内に記述できます。

</body>の直後は広告コードのためにあけておいたほうがよいと個人的には思います。

あと、上から順番にという点も問題になります。

これは高さ取得できませんよ。


$(window).load(function () {
	//画像の高さ取得処理
	//なんか処理
	//その高さを取得する画像をDOMで吐き出し
});

こんな感じ


$(function(){
	//高さを取得する画像をDOMで吐き出し
	//なんか処理
});
$(window).load(function () {
	//画像の高さ取得処理
});

こちらでもタイミングによって出ない場合も、その場合は、DOMした画像が読み込まれたか判断してから取得するようにします。

画像だけでなく、jQueryで当然タグを追加することでも同様です。ready,load,コードの記載順など見直しましょう。

実際、複数のプラグインなど使用する場合、そのコードが実際なにをしているのかわからないので、そういったコードの最後のほうに記述するようにしたほうがよいですね。

今回は、便宜上、上記記述をしています。

これも動作しません。


<script>
$(function(){
	なんか処理１
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

これですよね。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
	なんか処理１
});
</script>

たまに、大手のＨＰでも、複数異なる、jqueryバージョンを設置しているとか。大体、<head>と</body>の直下に別々にあったりと。

これも注意して宣言を１つにしましょう。多分、サンプルでどこからか、持ってきて、そのままとかなんですかね・・


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
	なんか処理１
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
	なんか処理２
});
</script>

ＣＭＳで便宜上head以外にコード中に書く場合でも、とかしておけば、readyのタイミングで呼んでくれます。画像はloadですね。


<div id="test"></div>
<script>
$(function(){
	$('#test').val()
});
</script>

多くの問題は、上記を理解していれば、解決すると思います。

jQuery・javascriptおぼえがき

ajaxでとって、evalでjavascript変数化


//ajaxでとるファイル　data2021.js
var calendartbl = [
['2021','1','1','1'],
['2021','1','2','1'],
['2021','1','3','1'],
['2021','1','4','0'],
];
//ajaxでとって、evalでjavascript変数化
	var rvdata;
	$.ajax({
		url:'/common/cal/'+'data'+y+'.js?dev='+Math.random(),
		dataType: 'text',
		type:"GET",
		async: false,
		success: function(data) {
			rvdata = data;
		}
	});
	eval(rvdata);
	if(calendartbl != undefined) {
		for(var i = 0; i < calendartbl.length; i++) {
			var item = calendartbl[i];
			syear	= item[0];
			smonth	= item[1];
			sday	= item[2];
			hol		= item[3];
		}
	}

配列名の文字列を変数に変換


var list01 = [
	"111", "222", "333"
];
var list02 = [
	"aaa", "bbb", "ccc"
];
	//配列名の文字列を変数に変換
	var mode = "01";
	obj1=eval('list'+mode);
	for (count = 0; count < obj1.length; count++) {
	}

name=での正規表現


	$('input[name*="test"]')// 部分一致
	$('input[name^="btn_"]')// 前方一致
	$('input[name$="_01"]') // 後方一致
	//idの先頭でマッチ
    $("[id^=view_]").on("click",function(){
		var id_str = $(this).attr("id");
		stArray = id_str.split("_");
		alert(stArray[0]);
	});

radioの場合


	$('input[name="name_test"]:radio').change(function() {
	});
	//チェックボックス、ラジオボタン
	$('#sel:checked').val();
	$('[name="sel"]:checked').val();

２つの入力を同時処理のコード


	$('input[name="cd1"],input[name="cd2"]').change(function() {
	});

SELECT


	//select値取得
	$('#name_test option:selected').val();
	$('[name="name_test"] option:selected').val();

HTML同士の引数の渡し方


$(function() {
	//http://xxx.xxx.xxx/index,html?session=xxxxx&code=123
	var session	= GetUrlParam('session');	//get xxxxx
	var code	= GetUrlParam('code');		//get 123
});
function GetUrlParam( paramName )
{
	var oRegex = new RegExp( '[\?&]' + paramName + '=([^&]+)', 'i' ) ;
	var oMatch = oRegex.exec( window.top.location.search ) ;
	if(oMatch && oMatch.length > 1) {
		val = oMatch[1];
		val = val.replace(/%25/g, "%");
		val = val.replace(/%3D/g, "=");
		return val;
	} else {
		return '' ;
	}
}

jquery.ui.datepickerの使い方

minDateは現在日から下記の設定で選択範囲を制限できます。

予約日などで本日から過去を選択させたくない場合など


//  "+1d"	//  明日
//  "-1d"	//  前日

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/ui-lightness/jquery-ui.css" /> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> 

		$.datepicker.setDefaults($.datepicker.regional['ja']);
		$('#entry_s_date').datepicker({
			dateFormat: 'yy/mm/dd',
			minDate: '+1d',
			onSelect: function(dateText) {
			}
		});

関連記事