jQueryを総復習！！久々にやったら全部忘れていた、、、

jQueryを使うためには、
HTML/CSS/Javascriptの知識がある程度必要です。
テキストエディタとブラウザがあれば練習できます！！！

jQueryを使用する

このコードをHTMLに埋め込めば、jQueryが使えるようになります。
このコードはbodyの閉じタグの直前に書くことが多いそうです。
scriptを書く場合は、コードを読み込んだ行よりも後の行で書きましょう。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

セレクタとメソッド

セレクタは処理の対象
メソッドは処理の方法

例えば、「div要素の文字をオレンジ色にする」場合、「div要素がセレクタ」で、「文字をオレンジ色にするがメソッド」です・。

基本的な書き方

「div要素の文字をオレンジ色にする」場合

<script>
$(function(){
  $('div').css('color', 'orange');
})
 </script>

メソッドは続けて書くこともできます。繋げて書くことを「メソッドチェーン」と言います。

<script>
$(function(){
  $('div').css('color', 'orange').hide('slow');
})
 </script>

セレクタがid要素の場合、$('#id要素名')
セレクタがクラスの場合、$('.クラス名')

id要素の中の直下のクラスだけ指定したい場合は、$('id要素名 > .クラス名')

複数要素を指定したい場合(pとh1など)は、$('p, h1')
隣接する要素を指定したい場合、$(#id名 + #隣接する要素のid名)　。。。もちろんid以外にも使えます。

フィルタ

子要素がたくさんある場合、子要素のうちのどれをセレクタに設定するかを選べます。

直下の子要素の場合、さっきも言ったように、 「>」この記号を使います。

例えば、下のようなhtmlがあるとします。

<ul id="aaa">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>

子要素の4番目をを指定したい場合は、以下のように書くことができます
4の部分を2に変えたら、2番目になりますし、3に変えたら3番目になります。
eqは「equal」の略です。
jQuery
$('#aaa' > li:eq(4)).css('color', 'orange');


○番目以降のリスト全部を指定したい場合は、gt(greater than)を使いますし、
○番目以前のリスト全部を指定したい場合は、lt(less than)を使います。

//$('#aaa' > li:gt(4)).css('color', 'orange');
//$('#aaa' > li:lt(2)).css('color', 'orange');

evenとoddを使えば、偶数や奇数を指定できます。
even...偶数
odd...奇数

//$('#aaa' > li:even).css('color', 'orange');
//$('#aaa' > li:odd).css('color', 'orange');

containsを使うと、リスト要素の中身で検索をかけて、それに合致するものをセレクタとすることができます。

$('#aaa' > li:contains(3)).css('color', 'orange');

DOM要素指定

ある要素の親要素を指定したい場合はparentを使います。
逆に子要素を指定したい場合は、childrenを使います。

//$('#aaa').parent().css('color', 'orange')
//$('#aaa').children().css('color', 'orange')

ある要素の次にある要素を指定したい場合はnext
ある要素の前にある要素を指定したい場合はpreviousを使います。

//$('#aaa' > li:eq(3)).next().css('color', 'orange'); //4
//$('#aaa' > li:eq(3)).previous().css('color', 'orange'); //2

属性セレクタ

ここで一旦、先ほどのhtmlは忘れてください。
a要素のリンクなどを扱って行きます。

a要素のhref属性が...

完全一致の場合は「=(イコール)」
完全一致の否定(完全一致の文字列ではない)場合、「!=」
「〜〜」という文字列が含まれるものの場合は「*=」
先頭が〜〜で始まる場合は「^=」
終わりが〜〜で終わる場合は「$=」

具体例で見て行きましょう！！

$('a[href="https://qiita.com/trend"]').css('color', 'orange'); //完全一致
$('a[href!="https://qiita.com/trend"]').css('color', 'orange'); //完全一致の否定
$('a[href*="qiita"]').css('color', 'orange'); //Qiitaを含むもの
$('a[href^="http]').css('color', 'orange'); //httpから始まるもの
$('a[href$=".com"]').css('color', 'orange'); //.comで終わるもの

メソッドで値の取得や変更

例えば、これ。
値を書かなければ現在のp要素の色を知ることができます。
コンソールに表示すれば、何色なのかがわかります。

$('p').css('color');

addClass removeClassでcssを追加したり削除したりできる。

<style>
css{
   font-size:20px;
   color:orange;
   border:solid;
}
</style>

<script>
  $('p').addClass('css');
</script>

attr(attribute属性)は、HTMLの属性を取得・変更するメソッド

$('a').attr('href'); //hrefの中身を取得
$('a').attr('href', 'https://qiita.com/trend'); //hrefの中身を変更

dataメソッドは、独自の属性を取得・変更できる
HTML5のdataメソッドを理解しておかないとわからない

.
.
.
<a href="https://qiita.com/trend" data-sitename="Qiita">Qiita</a>
.
.
.

$('a').data('sitename'); //data-sitenameの中身を取得

P要素の中身を取得したり、書き換えたい場合に「text」が使える

.
.
.
<p>こんにちは</p>
.
.
.
$('p').text();
$('p').text('こんばんは');

中身の取得・変更をし、さらにHTMLのタグを有効にしたい場合、(リンクをつけるとか)

.
.
.
<p>こんにちは</p>
.
.
.
$('p').html('<a href="https://qiita.com/trend">Qiita</a>');

ボタン系は、表示されるテキストが「value属性」に記されているのでテキストを変えたい場合は、value属性を取得・変更する必要がある。

.
.
.
<input type="text" value="戻る">
.
.
.
$('input').val(); value属性を取得
$('input').val('送信'); value属性を書き換え

例えば、p要素の中身を消したい場合はemptyが使え、p要素を消したい場合はremoveが使えます。

.
.
.
<p>こんにちは</p>
.
.
.
$('p').empty();
$('p').remove();

要素を追加する

例えば、このようなhtmlがあるとする

<ul id="aaa">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
 </ul>

新たにリストを作りたい場合、

var newli = $('<li>').text(new list);
$('ul > li:eq(3)').before(li) //3の直前にnewliを追加

beforeは直前に挿入しますが、afterにすると直後に挿入してくれます。
また、prependは子要素の先頭に追加し、appendは子要素の最後に追加します。

var newli = $('<li>').text(new list);
//$('ul').prepend(li); //1の前に追加される
//$('ul').append(li); //5の後に追加される

エフェクトを使用する

p要素のエフェクトをかけたいと思います。
hideはパッと消える(slowをつけることでゆっくり消える、時間を指定することもできる)

.
.
.
<p id="test">test</p>
.
.
.
$('test').hide() //パッと消える
$('test').hide(slow) //ゆっくり消える
$('test').hide(500) //0.5秒で消える

フェードインやフェードアウトもできる

.
.
.
<p id="test">test</p>
.
.
.
$('test').fadeIn(500) //0.5秒でフェードイン
$('test').fadeOut() //0.5秒でフェードアウト　　引数は一緒

toggleは、今表示されていれば消す、表示されていなければ表示するというもの

.
.
.
<p id="test">test</p>
.
.
.
$('test').toggle(500) //0.5秒で消える
$('test').toggle(500) //0.5秒で出現する

これらのhideやフェードイン、フェードアウト、toggleには、第二引数として関数をつけることができる。
これは、0.5秒で消えた後に、alertが発動されます。

$('test').hide(500, function(){
    alert('gone!');
})

イベント

.
.
.
<p id="test">test</p>
.
.
.
$('test').click(function(){
   alert("This is test");
}) //testをクリックしたら、alertが発動

testにマウスがかぶさったら、イベントを発生するようにするには、mouseoverを使います。

.
.
.
<p id="test">test</p>
.
.
.
$('test').mouseover(function(){
   $(this).css('background', 'blue');
}) //testの上にマウスが乗ったら、testの背景が青になる

上の場合、マウスが離れても背景色は戻らないので、mouseoutイベントを発生させる必要があります。

.
.
.
<p id="test">test</p>
.
.
.
$('test')
　　　　　　.mouseover(function(){
   　　　　　$(this).css('background', 'blue');
}) //testの上にマウスが乗ったら、testの背景が青になる
　　　　　 .mouseout(function(){
     $(this).css('background', 'orange');
})//マウスが離れたら背景色がオレンジにもどる

フォームに関するイベントを見て行きましょう！！
focusが当たっときにイベントを発生させるのはfocus
focusが外れたときにイベント発生させるのは、blur

.
.
.
<input type="text" id="name">

$('test')
　　　　.focus(function(){
   $(this).css('background', 'blue');
}) //testにフォーカスが当たったら、testの背景が青になる
　　　.blur(function(){
   $(this).css('background', 'orange');
}) //testからフォーカスが外れたら、testの背景がオレンジになる

終わり

とりあえず、これで終わります。
結構シンプルに書きすぎたかもしれないですね。