はじめに
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('クラスを追加して赤字になったよ');
}
});