jQueryを勉強しています。下記のようなコードがあったのですが、


var trigger = $('.trigger', this);

何を示しているのかよくわかりません。普通のJavaScriptでは
var test = function(){}
と書けばtestオブジェクト生成だと思うのですが、上記のjQueryも何かのオブジェクトを生成しているのでしょうか?また、.triggerは、triggerクラスのセレクタを指定しているのだと思うのですが、2つめの引数のthisは何を示しているのでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/10 08:08:58
  • 終了:2011/11/13 09:12:40

ベストアンサー

id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/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を書いておくと自分自身を返すことになるので、メソッドをつないで書いていくことができるのです。

id:koime_ryokutya

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

2011/11/13 09:12:33

その他の回答(2件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/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要素、という意味です。

他4件のコメントを見る
id:Lhankor_Mhy

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

2011/11/10 09:39:09
id:koime_ryokutya

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

2011/11/10 10:35:50
id:TransFreeBSD No.2

TransFreeBSD回答回数668ベストアンサー獲得回数2682011/11/10 10:19:39

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

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

などと出来ます。

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

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

id:koime_ryokutya

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

2011/11/10 10:35:57
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312011/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を書いておくと自分自身を返すことになるので、メソッドをつないで書いていくことができるのです。

id:koime_ryokutya

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

2011/11/13 09:12:33

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません