デイトラweb制作中級編 DAY4

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についても覚えてきたので、
自分のポートフォリオを書き直してみようかなぁと思ってます。