JQUERYについて教えてください。

JQUERYについて教えてください。

readyがDOMを読み終わってから実行しろという意味は分かったのですが、
あったりなかったりするfunction()はどんな意味なのでしょうか？

function(){
$(this).stop().animate({'marginBottom':'60px'},150);
},function(){
$(this).stop().animate({'marginBottom':'0px'},120);

こちらにあるのですがメソッドに一個必須なのでしょうか？


例

<script type="text/javascript">

$(document).ready(function(){
$('div#goto_top').hover(
function(){
$(this).stop().animate({'marginBottom':'60px'},150);
},function(){
$(this).stop().animate({'marginBottom':'0px'},120);

</script>

No.1 回答者： muuming2001 回答日時： 2014/09/08 16:58

とりあず、無名関数で検索してみてちょ

<script type="text/javascript">
$(document).ready(function(){
alert("hoge");
});
</script>

これは
<script type="text/javascript">
$(document).ready(hogefunc);

hogefunc = function(){
alert("hoge");
}
</script>

と同じ

この回答へのお礼

ありがとうございます。



functionは無名関数と言うものなのですか？
無名関数(anonymous function, nameless function)とは、名前付けされずに定義された関数のことである。
とあったのですが、これではさっぱり分かりません。

お礼日時：2014/09/11 13:13

No.2 ベストアンサー 回答者： fufufunofufufu 回答日時： 2014/09/09 17:18

あったりなかったりするfunction()というのがよくわからないのですが・・・

メソッドはすべて記述方法が同じなわけではなくて、それぞれ（ある程度種類に分けられますが）記述方法が違ってきます。

function()はざっくり言うと、その直前に書いてあるメソッドが発動したら、「これ」をするという「これ」の関数を呼び出すものという感じかな～・・・

それで、たぶん例がhover()だから混乱するのだと思うのですが、
hover()は特有の記述方法を持っていて、hoverメソッドひとつでマウスが乗ったときと外れたときの両方のイベントを一気に記述できるという特徴があります。
参考http://semooh.jp/jquery/api/events/hover/over,+o …

hover(マウスが乗ったときのイベントハンドラ,マウスが外れたときのイベントハンドラ)

例のhoverと同じ動きをする記述としてわかりやすいのが、
$(function() {
$("#foo").mouseenter(function(){
$(this).stop().animate({'marginBottom':'60px'},150);
}).mouseleave(function(){
$(this).stop().animate({'marginBottom':'0px'},120);
});
});

これは
mouseenter()←マウスが乗ったら
と
mouseleave()←マウスが外れたら

とがそれぞれ発動したらfunction()配下の関数をを呼び出しています。

$(document).ready(function(){}もドキュメントの読み込みが終わったら、function()以下を呼び出してねという感じです。


以上でわかりますかね？？？

ちなみにメソッドによって記述がちがうと言いましたが、
たとえば　.css()などのcss系メソッドなどは発動も何も、.css()の括弧内のパラメータどおりに操作するというメソッドなのでfunction(){}は.css(のあとにはつづきません。

またアニメーション系のメソッドのコールバック記述の際も直前にメソッドが当然こないのですが、その説明は割愛します。

メソッドの種類によって記述方法にルールがあるので、まずはそれを確認してみてはいかがかなと思います。

この回答へのお礼

返事が遅れまして恐縮です。

＞メソッドはすべて記述方法が同じなわけではなくて、それぞれ（ある程度種類に分けられますが）記述方法が違ってきます。

つまり、function(){
$(this).stop().animate({'marginBottom':'60px'},150);
のfunction()がなぜあってどんな意味合いかと言うことはあまり気にしないほうが良いと言うことでしょうか？
毎回リファレンスで、今回の関数は、ファンクションがつくと確認して、それをコピペして中の要素だけを代えるという感じで、
作っているのが普通なのでしょうか？
ファンクションの意味はこうだから、今回は入れる、入れないと作っているのではないのですかね？


＞あったりなかったりするfunction()というのがよくわからないのですが・・・
今回の例では一関数につき一ファンクションあるのですが、無い場合も良くあると思います。
そのあったりなかったりする理由がなぜなのかなと思いました。
DOMを読み込んだ後に実行したいか、それとも順番どおりに実行したいかという違いでつけたり付けなかったり自分で決めると言うことなのでしょうか？


＞function()はざっくり言うと、その直前に書いてあるメソッドが発動したら、「これ」をするという「これ」の関数を呼び出すものという感じかな～・・・

$("#foo").mouseenter(function(){
$(this).stop().animate({'marginBottom':'60px'},150);
であれば.stop().animateが発動したら...
その後が良く分かりません。

お礼日時：2014/09/11 13:07

No.3 回答者： fufufunofufufu 回答日時： 2014/09/11 18:11

>どんな意味合いかと言うことはあまり気にしないほうが良いと言うことでしょうか？

そういうわけではなくて、jqueryのメソッド自体がそもそも、イベントで関数を呼び出すメソッド、パラメータを取得するだけのメソッドなどと、傾向が複数あります。
なので、それごとに記述ルールも違うということです。
最初の回答にも書きましたが、css()は「括弧内のパラメータを適用する」というメソッドなので、括弧内は直接cssの内容を書いているので、関数を呼び出すことはないですよね？
(状況として、関数を代入してその解をパラメータとして適用するということはありますが、今はそれ以前のお話なので厳密なことは省きます。)


以下のサイトの左のメニューバーを見てください。
http://semooh.jp/jquery/api/events/
メソッドをカテゴリ分けしています。
すべて同じ記述というわけではないですが、カテゴリ内のメソッドは比較的記述ルールが似ている傾向にあります。

質問者様があげていた例はイベント系メソッドといって、
マウスホバーで括弧内の関数のとおりにイベント実行するというものなので、function()が入っています。


>であれば.stop().animateが発動したら...
その後が良く分かりません。

.animate()はエフェクト系メソッドなので、括弧内のパラメータどおりに影響を与えるもので、発動したらどうするという動きではないですよね？


>毎回リファレンスで、今回の関数は、ファンクションがつくと確認して、

なので、メソッドがイベント系なのかトラバース系なのかエフェクト系なのか・・・
という風にメソッドの概念がある程度わかっていてルールの傾向を覚えており、また慣れてくれば、毎回リファレンスを見なくてもだいたいわかりますが。。。

でも上記サイトを見ればわかるとおり、jqueryのメソッドはかなり数がありますので、誰だって、初めて使うメソッドがあれば記述ルールはある程度は確認してから使っていると思います。
HTMLやCSSもそうだと思いますが、とにかく実践で使って使って覚えていきますよね？
それと同じです。

記述ルールにメソッドの系統ごとに傾向があるので、まずはそれを確認してみては？と最初にお答えしましたがそういうことです。


失礼を承知で言うと(ごめんなさい)、質問者様はまだjqueryをつかうには大事な基本概念がまったくつかめていないと思います。
$(this).stop().animate(）←これもanimate()が癖のあるメソッドなのでその前にstop()をつけているというちょっと初心者が理解するには早いかなという内容です。

まずは例のようにメソッドをつなげたりしているものではなくて、
メソッドがひとつだけのものを実際に書いてみて記述ルールを覚えましょう。
動きがつかなくて勉強がつまらないかもしれませんが、基本が理解できないといつまでもその先は理解できません。

(※以下系統名称は参考書などによって異なることもあります)
css系　css()
属性系　attr()
エフェクト系　hide() show()
トラバース系　prev()
まずはこのあたりをしっかり理解してルールを覚えてから(メソッドは一例です）、

function()が入ってくるイベント系を勉強してみてください。
イベント系　click()



最後にfunction()入ってくる一例挙げますね。
【例】
クリックという動作をしたら、「文字の色を赤にする」という関数を呼び出す。
　　　　　　↓　　　　　　　　↓
$("#foo").click(function(){$(this).css("color", "red")});


勉強がんばってください。