引用 : https://www.tutorialspoint.com/jquery/jquery-ajax.htm?utm_source=chatgpt.com
基本
① お決まり文
$(document).ready(function() {
② 何したら？ → ボタン押したら
$("#driver").click(function(event){
//ボタンを押したら (id = "driver" )
③ どこに何を表示？
$('#stage').load('/jquery/result.html');
// div (div id = "stage") に、result.htmlを表示
・code全文
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
フォルダからjsonファイルを読み込んで表示
$.getJSON('/jquery/result.json', function(jd) {
ファイルから読み込みたいもの
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
// 要素からdata取得 : .val
$("#name").val()
id :nameの文字取得
// 要素に、表示する文字 指定
$("#name").val("ザラ アリ");
id: nameの入力欄に ザラ アリと表示
・中身を変える : replaceWith
$("p").replaceWith("<h1>これ、新しいヘッダーよ</h1>");
pの文字を変える
・クラスの書き方 ""を使う
$(".inner") → 最初に、必ず.がつく
・新しく追加
.append("<p>Zara</p>");
結果 before after
こんにちは こんにちは
Zara
・append とappendTo 仕組みは同じ
$("<p>Zara</p>").appendTo(".inner");
$(".inner").append("<p>Zara</p>");
・要素の前に、追加 prepend (appendと逆)
$(".inner").prepend("<p>Zara</p>");
結果 : bofore after
こんにちは zara
こんにちは
→ こんにちは、の前に追加
・CSSの中身を変える :addClass /removeClass
→ 文字を太字にする
$( ".hello" ).addClass("big" )
<style>
.big{ font-weight: bold; font-size:20px; }
</style>