y-matsumoto/jquery勉強会

## jquery勉強会
### jQueryとは ###
javascriptを使用したライブラリでデザイナの方でも簡単に使えるようにプログラム要素を極力外しており、現在最もメジャーなjavascriptライブラリです。

### 勉強サポートサイト ###
ドットインストール
http://dotinstall.com/lessons/basic_jquery_v2

### 公式ページ ###
https://jquery.com/

### APIリファレンスページ ###
公式：
http://api.jquery.com/
日本語対応：
http://semooh.jp/jquery/

※日本語対応版は公式ではないため翻訳が追いついていない場合があります。最新の情報は公式ページから確認してください。

### バージョンについて ###
現在の最新バージョンは1系は1.11.0となり2系は2.1.0となります。詳細は公式ページ参照ください。
1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン
2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン

### jQuery参照 ###

jQueryを参照する方法は下記２点がありますが、最近はCDNのほうを使う場合が多いようです。
メリットはCDNの場合は読み込ます場合に他のサーバ上で読み込ますため、読み込み速度が早くなります。デメリットはネットに繋がっていない環境の場合に動作しません。バージョン番号として残っているライブラリに関しては基本バグ対応意外で修正される事はないため、安心して使う事が出来ます。極力バージョンは最新バージョンよりも１つか２つ低いライブラリを使用する事が一般的とおもいます。

1.CDN（コンテンツデリバリネットワーク）で提供されているjQeuryを読み込む
　<script src="http://code.jquery.com/jquery-X.XX.X.min.js"></script>
　※X.XX.Xはバージョン番号を入れる 例)1.11.0
2.jQueryファイルをダウンロードして読み込む
　<script src="[相対パス]/jquery-X.XX.X.min.js"></script>

### jQuery事前知識 ###

# 知識1
jQueryは$（ダラーマーク）を先頭に付ける

# 知識2
jQuery構文は下記何れかの中に記載する

パターン1
$(document).ready(function(){
    // 処理
});

パターン2
$(function(){
    // 処理
});

パターン3
jQuery(function(){
    // 処理
});

いずれもhtmlをレンダリングしたあとに読み込ますjQueryの記載方法になるが、これから勉強会ではパターン３を使用する事にします。
パターン３では他のprototype.jsなどとの競合バグを起きなくする効果があります。

# 知識3
セレクタ：
対象の場所を指し示す
例) $("li") はliタグを対象とする

メソッド：
対象の場所に対する処理を指し示す
例) $("li").css("color","red") セレクタliに対してcssメソッドでcolorプロパティに値をred指定としている
※メソッド詳細はhttp://semooh.jp/jquery/から確認下さい

### jQuery構文テンプレート ###

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <meta charset="utf-8">
        <title>勉強会</title>
        <script>
        jQuery(function(){
            // 処理
        });
        </script>
    </head>
    <body>
    </body>
</html>
	### jQueryとは ###
	javascriptを使用したライブラリでデザイナの方でも簡単に使えるようにプログラム要素を極力外しており、現在最もメジャーなjavascriptライブラリです。

	### 勉強サポートサイト ###
	ドットインストール
	http://dotinstall.com/lessons/basic_jquery_v2

	### 公式ページ ###
	https://jquery.com/

	### APIリファレンスページ ###
	公式：
	http://api.jquery.com/
	日本語対応：
	http://semooh.jp/jquery/

	※日本語対応版は公式ではないため翻訳が追いついていない場合があります。最新の情報は公式ページから確認してください。

	### バージョンについて ###
	現在の最新バージョンは1系は1.11.0となり2系は2.1.0となります。詳細は公式ページ参照ください。
	1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン
	2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン

	### jQuery参照 ###

	jQueryを参照する方法は下記２点がありますが、最近はCDNのほうを使う場合が多いようです。
	メリットはCDNの場合は読み込ます場合に他のサーバ上で読み込ますため、読み込み速度が早くなります。デメリットはネットに繋がっていない環境の場合に動作しません。バージョン番号として残っているライブラリに関しては基本バグ対応意外で修正される事はないため、安心して使う事が出来ます。極力バージョンは最新バージョンよりも１つか２つ低いライブラリを使用する事が一般的とおもいます。

	1.CDN（コンテンツデリバリネットワーク）で提供されているjQeuryを読み込む
	<script src="http://code.jquery.com/jquery-X.XX.X.min.js"></script>
	※X.XX.Xはバージョン番号を入れる例)1.11.0
	2.jQueryファイルをダウンロードして読み込む
	<script src="[相対パス]/jquery-X.XX.X.min.js"></script>

	### jQuery事前知識 ###

	# 知識1
	jQueryは$（ダラーマーク）を先頭に付ける

	# 知識2
	jQuery構文は下記何れかの中に記載する

	パターン1
	$(document).ready(function(){
	// 処理
	});

	パターン2
	$(function(){
	// 処理
	});

	パターン3
	jQuery(function(){
	// 処理
	});

	いずれもhtmlをレンダリングしたあとに読み込ますjQueryの記載方法になるが、これから勉強会ではパターン３を使用する事にします。
	パターン３では他のprototype.jsなどとの競合バグを起きなくする効果があります。

	# 知識3
	セレクタ：
	対象の場所を指し示す
	例) $("li") はliタグを対象とする

	メソッド：
	対象の場所に対する処理を指し示す
	例) $("li").css("color","red") セレクタliに対してcssメソッドでcolorプロパティに値をred指定としている
	※メソッド詳細はhttp://semooh.jp/jquery/から確認下さい

	### jQuery構文テンプレート ###

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<meta charset="utf-8">
	<title>勉強会</title>
	<script>
	jQuery(function(){
	// 処理
	});
	</script>
	</head>
	<body>
	</body>
	</html>