jQueryでよく使う基本メソッドをまとめてみた。

基本jQueryまとめ

基本的なjQueryをまとめていきます。
問題がなければコピペで使用できるかと思います。

①クリックしたらfadeOutさせる

▼ 以下、デモになります。

私をクリックしたらfadeOutさせるよ

コード解説

▼ HTML

<p class="fadeOut">私をクリックしたらfadeOutさせるよ</p>

▼ JavaScript

$('.fadeOut').click(function(){
$('.fadeOut').slideUp(1500);
});

▼ JavaScript解説

$(‘.fadeOut’).click(function(){: 「.fadeOut」をクリックしたら実行。

$(‘.fadeOut’).slideUp(1500);: 「.fadeOut」を1.5秒かけてslideUp。

});

②クリックしたらclassを追加させて色を変える

▼ 以下、デモになります。

私をクリックしたら赤色になるよ

コード解説

▼ HTML

<p class="txt_ni">私をクリックしたら赤色になるよ</p>

▼ CSS

.Red {
color: red;
}

▼ JavaScript

$('.txt_ni').click(function(){
$('.txt_ni').addClass('Red');
});

▼ JavaScript解説

$(‘.txt_ni’).click(function(){: 「.txt_ni」をクリックしたら実行。

$(‘.txt_ni’).addClass(‘Red’);: 「.txt_ni」に「.Red」を追加させて赤色に変える。

});

③ボタンをクリックしたら要素を非表示にする

▼ 以下、デモになります。

下記テキストを消します。

私は消されます。

コード解説

▼ HTML

<div class="demo_btn san" style="cursor:pointer;">
<a href="#" style="pointer-events: none;">下記テキストを消します。</a>
</div>
<p class="txt_delete">私は消されます。</p>

▼ JavaScript

$('.san').click(function(){
$('.txt_delete').hide(1500);
});

▼ JavaScript解説

$(‘.san’).click(function(){: 「.san」をクリックしたら実行。

$(‘.txt_delete’).hide(1500);: 「.txt_delete」の要素を1.5秒かけて消す。

});

④要素をクリックしたらclassをとる

▼ 以下、デモになります。

私をクリックすると黒色になります。

コード解説

▼ HTML

<p class="txt_yon Red">私をクリックすると黒色になります。</p>

▼ CSS

.Red {
color: red;
}

▼ JavaScript

$('.txt_yon').click(function() {
$('.txt_yon').removeClass('Red');
});

▼ JavaScript解説

$(‘.txt_yon’).click(function() {: 「.txt_yon」をクリックしたら実行。

$(‘.txt_yon’).removeClass(‘Red’);: 「.txt_yon」の要素からclass「.Red」をとる。
文字が黒になります。

});

⑤ボタンをクリックして非表示の要素を表示させる

▼ 以下、デモになります。

私を押すと要素を表示させるよ。

コード解説

▼ HTML

<div class="demo_btn go" style="cursor:pointer;">
<a href="#" style="pointer-events: none;">私を押すと要素を表示させるよ。</a>
</div>
<p class="go_txt" style="display:none;">表示させられた…。</p>

▼ JavaScript

$('.go').click(function() {
$('.go_txt').show(1500);
});

▼ JavaScript解説

$(‘.go’).click(function() {: 「.go」をクリックしたら実行。

$(‘.go_txt’).show(1500);: 「.go_txt」を1.5秒かけて表示させる。

});

⑥指定したセレクタよりも下の階層で「指定した要素」を全て取得

▼ 以下、デモになります。

どっちが選ばれるでしょう

僕を押せば誰が選ばれたかわかるよ

コード解説

▼ HTML

<div class="findDemo">
<p>どっちが選ばれるでしょう</p>
<div class="findDemo2">
<p>どっちが選ばれるでしょう</p>
</div>
</div>
<p class="findDemoBtn" style="cursor: pointer;">僕を押せば誰が選ばれたかわかるよ</p>

▼ JavaScript

$('.findDemoBtn').click(function() {
$('.findDemo').find('p').html('二人とも選ばれたよ！').css('color','red');
});

▼ JavaScript解説

$(‘.findDemoBtn’).click(function() {: 「.findDemoBtn」をクリックしたら実行。

$(‘.findDemo’).find(‘p’).html(‘二人とも選ばれたよ！’).css(‘color’,’red’);: 「.findDemo」より下の「p」の文字を全て「二人とも選ばれたよ！」に変更。
また文字色を赤に変更。

});

⑦指定したセレクタよりも一階層下の「指定した要素」を取得

▼ 以下、デモになります。

どっちが選ばれるでしょう

僕を押せば誰が選ばれたかわかるよ

コード解説

▼ HTML

<div class="childrenDemo">
<p>どっちが選ばれるでしょう</p>
<div class="childrenDemo2">
<p>どっちが選ばれるでしょう</p>
</div>
</div>
<p class="childrenDemoBtn" style="cursor: pointer;">僕を押せば誰が選ばれたかわかるよ</p>

▼ JavaScript

$('.childrenDemoBtn').click(function() {
$('.childrenDemo').children('p').html('僕が選ばれたよ！').css('color','red');
});

▼ JavaScript解説

$(‘.childrenDemoBtn’).click(function() {: 「.childrenDemoBtn」をクリックしたら実行。

$(‘.childrenDemo’).children(‘p’).html(‘僕が選ばれたよ！’).css(‘color’,’red’);: 「.childrenDemo」より１階層下の「p」の文字を「僕が選ばれたよ！」に変更。
また文字色を赤に変更。

});