More than 3 years have passed since last update.

【jQuery】val(),prev(),on()

Posted at 2020-09-08

jQueryについて学習内容を備忘録としてまとめます。

val()

html要素にval()を実行することでvalue要素を取得することができます。


//html
<button id="btn" value="a">ボタン</button>

//jQueryの処理
var btn = $('#btn').val();
console.log( btn );

//実行結果
a

実行結果にある通り、htmlのvalue要素であるaを表示しています。

対象要素の直前にあるHTML要素を取得することができます。


//html
<div class="test">
	<p>testtest</p>
	<a>リンク</a>
</div>
//jQueryの処理
var result = $('a').prev().text();
console.log(result);

//実行結果
testtest

このようにaの直前にあるtesttestが実行結果として表示されます。

さまざまなイベント処理を記述するためのメソッドになります。
たとえば、マウス操作やフォームから何か送信されることが該当になります。


//html
<button>ボタン</button>
//jQueryの処理
 $('button').on('click', function() {
    
        console.log('クリックされました！');
    
    })
//実行結果
クリックされました！

ボタンをクリックするとjQueryが稼働してクリックされました！と表示されます。