Help us understand the problem. What is going on with this article?

jQuery初心者のメモ帳

More than 3 years have passed since last update.

はじめに

今までずっとバックエンドを担当していたのですが、最近フロント寄りを担当する機会がありました。
その際にはじめて本格的にjQueryを触ったので、メモを纏めてみました。

セレクタで指定の要素を取得する

js
$("要素").hoge();

等の操作で指定した要素を操作します。

参考サイト
http://www.detelu.com/blog/2011/11/jquery-selector-traversing/

ユーザの操作(クリック、マウスオーバー等)によって発火させる

.click();「クリックしたイベントを追加する関数」

html
<p>押されてないよ</p>
<button>クリックしてね</button>
js
$('button').click(function(){
  $('p').text("押されました");
});
押下前
押されてないよ
押下後
押されました

参考サイト

http://webkaru.net/jquery/click-event/

.hover();「マウスを乗せた時、離した時のイベントを追加する関数」

第一引数:マウスを乗せた時の動作
第二引数:マウスを離れた時の動作
となります。

html
<p>マウスをボタンに乗せてみよ</p>
<button>ボタン</button>
js
$('button').hover(function(){
  $('p').text('マウスが乗ってるよ');
},
function(){
  $('p').text('マウスが乗ってないよ');
});
マウスが乗った時
マウスが乗ってるよ
マウスが乗ってない時
マウスが乗ってないよ

参考サイト
http://www.jquerystudy.info/reference/events/hover.html

要素を隠したり、表示したりする

.hide();「指定した要素を隠す」

html
<body>
  <p>Pを表示しています</p>
  <button>pを消します</button>
</body>
js
$('button').click(function(){
  $('p').hide();
});

また引数にタイマーをセットすることでゆっくり消す事もできます

js
$('button').click(function(){
  $('p').hide(2000);
});

参考サイト
http://www.task-notes.com/entry/20150112/1420994026

.fadeOut()「指定した要素を要素をアニメーションを付けて隠す」

指定した要素を要素をアニメーションを付けて隠します。
ふわっと消えます。

html
<body>
  <p>Pを表示しています</p>
  <button>pふわっと消します</button>
</body>
js
$('button').click(function(){
  $('p').fadeOut();
});

また引数にタイマーをセットすることでゆっくり消す事もできます。

js
$('button').click(function(){
  $('p').fadeOut(2000);
});

参考サイト
http://www.buildinsider.net/web/jqueryref/007

.slideUp();「指定した要素を要素をアニメーションを付けて隠す」

指定した要素を要素をアニメーションを付けて隠します。
下から上に向かって消えます。

html
<body>
  <p>Pを表示しています</p>
  <button>下から上に消します</button>
</body>
js
$('button').click(function(){
  $('p').slideUp();
});

また引数にタイマーをセットすることでゆっくり消す事もできます。

js
$('button').click(function(){
  $('p').slideUp(2000);
});

参考サイト
http://h2ham.seesaa.net/article/305452745.html

.show();「隠れている要素を表示する」

html
<body>
  <p style="display: none">Pを表示しています</p>
  <button>pを表示します</button>
</body>
js
$('button').click(function(){
  $('p').show();
});

また引数にタイマーをセットすることでゆっくり表示することも出来ます。

js
$('button').click(function(){
  $('p').show(2000);
});

参考サイト
http://www.buildinsider.net/web/jqueryref/007

.fadeIn();「隠れている要素をアニメーションを付けて表示する」

隠れている要素をアニメーションを付けて表示します。
ふわっと表示します。

html
<body>
  <p style="display: none">Pを表示しています</p>
  <button>pを表示します</button>
</body>
js
$('button').click(function(){
  $('p').fadeIn();
});

また引数にタイマーをセットすることでゆっくり表示することも出来ます。

js
$('button').click(function(){
  $('p').fadeIn(2000);
});

参考サイト
http://www.buildinsider.net/web/jqueryref/007

.slideDown();「隠れている要素をアニメーションを付けて表示する」

隠れている要素をアニメーションを付けて表示します。
上から下に表示します。

html
<body>
  <p style="display: none">Pを表示しています</p>
  <button>pを表示します</button>
</body>
js
$('button').click(function(){
  $('p').slideDown();
});

また引数にタイマーをセットすることでゆっくり表示することも出来ます。

js
$('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を取得、変更、削除する」

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タグ等のユーザが入力する要素を取得する」

html
<select id="select-button">
  <option value="1">選択1</option>
  <option value="2">選択2</option>
</select>
js
$("#button").click(function () {
  var text = $(this).text();
  $("#select-button").val(text);
});

参考サイト
http://qiita.com/kazu56/items/36b025dac5802b76715c

.find();「指定した親要素の中の全ての子要素を取得する」

html
<div id="element">
  <p>一番上のpです</p>
  <div>
    <p>次のpです</p>
  </div>
</div>
js
$('#element').find('p').text('全部変わるよ');
出力結果
全部変わるよ

全部変わるよ

参考サイト
http://www.jquerystudy.info/reference/traversing/find.html

.children();「指定した親要素の中のひとつ下の子要素を取得する」

html
<div id="element">
  <p>一番上のpです</p>
  <div>
    <p>次のpです</p>
  </div>
</div>
js
$('#element').children('p').text('一番上だけ変わるよ');
出力結果
一番上だけ変わるよ

次のpです

参考サイト
http://www.jquerystudy.info/reference/traversing/children.html

.addClass();「要素にクラスを追加する」

クラスを追加する際に#.は不要です。

html
<p>クラスを追加してないよ</p>
<button>クラスの追加</button>
css
.color{
  color: #ff0000;
}
js
$('button').click(function(){
  $('p').addClass('color');
  $('p').text('クラスを追加して赤字になったよ');
})

参考サイト
http://www.jquerystudy.info/reference/attributes/addClass.html

.removeClass();「要素のクラスを削除する」

クラスを削除する際に#.は不要です。

html
<p class='color'>colorクラスが付いてるよ</p>
<button>クラスの削除</button>
css
.color{
  color: #ff0000;
}
js
$('button').click(function(){
  $('p').removeClass('color');
  $('p').text('クラスを削除して黒字になったよ');
})

参考サイト
http://www.jquerystudy.info/reference/attributes/removeClass.html

.hasClass();「クラスがアタッチされているかを判定する」

html
<p>colorクラスを付けるよ</p>
<button>クラスの操作</button>
css
.color{
  color: #ff0000;
}
js
$('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面白ですね!
まだまだ知らないことも多そうなので新しいメソッド等を仕入れ次第随時この記事を更新していきます!
また、初心者のメモ帳なのでベスト・プラクティスではない処理等もあるかもしれません…。
その際はご指摘頂けると幸いです!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away