JQueryとは
Javascriptのライブラリで、JavaScriptで行えるほぼ全てのことを、JavaScriptよりも簡単におこなうことができます。
他にもJavascriptのフレームワークはには、「React」「AngularJS」「Vue.js」などあります。
目次
- JQueryをHTMLファイルに読み込む
- HTML要素を取得する
- HTMLを操作する
- イベント
- 要素の動作
- each文
- if文
JQueryをHTMLファイルに読み込む
まず、JQueryを使えるようにするためにHTMLファイルのheadタグ内に追記します。
html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="./main.js"></script>
</head>
※ここで一つ注意点があるのですが、JQueryを読み込む際は、外部で読み込むscriptタグよりも上に記述しなければ動作しません。私は何度か下に記述して読み込まれなかった失敗をしたことがありますので気をつけてください。
HTML要素を取得する
HTMLのセレクタを指定することで取得することができます。
$("セレクタ")
contentクラスをコンソールに出力するには、下記のように記述します。
$(function() {
console.log($(".content"));
});
続いてよく使うセレクタは下記になります。
IDセレクタ
$("#IDセレクタ")
クラスセレクタ
$(".classセレクタ")
要素セレクタ(下記はh1タグ)
$("h1")
HTMLを操作する
$("セレクタ").jQueryの命令();
$("セレクタ").jQueryの命令(引数);
jQueryの命令
イベント
まず、イベントの設定には onメソッド を使用します。
.on("イベント"
$(function() {
$("#title").on("イベント",function() {
ここに処理を書く
});
});
| イベント一覧 | 動作するタイミング |
|---|---|
| click | クリックされた時 |
| dblclick | ダブルクリックされた時 |
| mouseover | マウスが要素の上に乗った時 |
| mouseout | マウスが要素から離れた時 |
| keydown | キーが押された時 |
| keyup | キーが離されたとき |
| change | 入力内容が変更された時 |
| submit | 送信された時 |
要素の動作
$("#Button").on("イベント", function() {
$("#title").show();
});
| コード | 要素の動作 |
|---|---|
| hide() | 非表示にできる |
| show() | 要素を表示できる |
| fadeOut() | 要素がフェードアウトする(引数に時間を指定) |
| fadeIn() | 要素がフェードインする(引数に時間指定) |
| append() | 引数で指定したHTML要素を追加できる |
| remove() | 指定したHTML要素を削除できる |
| addClass() | 要素に引数で設定したクラスを追加できる |
| removeClass() | 要素から引数で設定したクラスを削除できる |
| attr() | HTML要素の属性値を取得・変更 |
| val() | フォームに入力された値を取得できる |
each文
$(function() {
var array = [1,2,3,4,5];
$.each(array, function(i, value) {
console.log(i + ': ' + value);
})
});
出力結果
0: 1
1: 2
2: 3
3: 4
4: 5
if文
$(function() {
i = 0
a = 0
if( i = a ) {
console.log("等しいです");
}else {
console.log('等しくありません');
}
});