はじめに
今までずっとバックエンドを担当していたのですが、最近フロント寄りを担当する機会がありました。
その際にはじめて本格的にjQueryを触ったので、メモを纏めてみました。
セレクタで指定の要素を取得する
$("要素").hoge();
等の操作で指定した要素を操作します。
参考サイト
http://www.detelu.com/blog/2011/11/jquery-selector-traversing/
ユーザの操作(クリック、マウスオーバー等)によって発火させる
.click();「クリックしたイベントを追加する関数」
<p>押されてないよ</p>
<button>クリックしてね</button>
$('button').click(function(){
$('p').text("押されました");
});
押されてないよ
押されました
参考サイト
.hover();「マウスを乗せた時、離した時のイベントを追加する関数」
第一引数：マウスを乗せた時の動作
第二引数：マウスを離れた時の動作
となります。
<p>マウスをボタンに乗せてみよ</p>
<button>ボタン</button>
$('button').hover(function(){
$('p').text('マウスが乗ってるよ');
},
function(){
$('p').text('マウスが乗ってないよ');
});
マウスが乗ってるよ
マウスが乗ってないよ
参考サイト
http://www.jquerystudy.info/reference/events/hover.html
要素を隠したり、表示したりする
.hide();「指定した要素を隠す」
<body>
<p>Pを表示しています</p>
<button>pを消します</button>
</body>
$('button').click(function(){
$('p').hide();
});
また引数にタイマーをセットすることでゆっくり消す事もできます
$('button').click(function(){
$('p').hide(2000);
});
参考サイト
http://www.task-notes.com/entry/20150112/1420994026
.fadeOut()「指定した要素を要素をアニメーションを付けて隠す」
指定した要素を要素をアニメーションを付けて隠します。
ふわっと消えます。
<body>
<p>Pを表示しています</p>
<button>pふわっと消します</button>
</body>
$('button').click(function(){
$('p').fadeOut();
});
また引数にタイマーをセットすることでゆっくり消す事もできます。
$('button').click(function(){
$('p').fadeOut(2000);
});
参考サイト
http://www.buildinsider.net/web/jqueryref/007
.slideUp();「指定した要素を要素をアニメーションを付けて隠す」
指定した要素を要素をアニメーションを付けて隠します。
下から上に向かって消えます。
<body>
<p>Pを表示しています</p>
<button>下から上に消します</button>
</body>
$('button').click(function(){
$('p').slideUp();
});
また引数にタイマーをセットすることでゆっくり消す事もできます。
$('button').click(function(){
$('p').slideUp(2000);
});
参考サイト
http://h2ham.seesaa.net/article/305452745.html
.show();「隠れている要素を表示する」
<body>
<p style="display: none">Pを表示しています</p>
<button>pを表示します</button>
</body>
$('button').click(function(){
$('p').show();
});
また引数にタイマーをセットすることでゆっくり表示することも出来ます。
$('button').click(function(){
$('p').show(2000);
});
参考サイト
http://www.buildinsider.net/web/jqueryref/007
.fadeIn();「隠れている要素をアニメーションを付けて表示する」
隠れている要素をアニメーションを付けて表示します。
ふわっと表示します。
<body>
<p style="display: none">Pを表示しています</p>
<button>pを表示します</button>
</body>
$('button').click(function(){
$('p').fadeIn();
});
また引数にタイマーをセットすることでゆっくり表示することも出来ます。
$('button').click(function(){
$('p').fadeIn(2000);
});
参考サイト
http://www.buildinsider.net/web/jqueryref/007
.slideDown();「隠れている要素をアニメーションを付けて表示する」
隠れている要素をアニメーションを付けて表示します。
上から下に表示します。
<body>
<p style="display: none">Pを表示しています</p>
<button>pを表示します</button>
</body>
$('button').click(function(){
$('p').slideDown();
});
また引数にタイマーをセットすることでゆっくり表示することも出来ます。
$('button').click(function(){
$('p').slideDown(2000);
});
参考サイト
http://www.buildinsider.net/web/jqueryref/007
値の取得、変更、削除、追加等をおこなう
.css()「特定の要素に対して、CSSの取得、変更、削除、追加をおこなう」
p {
color: #ff0000;
}
取得
取得するにはプロパティのみセットする。
$("p").css("color");
変更
変更するにはプロパティと値ををセットする。
$("p").css("color", "#000000");
削除
削除するにはプロパティと空の値ををセットする。
$("p").css("font-size", "10px");
参考サイト
http://kawatama.net/web/1744
.attr();「特定の要素を取得、変更する」
<a href="http://qiita.com/">Qiitaに飛びます</a>
取得
取得するにはプロパティをセットする。
$('a').attr('href');
// ▶ http://qiita.com/
変更
変更するにはプロパティと値ををセットする。
$('a').attr('href', 'http://qiita.com/Kaki_Shoichi');
// ▶ http://qiita.com/Kaki_Shoichi
参考サイト
http://www.buildinsider.net/web/jqueryref/007
.text();「要素配下のテキストを取得、変更、削除する」
<p>Pを表示しています</p>
取得
取得するのに引数は不要です。
$('p').text();
// ▶ Pを表示しています
変更
変更するには値ををセットする。
$('a').text('pの文言を変更しました');
// ▶ pの文言を変更しました
削除
変更するには空の値ををセットする。
$('a').text('');
// ▶
参考サイト
http://www.buildinsider.net/web/jqueryref/004
.html();「指定した要素内のHTMLを取得、変更、削除する」
<div>
<p>Pを表示しています</p>
</div>
取得
取得するのに特に引数は必要ありません。
$('div').html();
// ▶ <p>Pを表示しています</p>
変更
変更するにはタグをセットする。
$('div').html(('<b>pの要素をbに変更します</b>');
// ▶ <b>pの要素をbに変更します</b>
削除
変更するには空の値ををセットする。
$('div').html('');
// ▶
参考サイト
http://www.task-notes.com/entry/20141009/1412787352
.val();「SELECTタグ等のユーザが入力する要素を取得する」
<select id="select-button">
<option value="1">選択1</option>
<option value="2">選択2</option>
</select>
$("#button").click(function () {
var text = $(this).text();
$("#select-button").val(text);
});
参考サイト
http://qiita.com/kazu56/items/36b025dac5802b76715c
.find();「指定した親要素の中の全ての子要素を取得する」
<div id="element">
<p>一番上のpです</p>
<div>
<p>次のpです</p>
</div>
</div>
$('#element').find('p').text('全部変わるよ');
全部変わるよ
全部変わるよ
参考サイト
http://www.jquerystudy.info/reference/traversing/find.html
.children();「指定した親要素の中のひとつ下の子要素を取得する」
<div id="element">
<p>一番上のpです</p>
<div>
<p>次のpです</p>
</div>
</div>
$('#element').children('p').text('一番上だけ変わるよ');
一番上だけ変わるよ
次のpです
参考サイト
http://www.jquerystudy.info/reference/traversing/children.html
.addClass();「要素にクラスを追加する」
クラスを追加する際に#や.は不要です。
<p>クラスを追加してないよ</p>
<button>クラスの追加</button>
.color{
color: #ff0000;
}
$('button').click(function(){
$('p').addClass('color');
$('p').text('クラスを追加して赤字になったよ');
})
参考サイト
http://www.jquerystudy.info/reference/attributes/addClass.html
.removeClass();「要素のクラスを削除する」
クラスを削除する際に#や.は不要です。
<p class='color'>colorクラスが付いてるよ</p>
<button>クラスの削除</button>
.color{
color: #ff0000;
}
$('button').click(function(){
$('p').removeClass('color');
$('p').text('クラスを削除して黒字になったよ');
})
参考サイト
http://www.jquerystudy.info/reference/attributes/removeClass.html
.hasClass();「クラスがアタッチされているかを判定する」
<p>colorクラスを付けるよ</p>
<button>クラスの操作</button>
.color{
color: #ff0000;
}
$('button').click(function(){
if($('p').hasClass('color')){
$('p').removeClass('color');
$('p').text('クラスを削除して黒字になったよ');
}else{
$('p').addClass('color');
$('p').text('クラスを追加して赤字になったよ');
}
});
参考サイト
http://qiita.com/mimoe/items/312bf70547825f5d9133
おわりに
jQuery面白ですね！
まだまだ知らないことも多そうなので新しいメソッド等を仕入れ次第随時この記事を更新していきます！
また、初心者のメモ帳なのでベスト・プラクティスではない処理等もあるかもしれません…。
その際はご指摘頂けると幸いです！