##jQueryとは、、、
jQueryはJavaScriptのライブラリで、JavaScriptで行えるほぼ全てのことを、JavaScriptよりも簡単にできます。
イメージとしては、ショートカットキーみたいな？アプリのような？
そんな感じです。
MDN jQuery
https://developer.mozilla.org/ja/docs/Glossary/jQuery
導入
jQuery
https://developers.google.com/speed/libraries/#jquery
で、読み込みのscriptタグの記述をコピー
それを、htmlファイルの<head></head>内へ貼り付けます。
この時、外部ファイルの読み込みコード
<script src = >より上に貼り付けないとエラーになります。
<head>
<meta charaset="utf-8">
<title>タイトル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="./test.js"></script>
</head>
今回は、test.jsファイルにｊQueryを書いていきましょう！
$(function(){
ここに処理を記入
------------
------------
------------
------------
});
この中にjQueryのコードを書いていきます。
例：
文字の色を変えてみましょう！
$(function(){
$(".name").css("color","yellow")
});
解説
今回はhtmlファイルで.nameというクラスセレクタを作ったので、
.nameと入力。
そして、colorを黄色にしますよ！というコードを書いてあげたら完成。
###イベントで処理のタイミングを指定する
イベントとは、
HTMLの要素に対して行われた処理要求のこと。
例えば、「クリックしたら色が変わる」
「マウスカーソルをのせると〇〇する」などです。
つまり、「イベント」が発生したら、それをきっかけにコードが実行される仕組みです。
####＊on( )メソッド
⇒jQueryメソッドに対してイベントを設定するオブジェクト
書き方は、
$(function(){
$("セレクタ").on("イベント",function(){
イベントが起きた時に行う処理
});
});
#####例：イベントハンドラにデータを渡します。アラートに渡したfooキーの値、"bar"が表示されます。
.on( events [, selector] [, data], handler(eventObject) )
$(function() {
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler);
});
＊click( )メソッド
#####例：クリックした時に、’クリックイベントが発生しました'とアラートが出ます
$(function(){
$('#target').click(function() {
alert('clickイベントが発生しました。');
});
});
こちらで調べてみたら楽しいですよ。
【Jsstudio】
http://js.studio-kingdom.com/