jQueryでよく使うメソッドまとめ

メソッドを使うとき一番最初に使うであろう簡単なメソッドをご紹介

親子要素を特定する

find

<div class="parent">
  <div class="child">こんにちは</div>
</div>
<script>
  //子要素を取得できる
  $('.parent').find('.child').text();
</script>

parents

<div class="parent">
  <div class="child">こんにちは</div>
</div>
<script>
  //親以上の要素を取得できる(要素指定)
  //親はparentメソッドを使用
  $('.child').parents('.parent').html();
</script>

要素の設定値を取得、設定する

attr

<div class="hello" name='hello'>こんにちは</div>
<script>
  //要素の属性を取得できる
  $('.hello').attr('name');
  //要素の属性を設定できる
  $('.hello').attr('name','goodMorning');
</script>

val

<input type="text" class="hello"value="こんにちは">
<script>
  //inputタグの入力値を取得できる
  $('.hello').val();
  //inputタグの入力値を設定できる
  $('.hello').val('こんばんは');

</script>

要素に追加する

on

<div class="hello">こんにちは</div>
<script>
  //イベントを登録できる
  $('.hello').on('click',function(){
    //クリックした時の処理をここに書く
  });
</script>

css

<div class="hello">こんにちは</div>
<script>
  //CSSを反映する
  $('.hello').css("color", "red");
</script>