上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

今回は前回書いたソースを元にjQueryの書き方の基礎を解説していきます。
さて、前回のソースにおいてjQueryにあたるのは下記の3行です。

$(function(){
        $("p").text("Hello,World");
    });

実際にテキストを表示する動作をしているのは下記の部分です。
まずはここから解説していきましょう。

$("p").text("Hello,World");

1.セレクタ

jQueryにはCSSと同様にセレクタという概念があります。
書き方がCSSのセレクタと非常に似ているので理解しているのであればすぐに書き方がわかると思います。

まず、基本的な書き方は3つです。

  • $(" #id名 ")
  • $(" .class名 ")
  • $(" タグ名 ")

それぞれ、#idでは指定したidが設定されている要素、 .classでは指定したclassが設定されている要素、 タグ名では指定したタグの要素へとアクセスすることができます。今回は $("p") となっているので、<p>タグへのアクセスとなります。

2.メソッド

jQueryでは基本的にセレクタで要素にアクセスし、メソッドを使って処理を行います。
今回は .text("Hello, World") がメソッドの部分になります。

textメソッド : text(val)
対象となる要素にテキストを設定します。

対象は前に書かれたセレクタに対応する要素です。なので、$("p").text("Hello,World"); というのは <p>タグ全てに"Hello, World"のテキストを設定する という動作になります。実際に、前回のHTMLソースでは <p>タグ内には何も書いていなかったはずなのにブラウザで読み込んだときには Hello,World というテキストが設定されていたのがわかると思います。

次に全体を括っている$(function(){ })について解説します。
これはページが読み込まれたときに実行するというメソッドで、古い書き方では$(document).ready(function(){ })となるそうです。動作としてはHTMLタグにonloadプロパティでJavaScriptを指定したときに同じ動作になります。つまり、$(function(){ })の内部に処理を書くとページが読み込まれたときにその処理が実行されることになります。

以上を踏まえた上で、前回のソース全体を見直してみましょう。

$(function(){
        $("p").text("Hello,World");
    });
いかがでしょうか。「ドキュメントが読み込まれたら、<p>タグ全てに"Hello,World"というテキストを設定する」というのが読み取れますでしょうか?

今回はここまでです。次回はセレクタにおけるフィルタについて勉強します。というのもjQueryのセレクタは非常に強力でフィルタを組み合わせることによってスマートに対象の要素にアクセスできるからです。

では、また次回。
Comment
Trackback













管理者にだけ表示を許可する

Comment form

openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。