jQuery 基本集②~DOM操作~

イベント

clickイベント

クリックした時に処理が実行される。

$('セレクタ').click(function(){
    //処理
});

submitイベント

フォームが送信されたときに処理が実行される。
送信ボタンのクリック時のみでなく、「Enter」キーでフォームが送信された場合もイベントが発生する。

$('セレクタ').submit(function(){
   //処理
});

hoverイベント

マウスをのせた時の処理、マウスをはずした時の処理を指定。

$('セレクタ').hover(
function(){
//マウスをのせたとき
},
function(){
//マウスを対象からはずしたとき
});

HTML/CSSを書き換える

cssメソッド

CSSを書き換える。

$('セレクタ名').css('プロパティ名', '値');

//複数のcssをてきようする場合
$('セレクタ名').css({
        'display': 'block',
        'position': 'relative',
        'top': '700px',
        'left': '100px',
        'opacity': '0'
});

textメソッド

HTMLのタグ内のテキストを書き換える。
引数を空にすると、テキストを取得可能。


$('セレクタ').text('書き換える文字列');

htmlメソッド

HTMLのテキストをタグも含めて追加できる。
HTMLの記述をそのまま引数にブッ込むことでHTMLを入れ替える。

$('セレクタ').html('<タグ名>書き換える文字列');

addClassメソッド

クラス名を追加。


$('セレクタ').addClass('クラス名');

removeClassメソッド

クラス名を削除。


$('セレクタ').removeClass('クラス名');

toggleイベント

HTML要素を簡単に表示・非表示することができるメソッド

$('セレクタ1').click(function() {
  $('セレクタ2').toggle(2000);  //セレクタ1をクリックした時にセレクタ2を２秒かけて表示・非表示させる
})

fadeToggleメソッド

HTML要素をフェードイン・アウトさせながら表示・非表示することができるメソッド

$('セレクタ1').click(function() {
  $('セレクタ2').fadeToggle();  //セレクタ1をクリックした時にセレクタ2をフェードイン・アウトさせながら表示・非表示させる
})

slideToggle

特定の要素を縦方向にアニメーションしながら表示・非表示することができるメソッド

$('ul').click(function() {
  $(this).next().slideToggle();  //ulをクリックした時に一つ後の要素を縦方向に表示・非表示させる
                                 //今回でいう一つ後の要素はliであると想定しておく。
})

toggleClassメソッド

class属性値を追加したり削除したりを繰り返すことが可能なメソッド

$('セレクタ１').click(function() {
  $('セレクタ2').toggleClass('文字を赤くさせるクラス');  //セレクタ1をクリックした時にセレクタ２に文字を赤くさせるクラスを追加・削除することが出来る
})

attrメソッド

第一引数に属性名、第二引数にその属性値を指定することで属性をセット。
第二引数を指定しない場合は、その属性の値を取得。

$('セレクタ').attr('属性名', '属性値');

valメソッド

$('セレクタ').val();
inputタグに入力されている値を取得。
selectタグの選択中の値（optionタグのvalue属性の値）を取得することもできる。
inputタグに値をセットすることもできる。


$('セレクタ').val('文字列');

要素を取得する

findメソッド

すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得。


$('親セレクタ').find('.処理したいセレクタ').メソッド();

parentメソッド

1つ上の階層である「親要素」を取得することができる。


$('セレクタ').parent();

parentsメソッド

複数の階層構造内に配置された要素に対しての、全ての親要素を取得。
引数にセレクタ指定することで特定の親要素だけを取得することもできる。


$('セレクタ').parents();

closestメソッド

親要素内にある特定の要素を取得。
指定した要素が見つかるまでどんどん親要素をさかのぼっていく。
ただし、指定した要素が2つ以上ある場合に、対象となる要素から一番最初に合致した要素を1つだけしか取得しない。

$('セレクタ').closest(セレクタ);

childrenメソッド

指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得。


$('親セレクタ').children('処理したいセレクタ').メソッド();

prevメソッド

jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から一つ前の要素を取得。

$('セレクタ').prev();

nextメソッド

jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から一つ後ろの要素を取得。


$('セレクタ').next();

lengthメソッド

jQueryオブジェクトの要素の個数を取得。


$('セレクタ').length;

hasClass

引数に指定したクラスを、オブジェクトが持っているか判定するときに使用。オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返す。
※探したいクラス名の前には”.”をつけないこと！

$('セレクタ').hasClass('探したいクラス名')

子セレクタの指定方法はCSSと同じ


$('親セレクタ 子セレクタ')

イベント発生した要素を取得


$(this).メソッド();

アニメーション系

animateメソッド

アニメーションをつける機能。引数は連想配列で指定。
2つ目の引数でアニメーションの時間を設定。時間はミリ秒で指定するか(単位はつけない)、'slow'や'fast'といった文字列で指定。

$('セレクタ').animate({
    'プロパティ': 値  //プロパティが「font-size」の場合は「fontSize」というようにキャメルケースで記述すること
}, 時間);

scrollTopメソッド

ページ内リンクをjQueryで実装する機能。jQueryで実装するとリンク先への移動にアニメーションをつけたりすることが可能。ページ最上部から値px の位置に移動することができる。
scrollTopは通常 $('html, body') に対して用いる。


$('html, body').scrollTop(値);
$('html').scrollTop(値);
$('body').scrollTop(値);

インデックス系

セレクタ内の指定したインデックス番号の要素を取得。


$('セレクタ').eq(インデックス番号);

要素aの中の指定したオブジェクトbのインデックス番号を取得。


$('セレクタa').index($('.セレクタb'));

　　
　　
たくさんありますね
今回はここまで