jQueryとこの記事について
『jQuery』とは、効果やアニメーションを簡単に実装できるJavaScriptライブラリ。
jQueryを使うとWEBページにアニメーションや効果を簡単につけることができる。
jQueryを勉強中(ど素人)なのですが、復習も兼ねて学んだメソッドを
下記にメモとして記述していこうと思います。随時更新していきます。
hide
- セレクタ(HTMLのタグ名やclass名,idなどを指定する)で指定した要素を隠すことができる。
例: $('h1').hide();
show
- セレクタで指定した隠れている要素を表示することができる。
例: $('h1').show(slow);
fadeOut
- セレクタで指定した要素を徐々に隠すことができる。
- アニメーションの速度は()内に引数として指定することができる。(1.0秒 → 1000、slowなど)
例: $('.class').fadeOut(1000);
fadeIn
- セレクタで指定した要素を徐々に表示ことができる。
例: $('.class').fadeIn(slow);
slideUp
- セレクタで指定した要素を下から上にスライドしながら隠すことができる。
例: $('#id').slideUp(1000);
slideDown
- セレクタで指定した要素を上から下にスライドしながら表示することができる。
例: $('#id').slideUp(slow);
css
- セレクタで指定したCSSを変更することができる。引数①にプロパティ、引数②にプロパティの値を設定する。
例: $('p').css('color','blue');
※ちなみに、
$('img').css('display','none');⇦ hideメソッドと同じ
$('img').css('display','block');⇦ showメソッドと同じ
text
- セレクタで指定した要素のHTMLの中身を引数で指定した内容に書き換えることができる。
例: $('p').text('アイウエオ');
html
- セレクタで指定した要素の中身のHTMLを引数で指定したものに書き換えることができる。
例: $('p').html('アイウエオ');
find
- セレクタで指定した要素の子孫要素から、引数で指定した要素を全て取得することができる。
例: $('.class').find('p');
この場合、'.class'というクラス内の'p'要素を取得することができる。
children
- セレクタで指定した要素の子要素(1階層分)から、引数で指定した要素を取得することができる。
例: $('.class').children('p');