jQueryを使うことで、JavaScriptでコーディングを行う作業が少なります。
基本的な組み方は ”セレクタ” に対し、”動作処理” を行いをセレクタの処理を実行します。

jQueryの書き方と構文

書き方は下記の構文になります。

$(document).ready(function(){
　//実行する内容を記述
　$("セレクタ").処理();
});
//クリックなどの何らかの動作があった場合
$(document).ready(function(){
　//実行する内容を記述
 　$("セレクタ").動作(function(){
　　$("セレクタ").処理();
　});
});

jQueryが$で略されて書かれていることがあります。略されていても実行されます。

jQuery(document).ready(function(){
　　//実行処理
 });

セレクタ

基本

基本的なセレクタは下記の通りです。

idセレクタを指定した場合

指定されたセレクタがidの場合、HTMLとJavascriptの記述は下記の通りです。
セレクタには、idの”sample”が入力されています。

<div id="sample">
　<a href="#">ここをクリック</a>
</div>

$(function(){
  $("#sample").click(function(){
    $(this).text("クリック完了");
    return false;
  });
});

classセレクタを指定した場合

指定されたセレクタがclassの場合、HTMLとJavascriptの記述は下記の通りです。セレクタには、classの”sample”が入力されています。

<div class="sample">
　<a href="#">ここをクリック</a>
</div>

$(function(){
  $(".sample").click(function(){
    $(this).text("クリックされました");
    return false;
  });
});

要素セレクタを指定した場合

<div>
　<a href="#">ここをクリック</a>
</div>

$(function(){
  $("div").click(function(){
    $(this).text("クリックしました");
　return false;
  });
});

おさらい

基本的な書き方から勉強していきましょう。