19/5/5学習記録③『Javascriptその３』
ジーコ
未経験からのWeb独学戦記
19/5/5 学習記録7「jQuery③」
ジーコ
記事内に商品プロモーションを含む場合があります
Progate『jQuery学習コース 中級編』より
◯jQueryを使用するにあたっての事前準備
１．<head>タグ内でjQueryの読み込み
２．jQueryファイルの読み込み
１，<head>タグ内でjQueryの読み込み
<head>
<script src="https://...jQuery.min.js">
</head>
２．jQueryファイルの読み込み
<head>
</head>
<body>
<script src="script.js"></script> ※body終了タグの直前に記述する。
</body>３．readyイベント
$(document).ready(function(){
// この中にjQueryを書く
});
※readyイベントは省略可能
$(function(){
// この中にjQueryを書く
});
◯指定要素をクリックした時のモーダル表示イベント作成
モーダルをCSSで非表示
クリックイベント作成
◯hover時
addClass：指定した要素にクラス追加
removeClass：指定した要素からクラスを取り除く
$(document).ready(function(){
// この中にjQueryを書く
});
※readyイベントは省略可能
$(function(){
// この中にjQueryを書く
});
◯アコーディオンの作成
hasClassメソッド：引数に指定したクラスを、オブジェクトが持っているか判定する時に使用する。持っていればtrue、持っていなければfalseとなる。
if($('answer').hasClass('open')) {
// .openを外す処理
// 答えを隠す処理
} else {
// .openを付ける処理
// 答えを表示する処理
}
※「hasClass」内のクラス名には、「.(ドット)」不要ABOUT ME
