レンタルサーバー活用方法

レンタルサーバー活用方法｜jQueryとは

jQueryはJavaScriptのライブラリの1つで、AjaxやJavaScriptのDOM操作等を簡単に記述できるようになります。ホームページに導入して、インタラクティブなサイトにしましょう。

例えば、以下のようなコードを書いたとします。

$('#button').click(function () {
  $('#target').toggle('slow');
});

HTML部分は以下のようになっています。

<p>「<span id="button">click</span>」</p>
<p id="target">ここが対象です。<br>「click」を押すとこの枠が</p>

CSSは以下のようになっています。

#button {
  cursor: pointer;
  color: blue;
}

#target {
  border: solid 1px #333333;
  padding: 0.5em;
}

下のclickを押してみてください

「click」

ここが対象です。
「click」を押すとこの枠が

こんなに短いコードで表示・非表示が出来てしまいます。

jQueryを入手しよう

まずはjQuery公式サイト（http://jquery.com/）へ行き「jQuery」本体をダウンロードします。

公式サイト右側にある、「Download」より最新版をダウンロードします。そのときに圧縮レベルを選択できますが、好きなものを選んでください。

後は設置したjQueryファイルをHTMLで読み込むだけです。

<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="jQuery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
$(function () {
ここにコードを記述
});
// -->
</script>
</head>
<body>
   :

「ここにコードを記述」といる個所に上記jQueryサンプルコードをコピーペーストすると動作すると思います。

全体的な例としては以下のようになります。

<html>
<head>
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" src="jQuery-1.2.6.min.js"></script>
<script type="text/javascript">
<!--
$(function () {

  $('#button').click(function () {
    $('#target').toggle('slow');
  });

});
// -->
</script>
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
#button {
  cursor: pointer;
  color: blue;
}

#target {
  border: solid 1px #333333;
  padding: 0.5em;
}
-->
</style>

</head>
<body>

<p>「<span id="button">click</span>」</p>
<p id="target">ここが対象です。<br>「click」を押すとこの枠が</p>

</body>
</html>

もし正常に動作しないようでしたら、jQueryの設置位置、呼び出し、「;」等コードの記述ミスが無いか確認してみてください。

※このページで紹介しているサンプルは「jQuery 1.2.6」を使用しています。バージョンの違い等により正常に動作しない場合がありますのでご注意ください。

ページの先頭へ