jQueryの書き方-基本 #jQuery

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/

jQueryの書き方-基本