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講座