jQuery addClass example

Change class name on click in jQuery

HTML

<h2>clickイベント</h2>
<input type="text" id="input1" />
<button id="button1">押してね</button>
<span id="out1">ここに出るで</span>

<h2>changeイベント</h2>
<input type="text" id="input2" />
<span id="out2">ここに出るで</span>

<h2>mouseover/mouseoutイベント</h2>
<div id="out3"></div>

<h2>inputイベント</h2>
<input type="text" id="input4" />
<span id="out4">ここに出るで</span>

<h2>focus/blurイベント</h2>
<input type="text" id="input5" />
<span id="out5">ここに出るで</span>

CSS

#out3 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

JavaScript

$(function() {
  // clickイベント
  $("#button1").on("click", function() {
    var value = $("#input1").val();
    $("#out1").text(value);
  });
  
  // changeイベント
  $("#input2").on("change", function() {
    // var value = $("#input2").val();
    var value = $(this).val();
    $("#out2").text(value);
  });
  
  // mouseoverイベント
  $("#out3").on("mouseover", function() {
    $(this).css("background-color", "red");
  });
  // mouseoutイベント
  $("#out3").on("mouseout", function() {
    $(this).css("background-color", "yellow");
  });
  
  // inputイベント
  $("#input4").on("input", function() {
    $("#out4").text($(this).val());
  });
  
  // focusイベント
  $("#input5").on("focus", function() {
    $("#out5").text("フォーカスされてるで");
  });
  // blurイベント
  $("#input5").on("blur", function() {
    $("#out5").text("ここに出るで");
  });
  
})

// 素のJavaScriptで書いた場合(EventListener)
// clickイベント
/* var button1 = document.getElementById("button1")
button1.addEventListener("click", function() {
  var value = document.getElementById("input1").value
  var out = document.getElementById("out1")
  out.innerText = value
}) */