初めに

オブジェクトへのエベントを追加する

①html、 javasriptのツールの開発

　→オンラインツールを使えるため、ツールのダウンロードが不要です。
　　　https://jsfiddle.net/

②HTML分に以下のHTMLソースを追加する


<html>

  <head>
    <title>Hoge</title>
  </head>

  <body id="main-id">
  </body>

</html>

③JQUERYを選択してから、JAVASRIPT分に以下のソースを追加する


//マインオブジェクト
var $main  = $("#main-id");

//ulオブジェクトに変換する
var $ul = $("<ul>");    

//liオブジェクトに変換する
var $li = $("<li>").html("hoge");

//親オブジェクトに子オブジェクトを追加
$ul.append($li);
$main.append($ul);

④オブジェクトへのクリックイベントの追加

　　①クリックイベントを追加　


// liオブジェクトへのクリックイベントを追加する
$li.click(function() {
   // class-textのCSSが存在する場合、削除する
   if($li.hasClass("class-text")) {
      $li.removeClass("class-text");
   
   // class-textのCSSが存在しない場合、追加する
   } else {
       $li.addClass("class-text");
   }
});

　　②CSSクラスを追加


.class-text {
  font-size: 50px;
}

イメージ

実行
→・hogeテキストをクリックすると、文字列が大きくなる

jQueryにはクリックイベント以外、いろいろなイベントがあります。

例）.change()など


//選択ボックスオブジェクト
var $select = $("<select>");
$select.change(function(){
    //todo
});

jQueyの参考ページ
https://api.jquery.com/category/events/

以上