jquery入門（ドットインストール）

javascriptを便利に扱うためのライブラリ


```
//$(document).ready(function(){
$(function(){
     //セレクタ：処理対象となるDOM要素を指定する記法
     //メソッド：処理
     //メソッドチェーン
$(‘p’).css(‘color’, ‘red’).hide(’slow’);
}};
```

#idやclassの指定

$(“”)
html要素
id #main
class .item
$(“.item”).css(‘color’,’red’);

#もっとセレクタ

\# . ID、クラス
 \>　直下の子要素
(空白) それ以下の子要素
, 複数の子要素
+隣接する子要素

```
$(“#main > .item”).css(‘color’ , ‘red’);
```

#フィルタを使う

```
$(“#sub > .ii:eq(2)”).css(‘color’ , ‘red’);
```


##フィルタ
```
:eq()　//任意の番目の要素
:gt(), :lt()     //任意の番目のより大きい、小さい
:even, :odd　//偶数、奇数
:contains()  //中身になにがあるか
:first, :last　//最初、最後の要素
$(“#sub > li:gt(2)”).css(‘color’ , ‘red’);
```

#メソッドを使ったDOM要素指定

```
parent(),children()     //親要素、子要素
next(), pref()     //次の要素、前の要素
siblings()     //兄弟要素
```

```
$(“#sub > li:eq(2)”).prev().css(‘color' , 'red’);
```

#属性セレクタ

```
=      //等しい
!=     //異なる
*=     //含まれる
^=     //〜で始まる
$=     //〜で終わる

$(‘a[href=“http://google.com"]’).css(‘background’, ‘red’);
```


#css、addClass/removeClassの使用

##値の取得

```
$(‘p’).css(‘color’ , ‘red’).css(‘background’, ‘blue’);
console.log($(‘p’)).css(‘color’));
```

##addClass

styleの追加

```
$(‘p’).addClass(‘myStyle’);
```

styleを外すときはremoveClassを追加

#attr、data使用

##attr

```
$(function(){
     console.log($(‘a’).attr(‘href’));
})
```

##data

```
$(function(){
     console.log($(‘a’).data(’sitename’));
});
```

#タグの中身の操作

text
html
val     //valueの中身
remove     //タグごと消す
empty     //タグの中身を空にする

```
$(‘p’).txt(‘just change’);
$(‘p’).html(‘<a hred’>Click me!)</a>’);
console.log($(‘input’).val());
$('input’).val(‘hello, again!’);
$(‘p’).empty();
$(‘p’).remove();
```

#要素の追加

```
//before, after  ->  insertBefore, insertAfter   要素を前に追加/要素を後ろに追加
//prepend, append -> prependTo, appendTo　要素を子要素の最初に追加/要素を子要素の最後に追加

var li = $(‘<li>’).text(‘just added’);
$(‘ul >li:eq(1)’).before(li)


var li = $(‘<li>’).text(‘just added’);
$(‘ul’).append(li) 
```

#エフェクトの使用
hide, show   //消える、現れる
fadeOut, fadeIn     //ゆっくり消える、　ゆっくり現れる
toggle     //現れると消えるを交互に

例) $(‘#box’).toggle(800);

##エフェクトの後の動作

```
$(‘#box’).fadeOut(800, function(){
     alert(“gone!’);
}};
```


#イベントの使用
 click, mouseover, mouseout, mousemove

```
$(function(){
     $(‘#box’).click(function(){
          alert(“hi!”);
     });
     $(‘#box’)
          .mouseover(function(){
         $(this).css(‘background’ , ‘red’);
     }); 

          .mouseout(function(){
         $(this).css(‘background , ‘green'')
     });  
          .mousemove(function(){
          $(this).text(e.pageX);
     });   

});
```

#focus, blur, change

```
$(function(){
//focusすることでform部品のいろを変える
     .focus(function(){
          $(this).css(‘background’ , “red”);
     });
//focusから外れることでforn部品のいろを変える

 .blur(function(){
          $(this).css(‘background’ , “white”);
     }); 

//値を変えるとalertを表示する
     $(‘’members’).change(function(){
          alert(‘changed!’);
     });
});
```

#onメソッドの使用

```
    $(function(){
          $(‘button’).click(function(){
               var p =$(‘<p>’).text(vanish!).addClass(‘vanish’);
          $(this).before(p);

          $(“body”).on(‘click’ , ‘.vanish’ , (function(){
               $(this).remove();
});
```

以下のように記述しても、ロードした時点で存在しない要素には効かない

```
           $(“.vanish”).click(function(){
               $(this).remove(); 
          });
```