WebデザイナーのためのJavaScript & jQuery入門

jQueryの記述方法

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryの基本的な文法を学び、実際に表示してみましょう。
講師:
05:25

字幕

このレッスンでは jQuery の記述方法を学びましょう。実際に jQuery の文法で記述をしてブラウザで確認する流れを行います。それでは begin と final のファイルを両方ともブラウザにドラッグ&ドロップで表示をしましょう。そして final の方に移動してこの青い見出しをクリックしてみると写真が消えて、もう一度見出しをクリックすると写真が戻ってくるということを確認します。そうしましたら beginに行きましてSublime Text で begin のファイルを開いていきましょう。そして、コメントを探します。コメント、まず25行目「jQuery を読み込む」とあります。これは jQuery の記述をするためにはjQuery のライブラリ本体を読み込む必要があるからです。なので、このように script タグで外部の JavaScript を読み込みます。そして今回 jQuery はcommon フォルダの中のjs フォルダの中に入っています。ただまだファイル名がありません。ですので、ここに入力をしていきましょう。ファイル名はjquery-1.11.0ドットmin.js です。 これは jQuery のライブラリのバージョンが 1.11そして min は minify の略で圧縮されているつまりファイルが軽くなっているものという意味があります。この数字を見ることで jQuery のバージョンを判定することができます。それでは、この後 jQuery の記述を進めていきますが既にこの様に jQuery の記述が入っています。実は、このブラウザの見出しに書いてある通りルールがある程度決まっています。まず、このドル$ マーク$そして . メソッドメソッドの () の中身には値やパラメータが入ることになっています。この $ というのが jQuery のショートカットみたいになっています。それではまず Sublime Text の$() このクォテーションの内側にh3 と書いてみましょう。そして、次のクォテーションの内側にはimg と書いてみましょう。そして上書き保存をしてブラウザを更新します。一見何も変わっていないようですがこの見出しの部分をクリックしてみましょう。写真が消えました。そしてもう一度見出しを’クリックしてみましょう。写真が現れました。この命令が何を意味しているかというとセレクタ、つまり h3 を特定しています。 h3 をメソッド、今回はイベント扱いのメソッドが click ですがh3 をクリックすると次のセレクタです。img タグが fadeToggle しますよという風に読めます。この fadeToggle というのは消えたり出たりという命令を実はこの一単語で表示することができています。そして、値についてもやっておきましょう。fadeToggle の後ろにある() の中にカーソルを入れて例えば 3000 という風に数字を入れました。そして上書き保存をしてブラウザを更新してみます。更新するとやはり何も変わってない様に見えるのですがこの見出しをクリックしてみましょう。クリックすると先程よりもゆっくりと消えもう一度クリックをしてゆっくりと戻ってきたようです。これは、このパラメーター3000 というのが右セカンドという単位なので3秒という意味になります。3秒かけて消えて3秒かけて現れるという命令に変わりました。この様にセレクタとメソッドとパラメーターを見分けることが出来れば比較的容易に jQuery を記述していくことができます。このレッスンでは jQuery の基本的な記述方法について学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。