もくじ
- eqメソッド（指定インデックス番号の要素を取得）
- indexメソッド（インデックス番号を取得）
- prevメソッドとnextメソッド
- lengthメソッド（個数を取得）
- textメソッド（要素の文字列を取得/変更）
- attrメソッド（属性を取得/追加）
- valメソッド（inputの値を取得）
こちらでも少し紹介していますが、さらにこういうのがあると知っていると使えるメソッドを紹介したいと思います。
eqメソッド（指定インデックス番号の要素を取得）
jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できます。
<ul> <li class="sample">インデックス0</li> <li class="sample">インデックス1</li> <li class="sample">インデックス2</li> </ul>
$(function() {
$('.sample').eq(1).css('color', 'red');
});
取得したインデックスの要素に対してcssメソッドを付加しました。
インデックス番号は0から始まることに注意しましょう。
indexメソッド（インデックス番号を取得）
特定の要素のインデックス番号を取得することができます。もしマッチする要素がなければ -1 を返します。
<ul> <li class="sample">インデックス0</li> <li class="sample">インデックス1</li> <li class="sample">インデックス2</li> </ul>
クリックするとアラートが出て、インデックス番号が表示されるjQueryを書きます。
indexメソッドを使用してインデックス番号を取得し、その要素に対してalert()を出します。
$('li').on('click', function () {
var index = $('li.sample').index(this);
alert(index);
});
「インデックス0」をクリックすると「0」と出ます。
「インデックス2」をクリックすると「2」と出ます。
thisの構文についてはこちら↓
prevメソッドとnextメソッド
兄弟要素（同じ階層の要素）の中から、prevメソッドなら1つ前の要素を、nextメソッドなら1つ後ろの要素を取得することができます。
<ul> <li>prev</li> <li class="sample">sample</li> <li>next</li> </ul>
$(function() {
$('.sample').prev().css('color', 'red');
$('.sample').next().css('color', 'blue');
});
lengthメソッド（個数を取得）
lengthを用いると、要素の個数を取得できます。
<ul> <li class="sample">あああ</li> <li class="sample">いいい</li> <li class="sample">ううう</li> </ul>
$(function() {
var length = $('li.sample').length;
alert(length);
});
textメソッド（要素の文字列を取得/変更）
引数に指定した文字列を要素にセットするメソッドでもあり、逆に引数を指定せずに用いることで、要素内の文字列を取得することもできます。
<h1>見出し</h1>
このHTMLに対して引数の有無の違いをみてみましょう。
引数 指定
$(function() {
$('h1').text('こんにちは');
});
要素の中身を、引数で指定して変更することができました。
引数 未指定
$(function() {
var txt = $('h1').text();
alert(txt);
});
要素を取得できました。
attrメソッド（属性を取得/追加）
要素の様々な属性の値を取得や変更ができるメソッドです。
第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。第二引数を指定しない場合は、その属性の値を取得できます。
引数 指定
<h1>見出し</h1>
$(function() {
$('h1').attr('id', 'title');
});
デベロッパーツールで確認すると、指定した要素にid属性が追加されていることがわかります。
属性が存在している場合は上書きになります。
<h1 id="header">見出し</h1>
$(function() {
$('h1').attr('id', 'title');
});
引数 複数指定
属性を複数指定したい場合は、引数をオブジェクトで渡しましょう。
<h1>見出し</h1>
$(function() {
$('h1').attr({
id: 'my_id',
class: 'my_class',
name: 'my_name',
});
});
属性を複数指定できました。
引数 未指定
<h1 id="title">見出し</h1>
$(function() {
var title = $('h1').attr('id');
alert(title);
});
属性の中身を取得できました。
valメソッド（inputの値を取得）
<form> <input type="text" id="name" placeholder="name"> <button type="submit">送信</button> </form>
このHTMLに対して引数の有無の違いをみてみましょう。
引数 指定
inputタグの値を設定できます。
$(function() {
var name = $('#name').val('なまえ');
});
ページをロードした時にはすでに値が入力されている状態になります。
引数 未指定
inputタグに入力された値を取得できます。
$(function() {
$('form').submit(function(){
var name = $('#name').val();
alert(name);
})
});
テキストボックスに入力して送信すると、入力した値を取得できます。
