JQueryの使い方

JQueryの使い方などについてまとめました。

2100 views

CDNを利用する場合

CDN(Content Delivery Network)を使用する場合は、HTMLファイル内に以下を記述する。

  1. <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

npmで利用する場合

次のコマンドを実行して、jqueryと簡易WEBサーバをインストールする。

  1. npm install jquery
  2. npm install -g http-server

インストールが完了すると、カレントディレクトリに次のファイルが作成される。

  • node_modules
  • pachkage-lock.json

同階層にindex.htmlとmain.jsを作成し、次のように記述する。
[index.html]

  1. <html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <script src="./node_modules/jquery/dist/jquery.js"></script>
  5. <script src="main.js"></script>
  6. <title>こんにちわ</title>
  7. </head>
  8. <body>
  9. <p id="msg"></p>
  10. </body>
  11. </html>

[main.js]

  1. $(function() {
  2. $("#msg").text("これはjQueryからの呼び出しですよ");
  3. });

以下のコマンドを実行することで、httpサーバを起動する。

  1. http-server

起動した後、次のURLにアクセスし、「これはjQueryからの呼び出しですよ」が表示されればOK。

  1. http://127.0.0.1:8080/

Page 1 of 8.

次のページ



[添付ファイル]


お問い合わせ

プロフィール

すぺぺぺ

自己紹介

本サイトの作成者。
プログラムは趣味と勉強を兼ねて、のんびり本サイトを作っています。
フレームワークはdjango。
ChatGPTで自動プログラム作成に取り組み中。

サイト/ブログ

https://www.osumoi-stdio.com/novel/

ツイッター

@darkimpact0626