jQuery addClass example

Change class name on click in jQuery

HTML

<h2>val()</h2>
<input type="text" id="input1" /> <br>
<button id="button1">val()</button>
<button id="button2">val("valueをセットしました")</button><br>

<h2>text()</h2>
<div id="text1">ここが書き変わるよ</div> 
<button id="button3">text()</button>
<button id="button4">text("書き変わりました")</button><br>

<h2>css()</h2>

<div id="text2">ここの背景が変わるよ</div>
<button id="button5">css("background-color")</button>
<button id="button6">css("background-color", "yellow")</button>

<h2>attr()</h2>

<a id="link1" href="https://api.jquery.com/" target="_blank">jQuery APIのページに飛ぶよ</a><br>

<button id="button7">attr("href")</button>
<button id="button8">attr("href", "https://www.google.co.jp/")</button>

<h2>append()</h2>
<button id="button9">append(要素)</button>
<div id="target1">
  <div>ここに追加されるよ</div>
</div>

<h2>remove()</h2>
<button id="button10">remove()</button>
<div id="target2" style="background-color: yellow; width: 100%; height: 20px">これが消えるよ</div>

<h2>empty()</h2>
<button id="button11">empty()</button>
<div id="target3" style="background-color: yellow; width: 100%; height: 20px">この中身が消えるよ</div>

JavaScript

$(function() {
		// val()
    $("#button1").on("click", function() {
      alert($("#input1").val());
    });
    $("#button2").on("click", function() {
      $("#input1").val("valueをセットしました");
    });
    
    // text()
    $("#button3").on("click", function() {
      alert($("#text1").text());
    });
    $("#button4").on("click", function() {
      $("#text1").text("書き変わりました");
    });
    
    // css()
    $("#button5").on("click", function() {
      alert($("#text2").css("background-color"));
    });
    $("#button6").on("click", function() {
      $("#text2").css("background-color", "yellow");
    });
    
    // attr()
    $("#button7").on("click", function() {
      alert($("#link1").attr("href"));
    });
    $("#button8").on("click", function() {
      $("#link1").attr("href", "https://www.google.co.jp/");
    });
    
    // append()
    $("#button9").on("click", function() {
      $("#target1").append($("<div>Hoge</div>"));
    });
    
    // remove()
    $("#button10").on("click", function() {
      $("#target2").remove();
    });
    
    // empty()
    $("#button11").on("click", function() {
      $("#target3").empty()
    });
});