• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• Lhankor_Mhy2011/11/10 11:27:29

  

  あ、すみません。もうひとつの質問を回答していませんでした。

  jQueryではメソッドチェーンで書いていくのがお作法といいますか、$で表現するjQueryコアはもちろん、多くのメソッドでjQueryオブジェクトを返します。

  $('#hoge').hide()
            .addClass('fuga')
            .show()
  

  上記のコードは、以下のような感じです。

  1. $('#hoge')がjQueryオブジェクトを返す
  2. 返ってきたjQueryオブジェクトのhideメソッドを実行するとjQueryオブジェクトが返る
  3. 返ってきたjQueryオブジェクトのaddClassメソッドを実行するとjQueryオブジェクトが返る
  4. 返ってきたjQueryオブジェクトのshowメソッドを実行するとjQueryオブジェクトが返る

  　

  同じような構造を簡単なjavascriptで書きますと、

  var hoge = {
    fuga:function(){alert('fuga');return this;},
    piyo:function(){alert('piyo');return this;},
  }
  hoge.fuga().piyo().fuga().piyo();// fuga piyo fuga piyo とアラート4回
  

  こんな感じです。オブジェクトのメソッドの最後にreturn thisを書いておくと自分自身を返すことになるので、メソッドをつないで書いていくことができるのです。

  スター

  • 

    1件のコメントを見る

  • koime_ryokutya 2011/11/13 09:12:33

    回答ありがとうございます。とても勉強になります。

    スター

その他の回答

• Lhankor_Mhy2011/11/10 09:30:44

  まず、

  $('.trigger')
  $('.trigger', document)
  //両者はほぼイコール
  

  です。後者はdocumentの中の.triggerを探せ、という意味でして、前者は範囲を明示していないだけです。

  　

  次にthisですが、これはそのコードが実行されている場所によって変わってきます。

  普段はwindowオブジェクトを返しますが、たとえば、

  var hoge = {
    test:function(){
      return this
    }
  }
  hoge.test();//hogeオブジェクトを返す。
  

  です。

  そういうわけで、そのthisの意味は周りのコードによって変わってくる、ということです。

  　

  　

  　

  ではありますが、一般的にその書き方をするのはおそらくイベントだと思います。jQuery公式のレファレンスからコード例を引っ張ってみます。

  $('div.foo').click(function() {

  $('span', this).addClass('bar');

  });

  jQuery() – jQuery API

  この場合クリックイベントが起きたときにthisが参照されますが、これはクリックされた要素を返します。つまり、この場合の$('span', this)は、クリックされた要素の中にあるspan要素、という意味です。

  スター

  • 

    6件のコメントを見る

  • Lhankor_Mhy 2011/11/10 09:31:11

    あれ、文字化け。

    スター

  • Lhankor_Mhy 2011/11/10 09:31:33

    再掲。

    ---

    まず、

    $('.trigger')
    $('.trigger', document)
    //両者はほぼイコール
    

    です。後者はdocumentの中の.triggerを探せ、という意味でして、前者は範囲を明示していないだけです。

    　

    次にthisですが、これはそのコードが実行されている場所によって変わってきます。

    普段はwindowオブジェクトを返しますが、たとえば、

    var hoge = {
      test:function(){
        return this
      }
    }
    hoge.test();//hogeオブジェクトを返す。
    

    です。

    そういうわけで、そのthisの意味は周りのコードによって変わってくる、ということです。

    　

    　

    　

    ではありますが、一般的にその書き方をするのはおそらくイベントだと思います。jQuery公式のレファレンスからコード例を引っ張ってみます。

    $('div.foo').click(function() {

    $('span', this).addClass('bar');

    });

    jQuery() – jQuery API

    この場合クリックイベントが起きたときにthisが参照されますが、これはクリックされた要素を返します。つまり、この場合の$('span', this)は、クリックされた要素の中にあるspan要素、という意味です。

    スター

  • Lhankor_Mhy 2011/11/10 09:32:14

    えー？

    スター

  • Lhankor_Mhy 2011/11/10 09:37:12

    まず、

    $('.trigger')
    $('.trigger', document)
    //両者はほぼイコール
    

    です。後者はdocumentの中の.triggerを探せ、という意味でして、前者は範囲を明示していないだけです。

    　

    次にthisですが、これはそのコードが実行されている場所によって変わってきます。

    普段はwindowオブジェクトを返しますが、たとえば、

    var hoge = {
      test:function(){
        return this
      }
    }
    hoge.test();//hogeオブジェクトを返す。
    

    です。

    そういうわけで、そのthisの意味は周りのコードによって変わってくる、ということです。

    　

    　

    　

    ではありますが、一般的にその書き方をするのはおそらくイベントだと思います。jQuery公式のレファレンスからコード例を引っ張ってみます。

    $('div.foo').click(function() {

    $('span', this).addClass('bar');

    });

    http://api.jquery.com/jQuery/

    この場合クリックイベントが起きたときにthisが参照されますが、これはクリックされた要素を返します。つまり、この場合の$('span', this)は、クリックされた要素の中にあるspan要素、という意味です。

    スター

  • Lhankor_Mhy 2011/11/10 09:39:09

    あー、やっとできた。引用記法がダメだったみたい？

    スター

  • koime_ryokutya 2011/11/10 10:35:50

    丁寧な回答ありがとうございます。

    スター

TransFreeBSD2011/11/10 10:19:39

ちなみに「$」と言うのは関数名で、javascriptでは変数や関数の名前に英数字以外に「_」と「$」も使えるのです。ですので、jQueryを使ってなければ、自分で

function $(){...}
var hoge = $();

などと出来ます。

他の言語でも「_」一文字の関数を作ったりできるかもしれませんが、普通はしないですよね。

jQueryなどがちょっと特別な関数に用いるjavascript（jQuery以後？）特有の文化です。

スター

• 

  1件のコメントを見る

• koime_ryokutya 2011/11/10 10:35:57

  回答ありがとうございます

  スター
• その他の回答を読む

この質問へのコメント

質問の情報

登録日時

2011-11-10 08:08:58

終了日時

2011-11-13 09:12:40

回答条件

1人5回まで

この質問のカテゴリ

• コンピュータ
• インターネット

この質問に含まれるキーワード

人気の質問

• ヤフーを検索していたら、たまに写真…つまり、サムネイルが表示されている事があります。知恵袋の履歴をそ…igorsan1日前
• 学芸会の動画を編集しています。8K解像度舞台全体を撮影しています。この動画素材で動画を切り出して編集し…mai_mai_mail11日前
• プラ容器の問題 醤油、蜂蜜、油脂類などのプラ容器が多いですが、プラ材質の化学有害物質が内容物に汚染す…iquestion21日前
• 思春期で親がうざいときどうすればいいですか。匿名質問者412日前
• 二重整形って最小何歳でできるんですか匿名質問者1112日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ