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

メソッドを知ろう HTML編

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サンプルページを使って、動的にHTMLをコントロールしてみましょう。
講師:
06:26

字幕

このレッスンでは jQuery のメソッドを学びます。基本的なメソッドをおさえて jQuery の幅を広げていきましょう。begin のファイルをまずブラウザで開きます。そうしますと、このように灰色のボックスが1つあります。そして begin のファイルをSublime Text で編集していきましょう。Sublime Text をスクロールすると「メソッドを試そう」というコメント部分があります。さて、ここから記述を進めていきましょう。まず $( )そしてセレクタはクォーテーションで囲みます。.box1 と書きます。なぜこう書いたかというとこちらの HTML に div class box1という風に箱にクラス名が付いてるからです。ですので、class box1 とセレクトしてあげました。そしてここにメソッド.html と書いて ( )そしてここに値が入りますのでクォーテーションを作ってhtml を挿入しますという文章を書いてみました。行末はセミコロンを打っておきます。そして上書き保存をしてブラウザにフォーカスして更新をしてみましょう。更新をすると先程まで box1 と書いてありました。 そして HTML のソース上もbox1 です。ですが、この jQuery の命令によってbox の中身の HTML を書き換える、ということが可能になりました。この .html はそういったメソッドです。それでは次のメソッドを試してみましょう。改行して $( )そしてクォーテーション .box1と引き続きこちらの box にメソッドを CSS を試したいと思います。そして ( ) を打ったら値の方はクォーテーション backgroundそして background はCSS のプロパティです。そしてカンマで区切ってクォーテーションそして #ffffc2という風に試しに打ってみました。そして上書き保存をしてブラウザで更新。そうすると、このように背景色が変わったと思います。こちらも CSS では既に背景色のグレーが指定してあったのですがjQuery で上書きをしました。それでは更にメソッドを書いていきましょう。Sublime Text でこの backgruoud の行にカーソルを合わせCommand+CWindows では Ctrl+C でコピーをとりペーストをします。そうすると行の複製がとれます。 ではこの CSS の部分addClass と書き換えました。クラスを付ける、というメソッドです。そしてパラメータの中にはそのクラス名が入りますのでクォーテーションを一組残して中身を border と書いてみました。そして上書き保存をしてブラウザを更新します。そうしますと、このように黄緑の帯がつきました。これは CSS で実は border というクラスが既に定義されています。このように CSS で先に定義しておいたものをjQuery で付けるといったことも可能です。また行をコピーしてペーストしてメソッドの名前を remove そして Class と書いてみました。これで上書き保存をしてブラウザを更新すると枠が消えます。これは一行上で付けたborder のクラスをremove (取り除く)という命令でまた取り外したということになっています。またこの行をコピーしてペーストまたメソッドを変えていきます。removeClass を消してhide そしてパラメーター値は空っぽにしておきます。これで上書き保存をします。そしてブラウザで更新です。今度はボックスが消えてしまいました。これは読んで字の如くhide (隠す)という命令で強制的に箱を隠すことが可能です。 そしてこの行をコピーしてペーストをとり箱を表したいのですが実は既に box2 という箱が HTML 上には書いてあります。実はこの box2CSS によってdisplay:none という隠れていて欲しいという記述が実は書いてあります。このことによって今は見えていません。ですが、この jQuery のセレクタをbox2 に変えてhide の反対show というメソッドに変えて上書き保存をしてブラウザにフォーカスそして更新をするとbox2 の中身が現れるという仕組みになっています。このように CSS と連携してメソッドを使うとjQuery の幅が広がります。このレッスンでは jQuery の基本的なメソッドを学びました。

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

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

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

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

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

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