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

jQueryでよく使うメソッドを簡潔にまとめる

addClass

要素にクラスを追加する


<style>
  .color{
    font-size: 30px;
    color: red;
  }
</style>

<p>こんにちは！</p>
<script>
  $("p").addClass('color');
</script>

attr

属性を取得、書き換える



<a href="http://www.google.com">google</a>
<a href="http://www.bing.com/">bing</a>

<script>
  // 要素を取得
  console.log($('a[href*="google"]').attr("href"))

  // 要素を書き換え
  $('a[href*="bing"]').attr("href", "http://www.yahoo.com/")

</script>

bind

onと一緒、onのメソッドを参照
参考URL http://qiita.com/nmta/items/310aa1cf385fa55129c1

change

select要素、input要素、textarea要素が変更されたらイベントを発生させる

<select>
 <option value='aaa'>aaa</option>
 <option value='bbb'>bbb</option>
 <option value='ccc'>ccc</option>
 <option value='ddd'>ddd</option>
</select>

<script>
 $("select").change(function(){
   var value = $('option:selected').val();
   console.log(value)
 })
</script>

click

要素をクリックしたらイベントを起こす


<p>こんにちは！</p>
<script>
  $("p").click(function() {
    $(this).text("さようなら！");
  })
</script>

data

データ属性を取得する


<p data-str="get">こんにちは！</p>

<script>

console.log($('p').data('str'))

</script>

find

指定した要素から、指定した条件に合致する子孫要素を選択する


<ul>
  <li>OK!</li>
  <li>GOOD!</li>
  <li>HAPPY!</li>
</ul>


<script>
$("ul").find("li").css("color", "red")
</script>

hide

ある要素を非表示にする


<button>隠す</button>
<p>Hello</p>

<script>
  $("button").click(function(){
    $("p").hide();
  });
</script>

on

動的に作られた要素に対してイベントを追加していく
また関数に引数をつけてtargetで要素を補足できる


<body>
  <select>
    <option value='aaa'>aaa</option>
    <option value='bbb'>bbb</option>
    <option value='ccc'>ccc</option>
  </select>
  <span></span>
</body>

<script>
  $("select").on("change", function(evt){
    selected = ($(evt.target));
    if (selected.val() === "aaa"){
      $( "span" )
        .stop()
        .css( "opacity", 1 )
        .text( selected.val() )
        .fadeIn( 30 )
        .fadeOut( 1000 );
    }else if(selected.val() === "bbb"){
      $( "span" )
        .stop()
        .css( "opacity", 1 )
        .text( selected.val() )
        .fadeIn( 30 )
        .fadeOut( 1000 );
    }else if(selected.val() === "ccc"){
      $( "span" )
        .stop()
        .css( "opacity", 1 )
        .text( selected.val() )
        .fadeIn( 30 )
        .fadeOut( 1000 );
    }
  });
</script>

removeClass

要素からクラスを削除する


<style>
  .color{
    color: red;
  }
</style>

<p class="color">こんにちは！</p>
<script>
  $("p").click(function(){
    $(this).removeClass('color');
  })
</script>

show

非表示状態にある要素を表示する


<div id="show">みなさん！</div>
<div style="display: none;">こんにちは！</div>

<script>
  $("#show").click(function(){
    $("div").show();
  });
</script>

text

要素内のテキストを取得、書き換える



<p>こんにちは！</p>

<div class="get">明日は？</div>

<script>
  // 要素を取得
  console.log($("p").text());

  // 要素を書き換え
  weekArray = [ "月", "火", "水", "木", "金", "土", "日" ]

  $(".get").click(function() {
    $(this).text(weekArray[new Date().getDay()] + "曜日")
  });
</script>

toggle

showとhideの機能をまとめてひとつにしたもの
ある要素が非表示の場合は表示し、ある要素が表示されている場合は非表示にする


<button>クリックMe!!!</button>
<p>YES</p>
<p style="display: none;">NO</p>

<script>
  $("button").click(function(){
    $("p").toggle();
  });
</script>

##val
input要素のvalue属性を取得する

```html

<form action="">
  <input type="text" name="get" value="値をゲット！！！">
</form>

<script>
  console.log($("form [name=get]").val());
</script>