jQuery のこんにちは世界

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>
// jQuery のロードイベント( コントロールが全てページ上に作成されてから実行されます )
$(function(){
 
    // alert("ページがロードされました");
 
    $("#btn").on("click", function(){
 
        var gakusei = $("#simei").val();
 
        alert(gakusei);
 
    });
 
});
</script>
 
</head>
<body>
<h1>jQuery のこんにちは世界</h1>
 
<input type="text" id="gakusei" value="123456">
 
<input type="text" id="simei" value="山田 太郎">
 
<input type="button" id="btn" value="実行">
 
 
</body>
</html>

val メソッド

https://api.jquery.com/val/

jQuery の ロードイベント

https://api.jquery.com/ready/

$(function(){
 
        // alert("ページがロードされました");
 
        $("#btn").on("click", function(){
 
                var gakusei = $("#simei").val();
 
                alert(gakusei);
 
        });
 
});