デイトラweb制作中級編 DAY4
nakano
jQueryとは
jQuery ・・・ JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの
jQueryの特徴
1. 短いコードで簡単にかける
2. ブラウザ（Chrome、FireFoxなど）ごとの対応がいらない
3. 便利なライブラリがたくさんある
→ 「画像にスライドさせる動きをつけたい」ときに既存のものを使用できる
※ライセンスによって商用利用できるものとできないものがある
jQueryの使い方
①HTMLからjQueryを使う方法
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
/* 自分のコード（外部ファイルも可）*/
</script>
</body>
</html>
jQueryのライブラリは CDN を活用して読み込んでいる
CDNの種類
・Google CDN ← 今回はこれ
・Microsoft CDN
・CDNJS CDN
・jsDelivr CDN
②jQueryのコード記述
$(function() {
$('主語').動詞('補語');
})
例：「h2」の文字を「デイトラ」に変えたい場合
jQuery（コードが短い）
$(function() {
$('h2').text('デイトラ');
});
JavaScript（コードが長い）
document.getElementByTagName('h2').innerText = 'デイトラ'
③セレクタの指定（3パターン）
1. タグ名で指定する → $("h2")
2. クラス名で指定する → $(".lead")
3. ID名で指定する → $("#js-for-web")
④メソッドで要素を指定
子要素の中から探すときに使う、実務でも頻出
find() ・・・ 子要素全体（孫要素も）
children() ・・・ 直属の子要素のみ
例：「1日1題30日でプログラマーになろう！」を取得する（Day4のjsfiddle）
var texts = $('#js-for-web').find('p');
console.log(texts[0]);
⑤イベントの監視
イベントの構文
$('セレクタ').イベント名(function(){});
例1:「click」イベント
$('セレクタ').click(function(){
//ここに処理を書く
});
例2:「hover」イベント
$('セレクタ').hover(
function(){
//ここにホバーされたときの処理を書く
},
function() {
//ここにホバーが外れたときの処理を書く
}
);
※functionの1行目に「されたとき」の処理、2行目に「外れたとき」の処理
⑥アニメーション
例1:スライドのように開閉して表示（hoverしたとき）
$('セレクタ1').hover(
function(){
$('セレクタ2').slideUp();
},
function(){
$('セレクタ2').slideDown();
}
);
「セレクタ1」をhoverしたとき、「セレクタ2」がスライドして表示される
例2:フワッと浮き上がる表示（hoverしたとき）
$('セレクタ1').hover(
function(){
$('セレクタ2').fadeIn();
},
function(){
$('セレクタ2').fadeOut();
}
);
「セレクタ1」をhoverしたとき、「セレクタ2」が浮き上がって表示される
アニメーション一覧
まとめ
今回はjQueryについて学習しました！
JavaScriptに比べて書く文字数が少ないため
どこがどのような役割を果たしているのか把握しやすく、
前回に比べるとコード入力の間違いも少なかったです。
だいぶjQueryについても覚えてきたので、
自分のポートフォリオを書き直してみようかなぁと思ってます。
