NEW ARTICLE
Rocky Linuxでのファイルシステムの暗号化
  1. HOME
  2. jquery
  3. Jquery onを使ってイベントをbind(バインド)する

Jquery onを使ってイベントをbind(バインド)する

Jquery onを使ってイベントをbind(バインド)する

Jqueryでonメソッドを使ってイベントをbind(バインド)するサンプルコードを記述してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43

※windows10にApacheのインストールはこちら

onメソッド利用

指定した要素にクリックイベントをバインドします。
ここでは要素をクリックして、文字の色を変更させてます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<style>
#test {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}
</style>
<script>
  $(function(){    
    $('#test').on("click", function(){
      $("#test").css("color","red");
    });
  });
</script>
<body>
  <div id="test">click me</div>
</body>

</html>

要素をクリックすると文字色が変更されていることが確認できます。