備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。
お手柔らかにお願いいたします。
jQueryとは
JavaScriptのコードを簡潔に書けるようにするために設計されたライブラリ。
jQuery API
jQueryの適用方法
HTMLの<body>要素内（</body>の直前）に<script>タグを使用して記述する。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <body>要素内（</body>の直前）に<script>タグを使用して記述する。-->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
$(function() {
alert("HELLO");
console.log("HELLO");
});
</script>
</body>
</html>
JavaScriptファイルを作成してHTMLの<body>要素内（</body>の直前）で<script>タグを使用して読み込む。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- HTMLの<body>要素内（</body>の直前）で<script>タグを使用して読み込む。-->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="js/sample.js"></script>
</body>
</html>
sample.js
"use strict"
$(function() {
alert("HELLO");
console.log("HELLO");
});
ready関数
ready関数はブラウザがHTMLを読み込んでJavaScriptでDOM操作ができるようになった時点で実行される。jQueryではJavaScriptのコードで実装した内容をready関数で囲む。
$(function() {
alert("HELLO");
console.log("HELLO");
});
jQuery(document).ready(function() {
alert("HELLO");
console.log("HELLO");
});
jQuery(function() {
alert("HELLO");
console.log("HELLO");
});
jQueryの基本構文
セレクタの種類
- 要素で指定する場合
$('div')
- id属性で指定する場合
$('#id')
- class属性で指定する場合
$('.class')
ブラウザ表示時に実行したい場合
$(function() {
$('#example').hide();
});
イベント発生時に実行したい場合
$(function() {
$('#example').on('click', function() {
$(this).hide();
});
});
関数
css関数
CSSを設定・取得する。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="message">HELLO</div>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="js/sample.js"></script>
</body>
</html>
sample.js
"use strict"
$(function() {
$('.message').css('color', 'brown').css('font-size', '25px');
console.log('color:' + $('.message').css('color'));
console.log('font-size:' + $('.message').css('font-size'));
});
on関数／text関数／val関数
イベント時に処理を実行する。
要素のテキストコンテンツを設定・取得する。
要素のVALUE値を設定・取得する。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="message">ここにメッセージを設定する</div>
<button type="button" id="button">ボタン</button>
<input type="radio" class="radio" name="gender" value="male">男性
<input type="radio" class="radio" name="gender" value="female">女性
<select id="quantity">
<option value="1">1個</option>
<option value="2">2個</option>
<option value="3">3個</option>
<option value="4">4個</option>
<option value="5">5個</option>
</select>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="js/sample.js"></script>
</body>
</html>
sample.js
"use strict"
$(function() {
$('#button').on('click', function() {
$('#message').text("ボタンをクリックしました。");
console.log($('#message').text());
});
$('.radio').on('change', function() {
$('#message').text("ラジオボタンを選択しました。"
+ $('.radio:checked').val() + "を選択しました。");
});
$('#quantity').on('change', function() {
console.log("セレクトボックスを変更しました。"
+ $('#quantity').val() + "を選択しました。");
});
});
show関数／hide関数
要素を表示する。
要素を非表示にする。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="message">ここのメッセージを表示・非表示にする</div>
<button type="button" id="show_button">表示する</button>
<button type="button" id="hide_button">非表示にする</button>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="js/sample.js"></script>
</body>
</html>
sample.js
$(function() {
$('#show_button').on('click', function() {
$('#message').show();
});
$('#hide_button').on('click', function() {
$('#message').hide();
});
});
動的に追加した要素のイベント発生時に処理を実行する方法
html.sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="parent">
<button id="parent_button">ボタンを追加する</button>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="js/sample.js"></script>
</body>
</html>
js.sample.js
"use strict"
$(function() {
$('#parent_button').on('click', function() {
$('#parent').append('<button class="child_button">追加したボタン</button>');
});
$('#parent').on('click', '.child_button', function() {
console.log("追加したボタンをクリックしました。");
});
});