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

いろいろなセレクタを試そう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML&CSSの復習と、CSSセレクタとの違い、メリットを学びます。
講師:
05:18

字幕

このレッスンではjQuery のセレクタについてもっと深く知ってみましょう。jQuery によって要素をどのように選択するかバリエーションを知っておくと非常に役に立ちます。それでは begin のファイルをブラウザで開きます。そして、同様にSublime Text でも開きます。開きましたら、まずHTML の方を見てみましょう。この様に table タグで表が書いてあります。この表を今からjQuery で、いろんな箇所を特定して装飾をしてみましょう。それでは Sublime Text に移動します。まず、ソースを一番下までスクロールすると既に jQuery が読み込まれているということが確認できます。必ず jQuery を使う時はこの jQuery 本体が読み込まれていることを確認しましょう。それでは「セレクタを試そう!」という所の部分の下に記述を進めていきます。まず $ マークそして ()そして ' (クォーテ―ション)を打って例えば th という風に打って.cssそして ()そして 'background', (カンマ)そして '(クォーテ―ション)そして、色は #effそして、行末は; (セミコロン)と打っておきます。 そして、上書き保存をしてブラウザを更新してみましょう。そうしますとth の背景が水色になりました。これは Style Sheet でも可能なことですがjQuery でも、この様に記述をすればCSS をコントロールすることができます。また例えば、この th というのはタグセレクタですがこのテーブルは id="result" という箱に入っていますのでCSS での id セレクタの書き方#result のtd としてみました。半角スペースを入れることで子孫セレクタという書き方になります。上書き保存をしてブラウザを更新します。そうしますと、今度は右側がtd タグで出来ていますので右側が水色に染まりました。また id セレクタの他にもclass セレクタを試すこともできます。今回は table class="company"という風に書いてあります。ですので、この table についたクラスを利用してみましょう。クラス は CSS では. (ドット)から始まります。.company というCSS と同様の記述が可能です。.company と入力をして上書き保存。そして、ブラウザを更新します。そうしますと.company はテーブル全てが対象になりますので全てが背景色で染まりました。 それでは、少し変わったセレクタを試してみましょう。この company の後ろに半角スペースでtrそして : (コロン)そして odd と打ちます。そして上書き保存をしてブラウザのファイルを確認してみましょう。更新。そうしますと、この様に行違いで染まる様になりました。この :odd というのは「奇数行を選択できる」ということなのですがゼロ始まりということになるので実際には、偶数行がこの様に背景色で染まるということになります。そして、この odd をeven に変えてみましょう。そして、上書き保存をしてブラウザで更新をしてみます。そうしますと、この様に先ほどとは反転して1行目が色が変わり2行目は色が元に戻りという様に、交互に色が付くように変わりました。この :even は jQuery 特有の書き方のセレクタになりますので是非、覚えておくようにしましょう。このレッスンではjQuery のセレクタについて学びました。

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

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

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

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

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

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