デイトラ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についても覚えてきたので、

自分のポートフォリオを書き直してみようかなぁと思ってます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です