前提(jQueryとは?)
Javascriptのライブラリの一種で、Javascriptを使いやすくする為に上から被せるようなもの。
Javascriptで書くと長くなるスクリプトを短くしたり、clickした後のアクションやイベントを作れる。
当然だが、jQueryを使うためには、ライブラリを読み込む必要がある。
CDN(Content Delivery NetWork)の読み込みについて
インターネット経由でファイルを配信する仕組み。URLを指定することによってそのまま参照できるので
ファイルをダウンロードする必要がなくなる。
また、ユーザー側でも複数のサイトで同じjQueryのバージョンを使っていたらキャッシュの読み込みで
ページの読み込み時間を省略できる事もメリット。
定義するときは以下のように定義する。
index.html
<body>
....
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
... // jQuery本文
...
</script>
メソッド一覧(順次追加予定)
| No | メソッド | 意味 |
|---|---|---|
| 1 | append() | 指定した子要素にテキストやHTML要素を追加 |
| 2 | prepend() | 指定の要素内に文字列やHTML要素を追加 |
| 2 | prepend() | 複数の要素を先頭に追加 |
| 3 | before() | 指定した要素の前に追加する |
| 4 | replaceWith() | 別の要素を指定要素に置換する |
| 5 | remove() | 指定した要素を削除する |
| 6 | find() | 指定された要素を検索する |
| 7 | text() | HTML要素内にあるテキスト情報を取得、変更する |
| 8 | empty() | 要素の中身を削除する |
| 9 | after() | 指定した要素の後に追加する |
| 10 | attr() | 属性を取得、変更、追加する |
サンプルコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
.replace {
color: red;
}
.replaceNot {
color: black;
}
.replacetarget {
color: black;
}
.empty {
background-color: skyblue;
}
</style>
</head>
<body>
<ul class="category">
<li class="name">項目1</li>
<li>項目2</li>
</ul>
<div class="text">
</div>
<div id="target">
<p>一つ前に追加</p>
</div>
<button class="click">クリック</button>
<div class="replacetarget">divタグが置換</div>
<div class="replaceNot">divタグ置換不可</div>
<div class="remove">このdivタグはボタンを押したら削除</div>
<div class="empty" style="padding: 10px">
<span>ここは消えますが色は残ります</span>
</div><br>
<button class="addclass">更新</button>
<div id="find">
<input type="text" size="50" value="更新ボタンを押してください">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$('ul.class').append('<li>項目3</li>'); // li要素を追加する
$('li.name').prepend('<strong>名前</strong>'); // li要素のテキストを強調する
$('div.text').prepend('<p>タイトル</p>','<p>テキスト</p>'); // 指定要素の中にp要素を追加する
$('div#target').before('<div class="before"><span>新しく追加</span></div>'); // 指定要素の前に追加する
$('button.click').click(function() { // クリックボタンを押したらテキストを更新する
let replaceTo = '<div class="replace">置換完了</div>';
$('div.replacetarget').replaceWith(replaceTo); // 不要部分を書き換える
$('div.remove').remove(); // タグと要素を全て削除
$('div.empty').empty(); // 要素だけ削除
});
$('button.addclass').click(function() { // ク更新ボタンを押したらテキスト内容を書き換える
$('div#find').find('input[type="text"]').attr('value','テキストを更新しました');
});
</script>
</body>
</html>