jqueryの$()について

質問

貴重な場を借りて質問させていただきます。下記のコードはページ内リンクをさせるコードなのですが、※他のサイトからコピペしてます。

2点ほどお聞きしたいことがあります。
一点目はfunction()の()内に＄をいれているのはなぜでしょうか。私が書く際にはつけたことがなくて気になりました。

二点目は、targetという変数を作りったのにも関わらず、それをまた$()内
にいれ、$(target)としている理由がわからず、おしえていただけませんでしょうか。

jQuery(document).ready(function($) {
$('a[href^=#]').click(function() {
if ($(this).hasClass('scroller')) {
var target = $(this).attr('href');
if (target != '#') {
target = $(target).offset().top;
$('html,body').animate({
scrollTop:target
},1500,'quart');
} else {
$('html,body').animate({
scrollTop:0
},1500,'quart');

回答No.3

fujillin · ベストアンサー

ANo1です。

＞こちらはあくまでtargetに入るのはhref属性(http://www.hogehoge.com)
＞だと思うのですが、
すでに、No2様が詳しく説明してくださっている通りですが…

そもそもご提示のコードでは、clickイベントはページ内リンクのあるリンク要素にだけ設定されています。
それなので、イベント処理が実行されるのはページ内リンクがクリックされた時だけです。
ページ内リンクは基本的に#fugaといった形式になっており、targetにはこの値が代入されます。
その状態でtargetをセレクタとして利用すると、$(target)は$("#fuga")と同じ意味となり、結局のところ、id="fuga"を持つ要素を意味することになる。
という仕組みです。

まとめて $( $(this).attr('href') ) と記述しても同様です。

お礼

ご回答いただきありがとうございました。始めに回答をいただけたということで、ベストアンサーとさせていただきます。今後ともよろしくお願いします。

回答No.2

Gotthold

一点目については、APIドキュメントに書いてますね。

.ready() | jQuery API Documentation
http://api.jquery.com/ready/
より引用
| [Aliasing the jQuery Namespace]
| When using another JavaScript library, we may wish to call $.noConflict() to avoid namespace difficulties.
| When this function is called, the $ shortcut is no longer available,
| forcing us to write jQuery each time we would normally write $.
| However, the handler passed to the .ready() method can take an argument, which is passed the global jQuery object.
| This means we can rename the object within the context of our .ready() handler without affecting other code:
(日本語情報はすぐには見つけられなかった。サンプルコードの所見れば何となく分かるかと。)
書いてあることはNo.1さんの推測と同じですね。

> こちらはあくまでtargetに入るのはhref属性(http://www.hogehoge.com)だと思うのですが、
正しくは「targetに入るのはhref属性(#fuga)」ですね。
なので target には "#fuga" のような文字列(jQueryオブジェクトではない)が入るはずです。

$('a[href^=#]') なんてことをしてるのだから
当然#から始まるhref属性が対象のはずで、
"http://www.hogehoge.com"みたいなhref属性にはならないでしょう。
alertなりconsole.logなりでtarget変数の値を調べてみてはどうですか？

お礼

お詳しい説明本当にどうもありがとうございました。無事解決できました。

回答No.1

fujillin

＞function()の()内に＄をいれているのはなぜでしょうか。
ready関数でfunctionに渡される引数はjQueryのようです。
グローバルな$関数が使えない場合 （noConflict()を実行していたり上書きされている） を考慮して、ローカルに$を再定義しているのだと推測します。

＞targetという変数を作りったのにも関わらず、それをまた$()内にいれ
　var target = $(this).attr('href');
でtargetに代入されるのはjQueryオブジェクトではなく、文字列です。（例えば"#fuga"など）
これをidとする要素を取得する目的で、$(target)としているのでしょう。

補足

ご回答どうもありがとうございました。
大変参考になります。

ただ二つ目の質問のご回答が私の技術不足で少々わからず、もう一度詳しく教えていただきたいなと思うのですが。。。

var target = $(this).attr('href');
こちらはあくまでtargetに入るのはhref属性(http://www.hogehoge.com)だと思うのですが、
$()内に入るのはhttp://～というjqueryオブジェクトではなく、'target'という文字列ということでしょうか。

そうであれば$(target)でIDを取得できる意味がわからないです。。。
すみませんお手数ですが詳しく教えていただいてもよろしいでしょうか。よろしくお願いいたします。