こんにちは。mito（@mito_works）です。
今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。
30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。
#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。
mito
30DAYSトライアルの2ndステージ。より実践レベルのトライアルです！
momo
2ndのDAY4~6はprogateを使ってjQueryを学んでいくよ！
jQueryとは
QueryはJavaScriptのライブラリの1つでHTMLとCSSだけでは実現できなかったアニメーションなどの動きを実現します。
基本の書き方
- jQueryオブジェクトを作成
- そのjQueryオブジェクトに対してメソッド（機能）を呼び出す
①$(‘セレクタ’)②.メソッド(引数);
例） $(‘h1’).hide();
momo
jQueryのオブジェクトは$(‘セレクタ’)で生成される配列のような構造をしているものだよ！セレクタにはHTMLのタグ名やclass名などを指定してね。
mito
jQueryのオブジェクトの中身は合致した要素が配列のように並んでいるんだね〜。
Tips
メソッドのhide();と似たものとしてfadeOut();があります。後者の場合アニメーションをつけることが可能です。
| 要素を非表示にしたい | hide(); fadeOut(); slideUp(); |
|---|---|
| 非表示を表示したい | show(); fadeIn(); slideDown(); |
| css要素を変更したい | css(‘プロパティ名’,’値’;) ex) css(‘display’,’block’); |
| 文字列を置き換えたい | text(”置き換えたい内容); |
| htmlを置き換えたい | html(置き換えたい内容); |
| 子要素全て取得したい | find(‘セレクタ’); |
| 1階層下の子要素を取得したい | children(‘セレクタ’); |
| クラスを付与したい | addClass(‘クラス名’); |
| クラスを外したい | removeClass(‘クラス名’); |
| 引数に指定したクラスを、オブジェクトが持っているか判定したい | hasClass(‘クラス名’); |
| 指定したindex番号の要素を取り出したい | eq(数字); |
| 特定の要素のindex番号を取得したい | index($(‘セレクタ’)); ex)$(‘.index-btn’).index($(this)); //クリックしたボタンの番号取得 |
| 兄弟要素（同じ階層の要素）の中から一つ前の要素を取得したい | prev(); |
| 兄弟要素（同じ階層の要素）の中から一つ後の要素 | next(); |
| 要素の個数を取得したい | length(); |
| HTML属性をget、setしたい | attr(); |
| 値を取得したい | val(); |
| 値をセットしたい | val(‘セットしたい値’); |
| アニメーションをつけたい | animate({‘プロパティ’: 値},秒数); |
| ページ上部から指定したpxの場所へ移動したい | $(‘html, body’).scrollTop(0); //最上部の場合は0 |
| スクロールにアニメーションをつけたい | $(‘html, body’).animate({‘scrollTop’: 0}, 時間); |
| 要素の表示位置を取得したい | $(‘h1’).offset(); //h1要素の表示位置 (topからxx、leftからxxなど) $(‘h1’).offset().top; //トップからh1の距離 |
Tips
attr(‘id’, ‘topMessage’)のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。そして、第二引数を指定しない場合は、その属性の値を取得できます。
if文の中身の=は2つで繋げます。
if (Index == 0) {
$('.prev-btn').hide();
} else if (Index == $('.slide').length-1) {
$('.next-btn').hide();
}classとidの使いわけ
idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されます。
なので、jQueryオブジェクトのセレクタにはidを使うことが推奨されています。
処理を行うタイミングの指定
イベントを用いると処理を行うタイミングを設定できます。
mito
例えば、このボタンが押されたらモーダルを開くなどです。
$(‘セレクタ’).イベント名(function(){ });
$('#open-btn').click(function(){
$('#modal').fadeIn();
});| クリック時のイベント | click(function(){}); |
|---|---|
| ホバー時のイベント | hover(function(){},funtion(){}); |
| 送信時のイベント | submit(function(){}); |
momo
hoverはマウスを①乗せたとき、②離した時の設定をするため引数は2つだよ。
thisの使い方
thisを使うと、実際にイベントが起こった要素を取得できます。
momo
例えば複数行あるリストの中のクリックした行のみの要素を取得したい場合などに使うよ。
$('.li').click(function(){
$(this).css('color','blue');
});
変数の宣言
変数宣言にはvarを使います。
var 変数名= 要素；
jQuery使用の準備
- <head>タグの中でjQueryライブラリを読み込む
- </body>の直前にjsファイルを読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="script.js"></script>momo
<script>はCSSファイルの読み込みのように<head>タグの中にも書けるけれど、</body>の直前に書くことで、Webページの表示速度をより早めることができるよ！
カスタムデーター属性
属性は自分でつくることもできます。これをカスタムデータ属性と言います。
momo
「data-」から始まる属性名を自由に設定できるよ！
ABOUT ME
