プログラミングjQueryjQueryの基本を、画像に簡単なエフェクトを加えながら勉強してみたいと思います。jQueryを使えばJavascriptは怖くない世の中には沢山のJavascriptライブラリが存在します。何かやりたいことがあれば、検索してソースをコピペすると大概のものは事足ります。スクリプトが理解できると、自分で出来ることの幅が一気に広がります。あーこのプラグインだいたい望みどおりなんだけど惜しいなー、という時も、自分でちょちょいとカスタマイズすることで解決できるかもしれません。javascriptはスクリプトの見た目から難解に感じますが、jQueryを使うことにより、便利な機能を、とても簡単に、自分の好みに応じて実現することができます。Javascriptを勉強しようとする上で、jQueryはとてもいい入り口だと思います。これ作ってみますデモページマウスオーバーで、ジワッと透明度が変わるアニメーション効果です。jQueryを使う準備jQueryとはJavascriptを便利に使うためのライブラリです。ライブラリとは便利な機能を一つのファイルにまとめたものです。最初にHTML上でjQueryを呼び出す必要があります。APIという便利なものがあります。type="text/javascript"></script>メジャーなライブラリは、ここから読み込んで、みんなで使っちゃおうぜ、というものです。class="photo">ただの画像です。classをphotoと名づけました。type="text/javascript">$(function(){$("img.photo").hover(function(){$(this).stop().animate({"opacity":"0.7"});},function(){$(this).stop().animate({"opacity":"1"});});});</script>慣れてくるまでは、Javascriptのルックスは最悪だと思います。}が心をかき乱します。順番にコードをみていきます。基本的に$(function(){と});の間に実行させる処理を書きます。いうものだと自分に言い聞かせます。$("img.photo")↑これは巷では「セレクタ」と呼ばれています。CSSみたいなので、理解しやすいと思います。classがphotoのimgのことです。$("img.photo").hover(function(){↑セレクタの上にマウスが乗ると、続く処理を実行する。$(this).stop().animate({"opacity":"0.7"});jQueryの便利タグが使われています。$(this)は深く考えると難しくなるので、ここではイベント発生源と考えて良いと思います。$(“img.photo”).hoverマウスカーソルが乗った状態の画像です。.stop()これはアニメーションを止める処理です。アニメーション中の場合の事を考えて、まずは止めます。.animate({“opacity”:”0.7′′})これがアニメーションさせるタグです。.animate()は中に書くパラメータの値によっていろんなアニメーション効果が実現できます。{“opacity”:”0.7′′}は不透明度を70%にするということです。},function(){その後、一旦処理が閉じられて再び処理が書いてあります。カンマ以降の命令文はマウスカーソルが外れた時の処理です。$(this).stop().animate({"opacity":"1"});透過中であればまず止めて、その後、不透明度100%にアニメーションします。なんとなく理解するここまで読むとなんとなくJavascriptのコードが何をしているのかわかると思います。type="text/javascript">$(function(){$("img.photo").hover(function(){$(this).stop().animate({"opacity":"0.7"});},function(){$(this).stop().animate({"opacity":"1"});});});</script>このくらい短いスクリプトを、タグの意味を順番に思い出しながらコピペでなく自分で書いてみると、ずいぶんJavascriptが身近になると思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。