jQuery入門：基本操作からHello Worldの実践まで
2010.07.22
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)と同じなので、覚えやすくて良いですね。
ダッシュボードのパフォーマンス改善：Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。
セレクトボックスでデータ更新を実現する仕組みと実装例
2024.11.29
「チェックボックスを使ったデータ更新の仕組み」に続く記事として、今回はセレクトボックスを活用したデータ更新の方法をご紹介します。複数の選択肢から値を選び、それをサーバー側に送信して更新する仕組みを、実装例とともに解説します。
チェックボックスでデータ更新を実現する仕組みと実装例
2024.11.27
一覧画面のチェックボックスを用いて、データの状態を即時に更新する仕組みを実装する方法を解説します。HTMLの構造設計からJavaScriptの連携処理、サーバーサイドでの対応まで、説明しています。