jQuery入門：基本操作からHello Worldの実践まで
作成日:2010.07.22
jQueryを使った簡単な動的コンテンツの作成方法を解説します。ダウンロードからHTMLへの読み込み方法、基本的な要素の操作まで、初心者でもすぐに理解できる内容です。Hello Worldを表示するボタンを作成し、jQueryでHTML要素を操作する基本を学びましょう。
error この記事は最終更新日から14年以上が経過しています。
簡単に Ajax 的なこととかができちゃう楽チンライブラリ jQuery の入門的解説です。
今回はHello World レベルの話まで。
1. jQuery のダウンロード
とりあえず、jQuery のソースコードをダウンロードしましょう。
jQuery: The Write Less, Do More, JavaScript Library からダウンロード可能です。
ソースコードは「jquery-*.*.*.min.js」みたいなファイル名になってるかと思いますが、「jquery.js」とかに変えておいたほうがあとでバージョンアップする際とかにも便利な気がします。
2. html から jQuery を読み込む
ソースコードを入手したら、jQuery を利用する html ファイルに、script要素で jQuery を読み込みます。
<script type="text/javascript" src="jquery.js"></script>3. html の内容を書き換えるスクリプト
まずは、ボタンクリックで html の内容を書き換えるようなスクリプトで Hello World してみましょう。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript;charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>jQuery で Hello World</title>
</head>
<body>
<h1>jQuery で Hello World</h1>
<p>ここの内容を変更します。</p>
<form method="GET" action="#">
<input type="button" onclick="helloworld();" value="Hello World" />
</form>
</body>
</html>上記のような html がある場合、p要素の内容を変更するスクリプトを書けばよいわけです。
その場合、function helloworld() の内容は、
function helloworld(){
$("p").html("Hello World!");
}となります。
「$(" ")」の中に、アクセスしたい要素を指定すれば良いわけです。
「.html(" ")」は、JavaScript の innerHTML みたいなもんですね。
操作するのがテキストのみなら、innerTEXT 相当の「.text(" ")」を使っても良いと思います。
ただしこのやり方だと、html 内に複数の p 要素がある場合、全ての p要素が書き換えられてしまいます。
そこで、要素名ではなく、class属性や id属性を指定する方法があります。
例えば、
<p class="hello">class指定されたp要素です。</p>
<p id="world">id指定されたp要素です。</p>のような感じで、class属性や id属性が指定されている場合、それぞれの内容を変更するスクリプトは、
// class="hello" の内容を変更
$(".hello").html("Hello World!");
// id="world" の内容を変更
$("#world").html("Hello World!");という感じで指定できます。
class や id の指定が、スタイルシート(CSS)と同じなので、覚えやすくて良いですね。
チェックボックス操作のためのjQuery基本メモ
2025.02.05
jQueryを使ってチェックボックスの状態を操作するための基本的なコードをまとめています。フォームやインタラクティブなUIを作成する際に役立つ内容です。
jQueryでフォームのreadonly属性を操作する方法
2025.02.04
jQueryを使ってフォーム要素のreadonly属性を動的に操作する方法について解説します。readonlyの設定と解除の手順をシンプルにまとめました。
ダッシュボードのパフォーマンス改善：Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。