Ajaxは非同期通信、サーバー側からページの更新なく情報を読み出す技術です。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQeury</title> <style> .myStyle{ border:5px solid green; font-size:48px; } </style> <link rel="stylesheet" href="styles.css"> </head> <body> <p>jQueryの練習</p> <button>もっと読む</button> <div id="result"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(function(){ $('button').click(function(){ $('#result').load('more.html'); }); }); </script> </body> </html>
more.html
<p id="message">メッセージです!</p>