サイトにjQueryが使用されているかどうか調べるには？

Question

公開されているサイトを見て、「この部分の動作にjqueryが使われている」って
調べる事はできますか？

画面上で右クリックすると「ページのソースを表示」や「検証」の項目が
出てきますが、ここを見れば探せるのでしょうか。
また、Wordpressで構築したようなサイトでも見れますか？
どういう所にjQueryを使っているのか色々見て勉強したいのですが。

詳しい方は、サイトそのものを見れば分かるのだと思いますが、それでは自信がないので。。。
よろしくお願いします。

fufufunofufufu · Accepted Answer

>>jQueryなら記述してあるセレクタを見れば、HTMLのどこに影響してい
>>るのかすぐわかると思うので
>>そのセレクタをHTML上で探せば良いと思います。
>この辺り、まだまだ理解しきれないのですが、

jQueryの記述方法が
$("#navi a").click(function(){ ・・・});
みたいにHTMLのタグやCSSのIDやクラス指定と同じような書き方でセレクタを書く（だけじゃないけど）ので、HTML上でこのセレクタを探せばどこでjQueryを使っているかはわかると思います。

>あと、スクロールとか、マウスオンで色が変わるとか、常に動きがない場合は黄色表示はされないのでしょうか？

マウスオンイベントは実際にマウスオンした時に黄色くハイライトされます。
基本的にイベントが発動している最中は必ず変化部分がハイライトされるので、
firebagをウィンドウから切り離し（firebagの右上に赤い四角ボタンで切り離し/結合できます）最大限に開いて、ソースの入れ子は開いた状態で、あれこれとページをいじったりすれば、何かしらイベントが起きている箇所はハイライトされるので、それで見つかると思います。

firebagのハチマークの右の四角に矢印が付いているアイコンをクリックした状態で、ページ上で怪しいと思ったところをクリックすれば、
その箇所のHTMLの入れ子は勝手に開いてくれるので、そうやって探すのも良いと思います。

とりあえず、適当なサイトをfirebagで見て、firebag自体もたくさん触ってみると自ずと分かると思います。

あと余計かもですが、超初心者とのことで、それなら、まずは他サイトの仕様を見るのも良いですが、きちんと基本から学んだほうが良いと思います。
サイトで使われているものって、本当はもっとシンプルに構築できるものをわざわざ無駄にプラグインをコピペで使っていたり、無駄なソースが多かったりと、必ずしも良い物ばかりではないです。

私は高橋のりさんの本「やさしくはじめるWEBデザイナーのためのjQueryの学校」という本と、jQuery本家の「API Documentation」のリファレンスから入ったのですが、超々基本を抑えられたおかげで、その後の応用や人の作ったプラグインなども結構楽に理解出来るようになりました。
おかげで今は普通に世に出てるサイトの挙動位ならだいたい見て理解できて自分一人で０から作れるくらいには出来るようになりました。
遠回りに感じるかもしれないですが、基本を抑えたほうが結果的に早く身につきますよ。

頑張ってください。

fufufunofufufu · Answer

こんにちは。

firefoxの拡張機能firebagを使ってます。
これを使って画像のように、ページで使用しているスクリプトを見ることができます。

画像は教えてgooのまさにこのページをfirebagで見たものです。
上の方はGAやSNSプラグインなどのjsが写っていますが、
見ていくと、このページに適用されているjsがすべてわかるので、この中から該当しそうなjsを選択すると、中身が見れます。

jQueryなら記述してあるセレクタを見れば、HTMLのどこに影響しているのかすぐわかると思うので
そのセレクタをHTML上で探せば良いと思います。

あと動きのあるjQueryなら、firebagでHTMLを見るだけでも、
動いているところが黄色くマーカー表示されます。

頑張ってください。

サイトにjQueryが使用されているかどうか調べるには？

>>jQueryなら記述してあるセレクタを見れば、HTMLのどこに影響してい

こんにちは。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング