Webデザイナーのためのjquery入門2（前編）

Webデザイナーのための jQuery入門　-覚醒編（前編） -jQueryのコードを自分で考えて書けるようになろう！

目標日々の業務にjQueryを取り入れて、自分で何かを作れるようになる。

大まかな内容１.　何かを取ってくる　２.　それに何かをする３.　まとめ　

1 何かを取ってくる

1-1 セレクタ

１−１−１セレクタって何だっけ要素を取ってくる役割を果たすもの。以下のように書くと「何かを取ってくる」ことができます。$(セレクタ)「セレクタ」という部分に、取ってきたい要素を示す文字列を入れます。しかも、CSSのセレクタとほとんど一緒！楽チン！ステキ！

１−１−２セレクタの記法セレクタには以下のようなものがありますIDセレクタ―――――――― #idValueタイプセレクタ―――――― elementクラスセレクタ―――――― .className子孫セレクタ――――――― ancestor descendant全称セレクタ――――――― *子どもセレクタ―――――― parent > child隣接兄弟セテクタ――――― prev + next複数セレクタ――――――― selector, selector否定セレクタ――――――― :not(selector)属性セレクタ――――――― [name="value"]順番に関するセレクタ―――状態に関するセレクタ――― :nth-child()フォームに関するセレクタ― :checked :text ！！なに！？まだまだあります… えんのこるあ

１−１−３心持ちについて高度なセレクタは確かに便利ですが、全然知らなくても問題ないです。例えばCSSの:first-child擬似クラスul li:first-child { color: red; }初めの要素を選ぶことができる便利なものですが、IE６では使えません。。。

１−１−３心持ちについてそこで、以下のように実現しますよね？[html] [css]<ul> ul li.first { color: red; } <li class="first">にんじん</li> <li>玉ねぎ</li> <li>きゅうり</li></ul>JavaScriptも同じで、自分が分かる方法で実現すれば問題ないです！取ってきたい要素にidやclassを付けて取ってくるだけでオッケ〜!!───Ｏ（≧∇≦）Ｏ────♪ｳﾌﾌ☆

１−１−４IDセレクタIDセレクタを使うと、指定した文字列をid属性に持つ要素を取得できます。下のような感じで要素を取ってくることができます$(#div1)HTML要素にid属性を付けるだけで、ピンポイントで欲しい要素を取得できますが、id属性はページの中に2つ以上存在してはいけないため、2つ以上の要素に何かしようとしたら、別々にidを振っていく必要があります。

１−１−５クラスセレクタ複数の要素をまとめて取得したい時に使うのがクラスセレクタです。書き方は以下のとおりです。$(.div1)非常に利用頻度の高いセレクタです。２つ以上の要素に何かしたかったら、取得したい要素にclass属性を指定して、クラスセレクタを使うと考えていいです。

１−１−６タイプセレクタ指定した要素名の要素をすべて取ってくることができます。書き方は以下のようになります。$(div)実際には、後述の子孫セレクタや更に探す機能と組み合わせて使っていくことが多いです。また、html要素やbody要素などページに一つしか存在しないのでタイプセレクタで取ってくるのが便利です。

１−１−７組み合わせる複数のセレクタを組み合わせると、要素を絞り込んで取得することが出来るようになります。タイプセレクタ＋IDセレクタ$(div#hoge).show();// id属性hogeのdiv要素を表示IDセレクタ＋クラスセレクタ$(#hoge.foo).show();// id属性hogeでclass属性がfooの要素を表示タイプセレクタ＋IDセレクタ＋クラスセレクタ$(div#hoge.foo).show();// id属性hogeでclass属性がfooの要素を表示

１−１−８子孫セレクタ要素の階層構造を判断して、欲しい要素を取得します。$(p strong)上記の書き方でp要素の中にあるstrong要素を取得します。「祖先（ancestor）」と「子孫（descendant）」の２つのセレクタを半角スペースでつなぎます。

1-2 取ってきたところからさらに探す

１−２−１変数に保存する取ってきたところから更に探す機能の前に変数について学びましょう。変数は自分でプログラムを書いていく中で重要な概念なので、ぜひ知っておきましょう！

１−２−１変数に保存する変数はJavaScriptがもともと備えている仕組で、プログラミングの基本的な部分になる。変数を使うと、何かを入れておいて必要なときに取り出す事ができる。

１−２−２変数の使い方以下は変数に何かを入れて取り出しているところです。var lastName = Yamada;alert ( lastName );alertはダイアログを出す命令です。alert(テキスト)と書くと、指定したテキストを表示します。

１−２−２変数の使い方[実行結果] Yamadaalertに入っているのはlastNameでした。しかし、実行結果はYamada。なぜでしょう？

１−２−２変数の使い方ポイントはvarという命令です。これは変数を定義する命令。変数は箱のようなものとイメージするとわかりやすいです。変数を定義する　＝　箱を作る

１−２−２変数の使い方以下はlastNameという名前の箱を作る命令var lastName;箱には好きなモノを入れておけます。入れ方は以下になります。lastNmae = Yamada;2つの命令をまとめて書くと以下のようになるvar lastNmae = Yamada;

１−２−２変数の使い方イメージ Yamada lastName

１−２−２変数の使い方alert ( lastName );2行目のalert(lastName)ですが、lastNameと書かれている部分は、そのまま箱のなかに入っている内容に置き換わります。なので、ダイアログに表示されるのはYamadaとなるわけです。※箱の名前自体がメッセージに出ることはありません。

１−２−２変数の使い方実は、さっきの例だと始めからalert(Yamada);と書いたほうがいいです。ただ、何回も使いまわすようなときは変数を利用したほうがいいでしょう。var lastName = Yamada;var me = lastName + Taro;var father = lastName + Ichiro;var mother = lastName + Hanako;alert ( me);alert ( father);alert ( mother);この場合、苗字を変えたい場合に、lastNameを変えるだけでOK！＋は文字列をつなげる命令。数字なら足し算になります。

１−２−３jQueryで変数を使う変数はすごく便利です。JavaScriptでは文字列だけでなく、なんでも保存ができます。では、jQueryとどう組み合わせればいいのでしょうか？ちょっと見てみます。$(#hoge).css(background,pink); 変数を使うとvar hoge =$(#hoge);hoge.css(background,pink);

１−２−３jQueryで変数を使うvar hoge =$(#hoge);// ここで変数「hoge」に、作ったjQueryオブジェクトを保存しています。hoge.css(background,pink);// そして、ここで、その変数「hoge」に「それに何かする」命令を使っています。その後も以下のように変数を介して命令をどんどん使う事ができます。hoge.css(padding,3em);hoge.css(border,1px solid #f00);hoge.fadeIn();

１−２−４そこからさらに要素を探すここでようやく「そこからさらに探す」機能のはなしです。といっても、必要最低限「find」という機能だけ覚えておけばOKです。find中にある要素を探してくる機能。詳しく言うと自分の要素の子孫が内包する要素の全ての中から、指定したセレクタにマッチしたものを探してくる機能

１−２−４findの具体的なサンプルindex.html<div id="student"> <div class="age">17</div> <div class="photo"><img src="yamada.jpg" /></div></div>scripts.js$(function() { var student = $(#student); var age = student.find(.age); var name = student.find(img); age.css(background,pink); img.css(border,1px solid red);});

１−２−４findのサンプル実行結果 17

１−２−４findのサンプル解説作ったjQueryオブジェクトを変数studentに入れ、更に続けて.findで探しています。セレクタのところで出た子孫セレクタと比べると・・・子孫セレクタ祖先と子孫を一気に指定し欲しい要素を取得する find 一度、jQueryオブジェクトを作成し、そこからさらに子孫を探す

１−２−４findのサンプル解説$(function() { var student = $(#student); // まず変数studentにIDセレクタセレクタを使ってidがstydentである要素を探し、作ったjQueryオブジェクトを保存しています var age = student.find(.age); var name = student.find(img); // その後、.find()でfindの（）の中にセレクタを入れると、studentが内包する要素の中からセレクタにマッチする要素を探して、jQueryオブジェクト化しています age.css(background,pink); img.css(border,1px solid red); // 最後に取得したageとimgに対して.css()で背景色やボーダーを変更しています。});

１−２−４ここまでのまとめ今のところ、、、「取ってきたところから、更に探すことが出来る」とだけ覚えておいて下さい。

2 それに何かする

2-1 それに何かする機能

２−１それに何かする機能「何かを取ってくる」というのは、かなり地味でしたが、ここからの「それに何かをする」機能を覚えると、具体的にjQueryをどう使っていけばいいのかがわかります。今回は以下の機能について見ていきます。1.スタイルを変更する2.アニメーションさせる3.内容や属性を変更する4.動かす・消す・新しく作る5.それぞれについて処理する

2-2 メソッド

２−２メソッド「それに何かをする」機能　↓　正確には「jQueryオブジェクトが持っている　メソッドを実行する」という言い方になります。※メソッド・・・「準備された機能」のこと

２−２メソッド信号機をイメージしてみてください。信号機には赤、青、黄色のライトがついていて、これらが切り替わります。これらの信号機は「青にする」「赤にする」「黄色にする」という3つのメソッドを持っていると言えます。javascriptっぽく書くと次のような感じ信号機.青にする();↓jQueryオブジェクト.メソッド名();

２−２ここまでのまとめ（メソッド）「何かを取ってくる」→「それに何かをする」　↓　正確に言うと「jQueryオブジェクトを作る」→「そのメソッドを実行する」

2-3 スタイルを変更する

２−３スタイルを変更する普段はスタイルシートで当てていますが、JavaScriptでも操作することができます。今回見ていくのは下の5つです。1. css2. show3. hide4. width5. height

２−３−１css書き方はこうです。jQueryObject.css(プロパティ名,値);※jQueryObjectの部分には$(#dev1)などが入ります。※値の部分が文字の場合シングルコーテーション()かダブルコーテーション(")で囲まないといけません。数字はそのままで問題なし例） index.html scripts.js <div id="div1">dev1</div> $(function() { <div id="div2">dev2</div> $(#div1).css(border,3px solid red); <div id="div3">dev3</div> $(#div2).css(background,pink); $(#div3).css(opacity,0.5); });

２−３−１cssまとめてスタイルを指定するときはこう $(#dev1).css({ color: red, display: block, top: 120px, left: 100 });css()の()の中を{}でくくって、プロパティと値のペアを複数、,で区切って入れます。※ちなみに、{}で囲まれたもののことをオブジェクトといいます。

２−３−２show/hide要素の表示、非表示を変更するためのメソッドです。 jQueryObject.show(); // 表示 jQueryObject.hide(); //非表示例） $(function() { $(#dev1).show(); $(#dev2).hide(); });

２−３−３width/height要素の幅と高さを指定するメソッドです。 jQueryObject.width(幅); // 表示 jQueryObject.height(高さ); //非表示幅、高さには設定したい長さをピクセル数で指定します。以下のような感じです。 $(function() { $(#dev1).width(300); $(#dev2).height(300); $(#dev3).width(3em); //文字混じりの時は「」で囲む $(#dev4).height(auto); //文字混じりの時は「」で囲む });

2-4 アニメーションさせる

２−４アニメーションさせるFlashのようなアニメーションをプラグインを入れなくても使えます。1. fadeIn/fadeOut2. slideDown/slideUp3. animate

２−４−１fadeIn/fadeOutこのメソッドを実行するとその名の通り、フェードインアニメーション、フェードアウトアニメーションが起こります。 jQueryObject.fadeIn(); jQueryObject.fadeOut();次のように書くとスピードを変えられる！ jQueryObject.fadeIn(1000); //単位はミリ秒 jQueryObject.fadeIn(slow); jQueryObject.fadeIn(fast);

２−４−２slideDown/slideUpスライドアニメーションを起こすメソッドです。 slideDown パネルパネル閉じた状態パネル高さ０ slideUp 開いた状態 jQueryObject.slideDown(); jQueryObject.slideUp();※ fadeIn/fadeOutと同様にスピード調節可能！

２−４−３animate始めの４つ以外のアニメーションを作ることができます。必ず、CSSプロパティ名と値を指定します。指定したスタイルが適用されるまでの経過がアニメーションになります。 jQueryObject.animate({ プロパティ名：値 });例) 複数指定することもできます。（使えるCSSプロパティは数値を値にするもののみ） $(#div1).animate({ top: 200, left: 400 }, 1000); // スピードも指定できます

2-5 内容や属性を変更する

２−５内容や属性を変更するやや地味ですが、要素の内容や属性を変更するメソッドについて見ていきます。1. text/html2. empty3. attr4. val5. addClass/removeClass

２−５−１text/html要素の内容をまるごと書き換えるメソッド jQueryObject.text(書き換え後のテキスト); jQueryObject.html(書き換え後のHTML);問題）さて、各div要素はどうなるでしょうか？　　　回答は次のスライド <body> $(function() { <div id="div1">div1</div> $(#div1).text( 書き換えた内容 ) ; <div id="div2">div2</div> $(#div2).html( 書き換えた内容 ) ; <div id="div3">div3</div> $(#div3).text( <strong>書き換えた</strong>内容 ) ; <div id="div4">div4</div> $(#div4).html( <strong>書き換えた</strong>内容 ) ; }); </body>

２−５−１text/html 書き換えた内容書き換えた内容 <strong>書き換えた</strong>内容書き換えた内容

２−５−２empty要素の中身を空っぽにするメソッドです。 jQueryObject.empty();例） <body> $(function() { <div id="div1">div1</div> $(#div1).empty(); </body> }); div1 { border: 1px solid #000; padding: 20px; }

２−５−２empty実行結果中身のテキストは消えましたが、スタイルシートは残っています。

２−５−３attr要素の属性値を変更するメソッドです。 jQueryObject.attr(属性名,変更後の値);attrを使うと様々なことができます。a要素のhrefを書き換えてダイナミックにリンク先を操作できますし、imgのsrcを変えれば画像も切り替えることができます。

２−５−３attr例） <body> <img src="img1.gif" alt="" id="changeThis" /> </body> $(function() { $(#changeThis).attr(src,img2.gif); }); imgのsrcの内容が書き換わって、img1.gifを呼び出していたものが、img2.gifを呼び出すように変更されました。

２−５−３attrattrの他の使い方● 要素のclass属性を変更し、見栄えの制御を行う● input要素のdisabled属性を変更し、コントロールの制御を行う● option要素のselected属性を変更し、select要素の中で選択されている項目を変更する● a要素のhrefを変更しリンク先を書き換える● a要素のtarget属性を変更し、別ウィンドウで開くなど制御● スタイルシートを読み込んでいるlinkのhrefを変更して別のスタイルシートに切り替えるただ単に属性を変える事が出来るだけですが、超重要な機能です！

２−５−４valinputやtextareaに入力された値を変更する事のできるメソッド。attrと似ていますが、属性valueの値を手軽に変えるために用意されたショートカットのようなものです。 jQueryObject.val(変更後の値);

２−５−４val例） <input id="input1" type="text" value="ああああああ" > <textarea id="textarea1" row="3" cols="20">いいいいいい </textarea> <select id="select1"> <option value="saitama">埼玉</option> <option value="tokyo">東京</option> </select> <select id="select2" multiple="multiple"> <option value="sinjyukuku">新宿区</option> <option value="sibuyaku">渋谷区</option> <option value="chiyodaku">千代田区</option> </select> $(function() { $(#input1).val(書き換えました1) ; テキストフィールドの値を変える $(#textarea1).val(書き換えました2) ; テキストエリアの値を変える $(#select1).val(tokyo); セレクトメニュー（プルダウン）の値を変えるセレクトメニュー（リスト）の値を変える $(#select2).val([shibuyaku,chiyodaku]); });

２−５−４ val 実行結果）書き換えました1 textareaにはvalue属性値などないので、中身のテ書き換えました2 キストをvalを使って変更しています。属性値を変えるという視点からするとおかしい用に思えますね。東京新宿区渋谷区 multiple属性が指定されたselect要素内で、項目の選択を行なっています。千代田区この場合は２つ指定しているため、渋谷区と千代田指定したvalue属性値を持つ項区がハイライトされます。目を選択状態にします。

２−５−５addClass/removeClass要素のclass属性値を操作するためのメソッドです。 jQueryObject.addClassal(クラス名); jQueryObject.removeClassal(クラス名);その名の通りaddは追加、removeは削除です。

２−５−５addClass/removeClass問題）実行後のdiv1〜4のclass属性値はどうなるでしょうか？ <body> <div id="div1">div1</div> <div id="div2" class="box">div2</div> <div id="div3" class="box">div3</div> <div id="div4" class="box alert">div4</div> </body> $(function() { $(#div1).addClass(box); $(#div2).removeClass(box); $(#div3).addClass(alert); $(#div4).removeClass(alert); });

２−５−５ addClass/removeClass答え）<body> <div id="div1" class="box">div1</div> <div id="div2" class>div2</div> <div id="div3" class="box alert">div3</div> <div id="div4" class="box">div4</div></body>対象処理前のclass 処理処理後の class<div id="div1">div1</div> 指定なし addClass(box) box<div id="div2" class="box">div2</div> box removeClass(box) 指定なし<div id="div3" class="box">div3</div> box addClass(alert) box alert<div id="div4" class="box alert">div4</div> box alert removeClass(alert) box

２−５−６ここまでのまとめ1. 要素の中身をまるごと別のテキストに変えたい時は.text(変えたいテキスト)2. 要素の中身をまるごと別のHTMLに変えたい時は .html(変えたい内容のHTML)3. 要素の中身をカラにしたい時は.empty()4. 要素の属性値を変えたいなら.attr(属性値,新しい値)5. フォームのコントロールの値を変えたいなら .val(新しい値)6. クラスをつけたり外したり .addClass(クラス名)、.removeClass(クラス名)

おすすめ書籍紹介「WebデザイナーのためのjQuery入門」価格 3,024円

ご清聴ありがとうございました。

http://tweetedtimes.com	10
http://us-w1.rockmelt.com	7
http://nodeslide.herokuapp.com	1
https://twitter.com	1
http://purecrest.blogspot.jp	1

Webデザイナーのためのjquery入門2（前編）

by Yusaku Mochizuki on May 25, 2012

Accessibility

Tags

Upload Details

Usage Rights

5 Embeds 20

Statistics

Webデザイナーのためのjquery入門2（前編） — Presentation Transcript