progateのjQuery 学習コース 初級編の復習メモです。
script.jsの読み込み
jQueryを使用するには、jQueryライブラリを読み込む必要があります。ライブラリはインターネット経由で読み込むのが一般的です。headタグの中で下図のようにURLを読み込む。
scriptはCSSファイルの読み込みのようにheadタグの中にも書けますが、body終了タグの直前に書くことで、WEBページの表示速度をより早めることが出来ます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Hello, World</h1>
<!-- script.jsの読み込み -->
<script src="script.js"></script>
</body>
</html>
hideメソッド
要素を隠す。
$(function() {
$('h1').hide();
});
fadeOut
要素を隠す。
$(function() {
// 以下で、fadeOutメソッドを用いて<img>要素を隠す
$('img').fadeOut();
//slideUpメソッドも後ろの()内に引数として、アニメーションの速度を指定できます。
$('img').fadeOut(1500);
// 以下で、slideUpメソッドを用いて<p>要素を隠す
$('p').slideUp();
});
htmlのid、classを隠す。
$(function() {
// slideUpメソッドを用いて、「#title」の要素を隠す
$('#title').slideUp();
// fadeOutメソッドを用いて、「.lesson-item」の要素を隠す
$('.lesson-item').fadeOut();
});
fadeInメソッド
cssのdisplay: none;で隠した要素をshowメソッド、fadeInメソッドで表示する。
$(function() {
// showメソッドを用いて、「#title」要素を表示してください
$('#title').show();
// fadeInメソッドを用いて、「#image」要素を表示してください
$('#image').fadeIn();
});
clickイベント
イベントの構文は、$('セレクタ').イベント名(function(){ });のように書きます。
$(function() {
// 「#hide-text」要素に対するclickイベントを作成してください
$('#hide-text').click(function() {
$('#text').slideUp();
});
});
CSSメソッド
cssメソッドで要素の文字の色を変更したいときは、$('セレクタ').css('color', 'red');のように記述します。widthやfont-sizeなど他のプロパティもすべてcssメソッドで変更することができます。
$(function() {
// 「#change-css」要素に対するclickイベントを作成してください
$('#change-css').click(function() {
$('#text').css('color', 'red');
$('#text').css('font-size', '50px');
});
});
HTMLを変更する(1)
textメソッド
jQueryではCSSだけでなく、textメソッドを用いることでHTMLそのものを変更することも出来ます。textメソッドは、$('セレクタ').text('書き換える文字列');のように記述します。
$(function() {
// 「#change-text」要素に対するclickイベントを作成してください
$('#change-text').click(function() {
$('#text').text('ようこそ、Progateへ');
});
// 「#change-html」要素に対するclickイベントを作成してください
$('#change-html').click(function() {
$('#text').html('<a href="https://prog-8.com/">ようこそ、Progateへ</a>');
});
});
thisの構文
複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があります。このようなときはthisを用いて、実際にイベントが起こった要素を取得しましょう。
$(function() {
// 「.list-item」要素に対するclickイベントを作成してください
$('.list-item').click(function() {
$(this).css('color', 'red');
});
});
変数とメソッドチェーン
jQueryで変数宣言にはvarを用います。
$(function() {
$('.btn').click(function() {
// $('#title')を変数$titleに代入してください
var $title=$('#title');
// 「#title」に対する3つのメソッドを、変数を使って書き換えてください
$title.css('color', 'red');
$title.html('こんばんは、にんじゃわんこさん');
$title.fadeOut(1000);
// 「#text」に対する3つのメソッドを、メソッドチェーンを使って書き換えてください
$('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);
});
});
findメソッド、childrenメソッド
$(function() {
$('#find-method').click(function() {
// findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
// cssメソッドで文字の色をredに指定してください
$('#wrapper').find('a').css('color', 'red');
});
$('#children-method').click(function() {
// childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
// fadeOutメソッドで隠してください
$('#wrapper').children('a').fadeOut();
});
});
hoverイベント
$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);のように書きます。clickイベントと違い、引数を2つ書くことに注意しましょう。引数の間はコンマで区切ります。
$(function() {
// 「#language-wrapper」にhoverしたときのhoverイベントを作成してください
$('#language-wrapper').hover(
function() {
$('.language-text').fadeIn();
},
function() {
$('.language-text').fadeOut();
}
);
});