jQuery 1: jQueryを使用するには

ここでは、JavaScriptのライブラリーjQueryを使用する方法を解説します。WebページでjQueryを利用するには、HTMLの<head>…</head>タグ内に<script>…</script>タグを追加してjQueryのライブラリーを組み込む必要があります。

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

jQueryのコードは、jQueryのready()イベント内に記述します。ready()イベントは、ブラウザ上にすべてのHTMLソースが読み込まれたときに実行されます。ready()イベントは省略形で記述することもできます。

$(document).ready(function () {...}); // jQueryのready()イベント
$(function () {...}); // jQueryのready()イベントの省略形式

このサンプルでは、ブラウザにWebページが表示されたら、div#sayHello要素にテキスト文字「Hello World!」を挿入して表示します。div要素にテキスト文字を挿入するには、jQueryのtext()メソッドを使用します。div要素を検索するには、div要素のid属性の「名前」を指定する方法とclass属性の「名前」を指定する方法があります。id属性の名前を指定するときは、名前の前に「#」を付加して「#sayHello」のように記述します。div要素名を付加して「div#sayHello」のように記述することもできます。

class属性の名前を指定するときは、名前の前にドット「.」を付加して「.cssHello」のように記述します。div要素名を付加して「div.cssHello」のように記述することもできます。jQueryでHTMLの要素を検索するときは「$(‘要素’)」のように記述します。

$('#sayHello').text('Hello World!'); // div要素のid属性の名前を使用した例
$('div#sayHello').text('Hello World!'); // div要素名+id属性の名前を使用した例
$('.cssHello').text('Hello World!'); // div要素のclass属性の名前を使用した例
$('div.cssHello').text('Hello World!'); // div要素名+class属性の名前を使用した例

<div id="sayHello" class="cssHello"></div>

div要素にHTMLタグ(<b>…</b>)を含むテキスト文字を挿入するには、text()メソッドの代わりにhtml()メソッドを使用します。

$('div.cssHello').html('<b>Hello World!</b>');

サンプルの作成手順(jQuery-1.aspx)

  1. Webページを作成する
    Visual Studio(VS)を起動したらソリューションエクスプローラのルートフォルダにマウスを移動します。マウスを右クリックしてコンテキストメニューを表示したら「新しい項目の追加」をクリックして選択します。ポップアップウィンドウが表示されたらオンラインテンプレートから「Webフォーム」を選択して「名前」のテキストボックスに「jQuery-1.aspx」を入力したら、[追加(A)]ボタンをクリックします。
  2. jQueryのライブラリーを組み込む
    Webページ(jQuery-1.aspx)が作成されたら、「ソース」ビューに切り替えて<head>…</head>タグ内に<script>タグを入力してjQuery 2.xのライブラリーを組み込みます。

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  3. WebページにHTMLのdiv要素を配置する
    HTMLの<div>…</div>タグを配置したらid属性に「sayHello」、class属性に「cssHello」を設定します。ここで設定したid属性とclass属性はjQueryでdiv要素を検索するときに使用します。

    <div id="sayHello" class="cssHello"></div>
  4. jQueryのコードを記述する
    <head>…</head>タグ内に<script>…</script>タグを追加したら、次のようなjQueryのコードを入力します。

    $(function () {
      $('#sayHello').text('Hello World!'); // div要素にテキスト文字を挿入する
    });
    
  5. Webページを表示する
    VSのソリューションエクスプローラからサンプルのWebページ「jQuery-1.aspx」にマウスを移動して右クリックします。コンテキストメニューが表示されたら「ブラウザで表示」をクリックして選択します。ブラウザにサンプルが表示されてdiv要素に「Hello World!」のテキストが挿入されます。そしてブラウザに「Hello World!」の文字が表示されます。

サンプルのソースコード(jQuery-1.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery-1.aspx.cs" Inherits="jQuery_1" %>

<!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">
<head runat="server">
 <title>jQuery-1: jQueryを使用するには </title>
 <%--jQuery 2.x (IE < 9 not supported)--%>
 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
  $('#sayHello').text('Hello World!');
 });
 </script> 
</head>
<body>
 <form id="form1" runat="server">
  <div>
   <h1>jQuery 1: jQueryを使用するには?</h1>
   <div id="sayHello" class="cssHello"></div>
  </div>
 </form>
</body>
</html>

VSのサンプル画像

jQuery-1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする