jQuery基礎

1
2
3
4
5
6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script>
        $(function(){
            $('p').css('color','red').hide('slow');
        });
      </script>

セレクタの指定

1
2
3
4
5
<script>
        $(function(){
            $(".item").css('color', 'red');
        });
</script>

隣接セレクタ

1
2
3
4
5
<script>
        $(function(){
            $(" .item + .item").css('color', 'red');
        });
</script>

フィルタ: eq(), gt(), lt(), even, odd, contains(),first, last

1
2
3
4
5
<script>
        $(function(){
            $("#sub > li:contains('4')").css('color', 'red');
        });
</script>

メソッドを使ったDOM要素指定：parent(), children(), next(), prev(), siblings()

1
2
3
4
5
<script>
  $(function(){
      $("#sub > li:eq(2)").siblings().css('color', 'red');
  });
</script>

属性セレクタ: =, !=, *=, ^=, $=

1
2
3
4
5
<script>
        $(function(){
            $('a[href!="http://google.com"]').css('background', 'red');
        });
      </script>

css、addClass、removeClass

1
2
3
4
5
6
7
<script>
  $(function(){
      //$('p').css('color', 'red').css('background', 'blue');
      //console.log($('p').css('color'));
      $('p').addClass('myStyle');
  });
</script>

attribute, dataメソッド

1
2
3
4
5
6
7
8
$(function(){
            // attr
            console.log($('a').attr('href'));
            $('a').attr('href', 'http://google.co.jp');
            // data
            console.log($('a').data('sitename'));
 
});

タグの中身を操作: text, html, val, remove, empty

1
2
3
4
5
6
$(function(){
            // $('p').html('<a href="">click me!</a>');
            // console.log($('input').val());
            // $('input').val('hello, again!');
            $('p').empty();
        });

before, after, prepend, append

1
2
3
4
5
6
7
8
9
$(function(){
            var li = $('<li>').text('just added');
            // $('ul > li:eq(1)').before(li);
            // li.insertBefore($('ul > li:eq(1)'));
 
            // $('ul').prepend(li);
            // $('ul').append(li);
            li.appendTo($('ul'));
        });

コールバック関数 :hide, show, fadeOut, fadeIn, toggle

1
2
3
4
5
6
7
8
9
10
$(function(){
            // $('#box').hide(800);
            // $('#box').fadeOut(800);
            // $('#box').toggle(800);
            // $('#box').toggle(800);
            // $('#box').toggle(800);
            $('#box').fadeOut(800, function(){
                alert("gone!");
              });
        });

イベントの利用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
          // $('#box').click(function(){
          //      alert("hi!");
          // });
          $('#box')
          .mouseover(function(){
                $(this).css('background', 'green');
           })
          .mouseout(function(){
                $(this).css('background', 'red');
           })
          .mousemove(function(e){
                $(this).text(e.pageX);
           })
        });

focus, blur, change

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
        $(function(){
            $('#name')
            .focus(function(){
                $(this).css('background', 'red');
            })
            .blur(function(){
                $(this).css('background', 'white');
            });
            $('#members').change(function(){
                alert('changed!');
            });
        });
      </script>

onメソッド

1
2
3
4
5
6
7
8
9
10
$(function(){
            $('button').click(function(){
                var p = $('<p>').text('vanish!').addClass('vanish');
                $(this).before(p);
            })
 
            $('body').on('click', '.vanish', function(){
                $(this).remove();
            });
        });