![見出し画像](https://assets.st-note.com/production/uploads/images/17333405/rectangle_large_type_2_3b06d3e0948cef5b0e14c876bfb51047.jpeg?width=1200)
jQuery備忘録
勉強しながらメモしたことをそのまま記述しています。
$('')
・jQueryってなにができるの?
・javaScriptのライブラリの一つ
・HTMLとCSSだけでは実現できなかった様々な動きを表現することができる。
たとえば?
アニメーションをつけられる
ユーザーの行動に応じた動きのあるデザインにできる
・基本形
$('セレクタ').メソッド(引数);
何を->セレクタ どうするか->メソッド
・要素を隠すには
$('h1').hide();
・テンプレ
$('hoge').hoge();
・jQueryを読み込むには
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
・jsを読み込むには
以下をbodyタグの終了直前で読み込む
なぜならそのほうが素早く表示できるから
<script src="script.js"></script>
・フェードアウト
$('セレクタ').fadeOut();
$('セレクタ').fadeOut(1500); 1.5秒で消える
・スライドアップ(フェードアウト)
$('セレクタ').slideUp();
$('セレクタ').slideUp(1500); 1.5秒で足元からスラッと上まで消える
・classとid
classは複数個所で使えるのに対して、idは1か所にしか付けられない。
classはセレクタにドットを使う
idはセレクタに#を使う
jQueryは高速化のためになるべくidを使うのが好ましい。
・隠れた要素を表示する
$('セレクタ').show();
・フェードイン
$('セレクタ').fadeIn();
$('セレクタ').fadeIn('slow');
・スライドダウン(フェードイン)
$('セレクタ').slideDown();
$('セレクタ').slideDown('slow');
・イベント
$('セレクタ').イベント名(function(){
// イベント発生時に実行したい処理
});
・クリックイベント
$('セレクタ').click(function(){
// イベント発生時に実行したい処理
});
・CSSメソッド
$('セレクタ').css('プロパティ名','値');
$('セレクタ').css('プロパティ名');→これだと値を取得できる
・CSSメソッドで色を変える
$('セレクタ').css('color','red');
・HTMLの文字を変更する
$('セレクタ').text('こんばんは');
$('セレクタ').text();→これだと文字列を取得できる。
・HTMLを変更する
$('セレクタ').html('<span>こんばんは</span>');
$('セレクタ').html();→これだとHTML文で取得できる。
・this
呼び出し元のセレクタがthisに入ってる
このとき、クォーテーションはいらない
$(this).css('color','red');
・変数
var $div=$('div');
$div.css();
$div.html();
$div.fadeOut();
・メソッドチェーン
$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用されます。
・findとchildrenの違い
どちらも子を取得するが、数に違いがある
$('#wrapper').find('a').css('color','red');
$(this).find('a').
子要素すべて
$('#wrapper').children('a').css('color','red');
子要素先頭1つ
childではないからな!!!
・hover
マウスが乗った時の処理と外したときの処理を書ける
$('セレクタ').hover(
function(){
// マウスを乗せたとき
},
function(){
// マウスを外したとき
}
);
・jQueryの型
$(document).ready(function(){
//jQueryを書く
});
↓長いので省略!
$(function(){
});
・モーダルとは
クリックなどのイベントで表示/非表示が切り替わるもの
・モーダルの表示
①最初はモーダルをCSSで非表示に
.login-modal-wrapper{
display: none;
}
②ログインボタンにclickを設定
$('#login-show').click(function(){
});
③clickイベントでモーダル表示
$('#login-show').click(function(){
$('#login-modal').fadeIn();
});
・新規登録モーダルの表示
①新規登録のボタンに共通のclass名を指定
②fadeInメソッドで新規登録のモーダルを表示
・モーダルを隠す
①閉じるボタンにclickイベントを設定
②fadeOutメソッドでモーダルを隠す
・hoverイベントの準備
①各言語に対して、lesson-hoverクラスを追加
②hoverイベントを設定
・addClass
javascript側で指定した要素にクラスを追加することができる
$('セレクタ').addClass('hoge');
クラス名の前にドットは不要
・removeClass
$('セレクタ').removeClass('hoge');
addClassと反対
・アコーディオン
押したら開くやつ
①答えの部分はCSSで非表示にする
②3つの質問部分には同一のclass名を付与
③それらのclickイベントを作成
・hasClass
そのクラスを持っているかを判定するときに使う
$('セレクタ').hasClass('open');
・jQueryオブジェクトの構造
$('li')とやったら、実は配列のようにポンポンポン入ってくる
・eqメソッド
eq番目の要素を取り出せる
$('セレクタ').eq(2).css(うんたら);
0オリジン
・index
$('セレクタ').index( $('.active') );
li要素における.active要素のインデックス番号を取得する
var index= $('li').index($(this));
選択したやつのインデックス番号を取得するのに便利!eqとの組み合わせ!
・nextとprev
1つ次の要素を取り出したり、1つ次の要素を取り出せる。
インデックス番号ではない点に注意!
・length
オブジェクトの数を取得できる
かっこはいらない
・attr
属性の値を取得・設定できる
$('').attr('属性','値');
$('').attr('属性');←値を取得できる
・val
$('セレクタ').val();
inputタグの入力値を取得する
textでもできちゃったりするけど絶対valを使うように!
※varと間違えやすいからまじで気をつけてな!
・submit
$('セレクタ').submit(function(){
// フォームの値を取得する
});
・入力が空
''
・文字列を連結するとき
javascriptで、+を使った
・animateメソッド
$('セレクタ').animate({
'プロパティ':'変更後の値'
},ミリ秒);
・scrollTop
一番上までスクロールする
$('html,body').scrollTop(0);
・scrollTop応用
一番上までなめらかスクロールする
$('html,body').animate({
'scrollTop': 0
}, 'slow');
・ナビゲーション
任意の箇所までスクロール
offset()だと表示位置を上と左で取得
offset().topだと上からの距離が取得できる
topはかっこ要らない!
残り43講座
この記事が気に入ったらサポートをしてみませんか?