jQueryについて最近学んだこと
最近Progateで本格的にjQueryについて学び始めました。
もう一度jQueryを学んだところの再確認したいので、記事にいたします。(すぐに忘れてしまうもんで💦)
$(function(){
$('セレクタ').イベント(function(){
$('どこを').メソッド();
});
});
これをちゃんとしたコード例で書くと...
$(function(){
$('#hoge-btn').click(function() {
$('.hoge-img').fadeOut();
});
});
要約すると、
id指定hoge-btnを.click(クリックされたら)
class指定hoge-imgを.fadeOut(フェードアウト)させる
という意味になります！
$('.lesson').hover(function() {
$(this).find('.text-contents').show();
},
function() {
$(this).find('.text-contents').hide();
});
| 使ったことのあるイベント一覧 | 効果 |
|---|---|
| .click | 要素がクリックされたら |
| .hover | 要素がhoverされたら |
| 使ったことのあるメソッド一覧 | 引数の表記法 | 効果 |
|---|---|---|
| .fadeIn(); | 'slow' ・ １０００=1秒 | ふわっとアニメーション |
| .fadeOut(); | 'slow' ・ １０００=1秒 | ふわっと消えるアニメーション |
| .slideUp(); | 'slow' ・ １０００=1秒 | 下から上へスライドアニメーション |
| .slideDown(); | 'slow' ・ １０００=1秒 | 上から下へスライドアニメーション |
| .children(); | 指定したセレクタの一階層下の子要素指定 | |
| .hide(); | 要素を非表示させる | |
| .show(); | 要素を表示させる | |
| .css(); | 'display' , 'none' ・ 'color' , 'red' | CSSを指定できる |
| .html(); | 'こんにちは' | html内の書き換え、等 |
まだまだわからないことがあるので、今は空白のままですが随時更新していきます。