準備
①今回はemmet記法を使い、時短
VSCode で index.html内に
! ＋ エンター
↓一発で以下になる
②jQueryを読み込む為の追記
Google Developers
head内に追記する
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
ここからjQueryを実践
【jQueryはオブジェクト化する】
$('セレクタ').メソッド();
hoverの例
main.js
$(function() {
$('#menu').hover(
function() {
//hoverの第一引数としてfadeIn
$('.text').fadeIn();
},
//hoverの第二引数としてfadeOut
function() {
$('.text').fadeOut('slow'); //今回はslow
}
);
});
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>仮サイトをJQueryで作成</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id ="menu">
<h1 class="title">仮サイトを作成</h1>
<p class="text">
今回はJQueryで仮サイトを作成します。
</p>
</div>
<script src="main.js"></script>
</body>
</html>
styles.css
.text {
display: none;
}
＜検証ツールで確認＞
hover時
hover無し
