jQuery
jQuery
https://jquery.com/
jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発 − Publickey
https://www.publickey1.jp/blog/21/jquery_uijquery_mobilejquery.html
以下は jQuery UI では無いらしい。
jQueryのdatetimepickerの使い方とは？datetimepickerを正しく使いこなそう！ | .NETコラム
https://www.fenet.jp/dotnet/column/language/6933/
【jQuery】datetimepicerプラグイン - Qiita
https://qiita.com/kazu56/items/b6b00cad9c2d3e30a118
■jQueryの基本操作
よく調べる内容をメモ。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
// 繰り返し処理
$('ul.sample1 li').each(function() {
console.log('text=' + $(this).text());
});
// 連番を取得
$('ul.sample1 li').each(function(key) {
console.log(key + '=' + $(this).text());
});
// 連番と対象を取得
$('ul.sample1 li').each(function(key, value) {
console.log(key + '=' + $(value).text());
});
// continueとbreak（2〜5が出力される）
$('ul.sample1 li').each(function(key, value) {
if (key < 2) {
return true; // continueに相当する
} else if (key > 5) {
return true; // breakに相当する
}
console.log(key + 'x=' + $(value).text());
});
// 「$.each」を使って、このようにも書ける
$.each($('ul.sample1 li'), function() {
console.log('text=' + $(this).text());
});
// 要素数は length で取得できる（size() はVer1.8で非推奨となった）
console.log('size=' + $('ul.sample1 li').length);
// dataを扱う
$('ul.sample2 li').each(function() {
// dataを設定
//$(this).data('number', 0);
// dataを参照
console.log('number=' + $(this).data('number'));
});
// 親要素を参照する
$('#target').closest('ul').css('background-color', '#AAAAAA');
// イベントを設定
$('#target').on('click', function() {
console.log('クリック！');
});
});
</script>
</head>
<body>
<h1>jQuery</h1>
<h2>サンプル1</h2>
<ul class="sample1">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
<h2>サンプル2</h2>
<ul class="sample2">
<li data-number="1">A</li>
<li data-number="2">B</li>
<li data-number="3">C</li>
<li data-number="4">D</li>
<li data-number="5">E</li>
<li data-number="6">F</li>
<li data-number="7">B</li>
</ul>
<h2>サンプル3</h2>
<ul class="sample3">
<li id="target">A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
■selectのoptionを一部非表示にする
Safariでselectのoptionを一部非表示にするのは意外と難しい。
$(this).show() と $(this).hide() で制御できるように見えるが、Safariでは機能しない。
optionに対して $(this).wrap('<span style="display:none;">') とすることで対応できる。
【jQuery】Safariでselect要素のoptionをCSSで非表示にするお手軽な方法 | ねたまめ.com
https://netamame.com/safari-select-option_display-none/
jQuery：他の要素の値を元にselect要素のoptionを非表示にする | ｗ２ソリューション株式会社 TECH Media
https://www.w2solution.co.jp/tech/2021/07/29/eg_ns_ns_jqueryselectoption/