#デイトラWeb制作コース中級編DAY4の学び
【この記事に書いてあること】
# 【学び】プログラミング学習29日目⏩
— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 8, 2021
Web制作コース中級編DAY4💻
学習時間:3時間3分⏳
学習内容:jQueryについて✏
学び📚
・セレクタの指定方法
・メソッドを使用した要素の指定
・イベント処理
・アニメーション#デイトラ#プログラミング初心者#プログラミング学習 pic.twitter.com/sfwoA6Cl4r
1
【jQueryの解説】
＜jQueryとは＞
JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの。
主にWebサイトやWebアプリケーションで使用されている。
＜jQueryのメリット＞
① 短いコードで書ける
② ブラウザごとの対応がいらない
③ 便利なライブラリがたくさんある
2
【jQueryの書き方】
＜jQueryを書くときの型＞
① ｊQueryのライブラリ本体を最初に読み込む
② ｊQueryで書いたファイルを読み込む
↓
<!-- jQueryのライブラリー -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- jQueryで書いたファイル-->
<script src="js/practice.js"></script>
＜ｊQueryの書き方のルール＞
ポイント
① ＄マークで始まり
② function()で囲む
③ $("主語").動詞("補語")の文法で書く
↓
$(function() {
//この中にプログラムを書いていく
});
*イメージは
主語： セレクタ（id,class,tagの名前など）
動詞： メソッド（どうしたいのか）
補語： メソッドによって追加で条件式を足す（補語を書かなくていい時もある）
＜ｊQueryでのセレクタの指定方法＞
① タグ名で指定する：$("タグ名")
② クラス名で指定する：$(".クラス名")
③ ID名で指定する：$("#id名")
＜ｊQueryでプログラムを書いてみた＞
$(function(){
const status = $('#user-status').val(); //val（） = フォームの入力値（value属性の値）を取得する
const button = $('#register');
// HTMLデータから、statusとbuttonの値を取得できた
if(status === 'visiter'){
button.text('登録'); //.text('変更したいテキスト') = テキストを''内の文字列に変更する
button.removeClass('btn-login'); //.removeClass(class属性値) = class属性を削除する
button.addClass('btn-register'); //.addClass(class属性値) = class属性を追加する
}else if(status === 'user'){
button.text('ログイン'); //.text('変更したいテキスト') = テキストを''内の文字列に変更する
button.removeClass('btn-register'); //.removeClass(class属性値) = class属性を削除する
button.addClass('btn-login'); //.addClass(class属性値) = class属性を追加する
$('.login-area').append('<a href="https://tokyofreelance.jp/" class="btn btn-withdraw">退会</a>')
//.append('要素') = 要素の最後にHTMLを挿入する
}
});
3
【メソッドを使用した要素の指定】
＜fund()かchildren()の違い＞
子要素の中から探すときはこの２つのどちらかを使用する！
① .find('セレクタ')
対象要素の子孫要素から、セレクタに該当するもの取得する
var texts = $('#js-for-web').find('p');
console.log(texts[0]);
//変数を「texts」と名付けて、id名「js-for-web」から、pタグの０番目を表示させる
＊ findは子孫要素全体から探してくるので、どの階層を指定してもOK！
② .children('セレクタ')
対象要素の直属の子要素から、セレクタに該当するものを取得する
var texts = $('#js-for-web').children('p');
console.log(texts[0]);
//変数を「texts」と名付けて、id名「js-for-web」から、pタグの０番目を表示させる
＊ childrenは直属の子要素からしか探せないので、孫要素の指定はできない！
4
【イベント処理】
＜イベントの構文＞
$('セレクタ').イベント名(function(){ });
＜click＞
ボタンがクリックされたときの処理
「#button」をクリックすると「#service-title」の文字が「デイトら」に変わる処理
↓
$("#button").click(function(){
//.click() = 対象要素をクリックする
$("#service-title").text("デイトラ")
//.text('変更したいテキスト') = テキストを''内の文字列に変更する
});
＜hover＞
hoverイベントはfunctionをコンマ区切りで2個続けて書く。
１ 「ホバーされたときの処理」
２ 「ホバーが外れたときの処理」
$('セレクタ名').hover(
function() {
//ここにホバーされたときの処理を書く
},
function() {
//ここにホバーが外れたときの処理を書く
}
);
↓
例：
$("#service-title").hover(
function() {
$(this).css('color','orange');
//.css(プロパティ名,値) = 指定したCSSプロパティの値を設定する
},
function() {
$(this).css("color","#082B48");
//.css(プロパティ名,値) = 指定したCSSプロパティの値を設定する
}
);
5
【アニメーション】
jQueryにはページに動きをつける様々なアニメーションが用意されている。
参考サイト: アニメーション一覧
＜スライドのように開閉して表示＞
$('#service-title').hover(
function(){
$('#register').slideUp();
},
function(){
$('#register').slideDown();
}
);
/* [#service-title] に
ホバーしたとき、[register]が「slideUp」し、
ホバーを解除したとき、[register]が「slideDown」する */
＊ Q&Aで、Qにホバーした時に、Aが出てくる仕様などに使う
＜ふわっと浮き上がる表示＞
$('#service-title').hover(
function(){
$('#register').fadeIn();
},
function(){
$('#register').fadeOut();
}
);
/* [#service-title] に
ホバーしたとき、[register]が「fadeIn」し、
ホバーを解除したとき、[register]が「fadeOut」する */
＊ クリックしたとき、写真がふわっと表示する仕様などに使う（モーダル）