デイトラWeb制作中級編 Day4~6『jQuery』学習記録

WEB制作
うにょママ
うにょママ

復習をかねたプログラミング学習の記録と備忘録です。

スポンサーリンク

Day4~6で学んだこと「jQueryの基礎」

【Day4】jQueryを学ぼう

jQueryとは

JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの

jQueryを使うメリット

  1. 短いコードで簡単にかける
  2. ブラウザごとの対応がいらない
  3. 便利なライブラリがたくさんある

jQueryの書き方

①jQueryのライブラリー本体を読み込む

  • jQueryのCDN
  • GoogleのCDN
  • MicrosoftのCDN

3つのうちどれか1つのタグを</body>の直前に書く。

//jQueryのCDN
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
 
 
//GoogleのCDN
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
 
 
//MicrosoftのCDN
 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>

②プログラムを書いていく

(例)h2の 文字を“デイトラ”に変える

$(function() {
$('h2').text('デイトラ');
}); 

普通のjsで書いた場合↓

document.getElementByTagName(‘h2’).innerText = ‘デイトラ’

セレクタの指定の仕方3パターン

■タグ名で指定する
$(“h2”)

■クラス名で指定する
$(“.lead”)

■ID名で指定する
$(“#js-for-web”)

メソッド一覧

.text() テキストを取得する
.text(‘変更したいテキスト’) テキストを”内の文字列に変更する

.html() HTMLを取得する
.html(‘変更したいHTML’) HTMLを”内のHTMLに変更する

.click() 対象要素をクリックする

.prepend(‘要素’) 要素の先頭にHTMLを挿入する
例:$(#lists).prepend(‘先頭に追加するリスト’)

.append(‘要素’) 要素の最後にHTMLを挿入する
例:$(#lists).append(‘最後に追加するリスト’)

.remove() 要素を削除する

.attr(‘属性’) 指定した属性の値を取得する
例:$(a#special-link).attr(‘href’)

.attr(‘属性’, ‘値’) 指定した属性の値を変更する
例:$(a#special-link).attr(‘href’, ‘https://xxxx.com’)

.removeAttr(属性名) 指定した属性を削除する

.addClass(class属性値) class属性を追加する
例:$(#button).addClass(‘active’)

.removeClass(class属性値) class属性を削除する
例:$(#button).removeClass(‘active’)

.css(プロパティ名) 指定したCSSプロパティの値を取得する
例:$(#logo).css(‘color’)

.css(プロパティ名,値) 指定したCSSプロパティの値を設定する
例:$(#logo).css(‘color’,’red’)

val() フォームの入力値(value属性の値)を取得する
例:$(input#name).val()

val(”入力値”) フォームの入力値(value属性の値)を設定・上書きする
例:$(input#name).val(‘tofuri’)

find()メソッドとchildren()メソッド

.find(‘セレクタ’)子孫要素全体から探してくる

.children(‘セレクタ’):対象要素の直属の子要素から、セレクタに該当するものを取ってくる

イベント処理

$(‘セレクタ’).イベント名(function(){ });
という構文で書く。

(例1)クリックされたときに何か処理を追加したい場合
$(‘セレクタ’).click(function(){
//ここに処理を書く
});

(例2)スクロールしたときに何か処理を追加したい場合
$(‘セレクタ’).scroll(function(){
//ここに処理を書く
});

アニメーション処理

アニメーション一覧
https://api.jquery.com/category/effects/

スライドのように開閉して表示

$('#service-title').hover(
function(){
$('#register').slideUp();
},
function(){
$('#register').slideDown();
}
);

フワッと浮き上がる表示

$('#service-title').hover(
function(){
$('#register').fadeIn();
},
function(){
$('#register').fadeOut();
}
);

【Day5】jQuery実践課題①

課題①:ドロワーメニューの実装

「slideToggle」を使って実装する。

「.slideToggle(“fast”)」や「.slideToggle(“slow”)」、「.slideToggle(200)」などでアニメーションの早さを変えれる。

課題②:ページトップへ戻るボタンを付ける

「scrollTop」を使って実装する。

【Day6】jQuery実践課題②

課題③:モーダルで画像の拡大表示

「attr」または「prop」を使って実装する。

jQuery注意点、学習方法

仕事において「自作 = 正義」ではない

調べれば簡単に実装できるコードを、数時間〜数日かけて自作する行為は無駄。

スキルアップは実務でせずに個人の時間でやる。

プログラマーの実装力とは「=書ける力」ではなく、「調べれば作れる力」も含めて”実装力”

どんどん調べて、カンニングして、使えるコードは再利用していくのが正解。

エンジニア向けメモ帳『Boostnote』

『Boostnote』を利用し、一度書いたコードは、手持ちのカードとして使い回す

アニメーション実装の引き出しを増やす方法

  1. ググって出てきたコードをマネする
  2. 良いサイトを見つけたらデベロッパーモードでソースコードを読む
  3. テンプレートを購入し、ソースコードを読む
  4. CodePenなどで検索したコードをマネする

    ※使えるコードを見つけたら、『Boostnote』に写しておく

まとめ

モーダルの実装に少々手こずりました。

上手く実装できた時はとても嬉しかったです!

ググって、理解して、カスタマイズして、この繰り返しが大切なんだなぁと実感しました。

コメント

タイトルとURLをコピーしました