2014-12-26
2014-12-26
アニメーション効果
非表示の状態の要素を表示する
- show()
- アニメーションのスピードは「slow」「fast」のいずれか、またはミリ秒(1秒=1000ミリ秒)で指定します
- スピードの指定を省略すると、show()はアニメーションの処理をせずに、非表示の要素を即座に表示します
《例》
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>show()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('button').click(function(){ $('div').show('slow'); }); }); </script> <style> div { width: 300px; height: 300px; background: skyblue; display: none; } </style> </head> <body> <p><button>表示</button></p> <div></div> </body> </html>
- 「表示」と書かれたボタンがクリックされると、CSSで display: none に設定されているdiv要素を左上から右下へ少しずつ拡大しながら表示します
show()にコールバック関数を設定する
- show()は、スピードの後ろにカンマ区切りで「コールバック関数」を設定できます
- コールバック関数とは、アニメーション処理が完了した後に続けて実行される命令です
- 「処理が終わったら、この関数を呼び出して」と指定する
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>show()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> div { width: 300px; height: 300px; background: pink; display: none; } </style> <script> $(function(){ $('button').click(function(){ $('div').show('slow', function(){ $(this).css('background', 'skyblue'); }); }); }); </script> </head> <body> <p><button>表示</button></p> <div></div> </body> </html>
表示中の状態の要素を非表示する
- hide()
- show()の逆の動きをする命令です
- HTMLの表示状態 display:block を、display:none に変更します
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>hide()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> div { width: 300px; height: 300px; background: skyblue; display: none; } </style> <script> $(function(){ $('button#show').click(function(){ $('div').show('slow'); }); $('button#hide').click(function(){ $('div').hide('slow'); }); }); </script> </head> <body> <p><buttonid="show">表示</button></p> <p><buttonid="hide">非表示</button></p> <div></div> </body> </html>
この例の場合、「表示」「非表示」のボタンを何度もクリックするとその回数分待たなければいけません。
この問題を解決するのが、アニメーション処理中の要素を選択できるセレクター「:animated」
- 「:not()」と組み合わせて「:not(:animated)」と記述すると「アニメーション処理中ではない要素」を絞り込めます
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>hide()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> div { width: 300px; height: 300px; background: skyblue; display: none; } </style> <script> $(function(){ $('button#show').click(function(){ $('div:not(:animated)').show('slow'); }); $('button#hide').click(function(){ $('div:not(:animated)').hide('slow'); }); }); </script> </head> <body> <p><buttonid="show">表示</button></p> <p><buttonid="hide">非表示</button></p> <div></div> </body> </html>
要素の表示・非表示を交互に切り換える
- toggle()
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>toggle()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> div { width: 300px; height: 300px; background: skyblue; display: none; } </style> <script> $(function(){ $('button').click(function(){ $('div:not(:animated)').toggle('slow'); }); }); </script> </head> <body> <p><button>表示・非表示</button></p> <div></div> </body> </html>
表示・非表示をスライドで切り換える
- slideDown() / slideUp()
開閉パネル
- dd要素のdisplayプロパティの値が「block」の場合でも、アニメーション処理中の可能性があるため、セレクターに「:not(:animated)」を追加し、アニメーション中ではない場合にのみ slideUp()を実行します
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>toggle()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> div { width: 300px; margin: 50px auto; } dt{ background: #7CADB6; padding: 10px; cursor: pointer; } dd{ border: 1px solid #7CADB6; height: 250px; margin: 0; } </style> <script> $(function(){ $('dt').click(function(){ if($('dd').css('display') == 'block'){ $('dd:not(:animated)').slideUp('slow'); }else{ $('dd').slideDown('slow'); } }); }); </script> </head> <body> <dl> <dt>スライドして表示状態を切り替える</dt> <dd> slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。 </dd> </dl> </body> </html>
表示・非表示をスライドで交互に切り換える
- slideToggle()
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>slideToggle()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> div { width: 300px; margin: 50px auto; } dt{ background: #7CADB6; cursor: pointer; padding: 10px; } dd{ border: 1px solid #7CADB6; height: 250px; margin: 0; } </style> <script> $(function(){ $("dt").click(function(){ $("dd:not(:animated)").slideToggle("slow"); }); }); </script> </head> <body> <dl> <dt>スライドして表示状態を切り替える</dt> <dd> slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。 </dd> </dl> </body> </html>
表示状態をフェードイン・フェードアウトで切り換える
- fadeIn() / fedeOut()
- フェードイン・フェードアウトしながらHTML要素の表示・非表示を切り替える命令
- 透明度(CSSのopacityプロパティ)の値を徐々に変更することで、フェード効果を実現しています
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>fadeIn() / fadeOut()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> img { display:none; } </style> <script> $(function(){ $('button#fadeIn').click(function(){ $('img:not(:animated)').fadeIn('slow'); }); $('button#fadeOut').click(function(){ $('img:not(:animated)').fadeOut('slow'); }); }); </script> </head> <body> <p><buttonid="fadeIn">表示</button></p> <p><buttonid="fadeOut">非表示</button></p> <p><imgsrc="flower.png"alt="flower"></p> </body> </html>
透明度を徐々に変更する
- fadeTo()
- 透明度(CSSのopacityプロパティ)の値を徐々に変更することで、フェード効果を実現しています
- 透明度は、0(非表示)~1(表示)の数値で指定できます
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>fadeTo()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('button#fade100').click(function(){ $('img:not(:animated)').fadeTo('slow', 1); }); $('button#fade50').click(function(){ $('img:not(:animated)').fadeTo('slow', 0.5); }); $('button#fade0').click(function(){ $('img:not(:animated)').fadeTo('slow', 0); }); }); </script> </head> <body> <p> <buttonid="fade100">表示</button> <buttonid="fade50">半透明</button> <buttonid="fade0">非表示</button> </p> <p><imgsrc="flower.jpg"alt="flower"></p> </body> </html>
独自のアニメーションを設定できる
- animate()
- 任意のCSSプロパティの値を徐々に変化させて独自のアニメーション効果を作成できる命令
- animate()に設定できるCSSプロパティは、height、top、opacityのように数値であらわせるもに限ります
- 動きには「linear」「swing」を設定できます
- linear は、常に一定の速度で、swingは、最初ゆっくり・後半は速い速度で変化をつけながら値を変更します
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>fadeIn() / fadeOut()</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> p { width:800px; height:267px; margin:0; } div { width:400px; height:267px; overflow:hidden; } </style> <script> $(function(){ $('#flower').click(function(){ $('p:not(:animated)').animate({ marginLeft : '-400px' },'slow', 'swing'); }); $('#building').click(function(){ $('p:not(:animated)').animate({ marginLeft : '0' }, 'slow', 'swing'); }); }); </script> </head> <body> <div> <p><imgsrc="flower.png"alt="flower"id="flower"><imgsrc="building.png"alt="building"id="building"></p> </div> </body> </html>
命令 | 意味 |
---|---|
show() | 要素を徐々に表示する |
hide() | 要素を徐々に非表示にする |
toggle() | 要素の表示・非表示を徐々に切り替える |
slideDown() | 要素をスライドアニメーションで表示する |
slideUp() | 要素をスライドアニメーションで非表示にする |
slideToggle() | 要素の表示・非表示をスライドアニメーションで切り替える |
fadeIn() | 要素をフェードインで表示する |
fadeOut() | 要素をフェードアウトで非表示にする |
fadeTo() | 要素の透明度を指定した値に徐々に変更する |
animate() | 任意のCSSプロパティの値を徐々に変更する |
2014-12-25
2014-12-25
メソッドとイベント演習問題
複数プロパティ指定
- 以下のように表示するようjQueryを記述しなさい
<body> <ul> <li>HTML</li> <li>CSS</li> <liid="third">jQuery</li> <li>PHP</li> </ul> </body>
要素の追加
- 以下のように表示するようjQueryを記述しなさい
<body> <olid="list"> <li>HTML</li> <li>CSS</li> <li>PHP</li> </ol> </body>
- ol要素を、id名「wrapper」でdiv要素で囲みなさい
<body> <olid="list"> <li>HTML</li> <li>CSS</li> <li>PHP</li> <li>jQuery</li> </ol> </body>
clickイベント
- ある要素がクリックされたら、「クリックされました」と警告ボックスに表示させるjQueryを記述しなさい
- 以下の写真を使いjQueryで記述しなさい
- テキストリンクをクリックする画像が換わる
<body> <pid="photo"> <imgsrc="img/natsu.png"alt="夏の風景"> </p> <p> <aid="trigger"href="img/surf.png"title="サーフィン">このテキストリンクをクリックするとサーフィンの写真に置き換わる</a> </p> </body>
- 画像をクリックする画像が換わる
<body> <pid="photo"> <aid="trigger"href="img/surf.png"title="サーフィン"><imgsrc="img/natsu.png"alt="夏の風景"></a> </p> </body>
- 画像にマウスカーソルが乗ると画像が換わり、離れるともとの画像に戻る
<body> <pid="photo"> <aid="trigger"href="img/surf.png"title="サーフィン"><imgsrc="img/natsu.png"alt="夏の風景"></a> </p> </body>
2014-12-24
2014-12-24
イベント
イベントでタイミングを設定
- 意図したタイミングで処理を実行する
HTMLが読み込まれたタイミングで実行する
- ready()イベント
<script> $(document).ready(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); </script>
の短縮形が以下の記述。
<script> $(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); </script>
他のイベント処理でも、ready()イベントは必須
<script> $(function(){ $('button').click(function(){ //HTMLが読み込まれたときに、実行する処理を記述 }); }); </script>
click()イベント
- 特定の要素がクリックされたときに、何らかの処理を実行する命令
click()の記述
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>click()イベント</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('button').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); }); }); </script> <style> button { cursor: pointer; } </style> </head> <body> <p><button>画像を変更</button></p> <p><imgsrc="flower.png"alt="花"></p> </body> </html>
《変更後》
a要素に設定したclickイベントの処理
- リンクとして実行されてしまう
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>a要素に設定したclickイベントの処理</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); }); }); </script> </head> <body> <p><ahref="sea.png">画像を変更</a></p> <p><imgsrc="flower.png"alt="花"></p> </body> </html>
javascript:void(0)を使う
- JavaScriptがオフの場合は機能しません
<body> <p><ahref="javascript:void(0)">画像を変更</a></p> <p><imgsrc="flower.png"alt="花"></p> </body>
return false; を追加
- JavaScriptがオフの場合も、リンクは機能します
<script> $(function(){ $('a').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); returnfalse; }); }); </script> </head> <body> <p><ahref="sea.png">画像を変更</a></p> <p><imgsrc="flower.png"alt="花"></p> </body>
イベントが発生した要素を取得する
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>イベントが発生した要素を取得する</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a:eq(0)').click(function(){ $('img').attr('src', 'flower.png').attr('alt', '花'); returnfalse; }); $('a:eq(1)').click(function(){ $('img').attr('src', 'sea.png').attr('alt', '海'); returnfalse; }); $('a:eq(2)').click(function(){ $('img').attr('src', 'Jellyfish.png').attr('alt', 'くらげ'); returnfalse; }); $('a:eq(3)').click(function(){ $('img').attr('src', 'Building.png').attr('alt', '建物'); returnfalse; }); }); </script> </head> <body> <ul> <li><ahref="flower.png">花</a></li> <li><ahref="sea.png">海</a></li> <li><ahref="Jellyfish.png">くらげ</a></li> <li><ahref="Building.png">建物</a></li> </ul> <p><imgsrc="flower.png"alt="花"></p> </body> </html>
画像を変更する機能は実装できました。
$(this)
- イベントが発生した要素を取得するセレクター
- イベントを設定しているclick(function(){…})内で$(this)と書くと、イベントが発生した要素を取得できます
<script> $(function(){ $('a ').click(function(){ $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text()); returnfalse; }); }); </script>
mousedown()/mouseup()イベント
mousedown()
- mousedown()は、特定の要素上にマウスのカーソルがある状態で、マウスのボタンが押されたときに処理を実行します
<script> $(function(){ $('a').mousedown(function(){ $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text()); }).click(function(){ returnfalse; }); }); </script>
この例の場合、a要素の上にマウスカーソルがある状態でマウスのボタンが押されたら、img要素のsrc属性とalt属性を書き換えます。
mouseup()
- mouseup()は、特定の要素上にマウスのカーソルがある状態で、すでに押されているマウスのボタンが離れたタイミングで処理を実行します
<script> $(function(){ $('a').mouseup(function(){ $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text()); }).click(function(){ returnfalse; }); }); </script>
この例の場合、a要素の上にマウスカーソルがある状態ですでに押されているマウスのボタンが離れたら、img要素のsrc属性とalt属性を書き換えます。
mouseover()/mouseout()イベント
- 特定の要素上にマウスが重なったタイミングを感知して、処理を実行します
- ボタンのマウスオーバー効果などに利用されます
mouseover()
- 特定の要素上にマウスカーソルが重なったときに、処理を実行します
mouseout()
- 特定の要素上にマウスカーソルが外れたときに、処理を実行します
<script> $(function(){ $('img').mouseover(function(){ $(this).attr('src', 'sea.png').attr('alt', '海'); }).mouseout(function(){ $(this).attr('src', 'flower.jpg').attr('alt', '花'); }); }); </script> </head> <body> <imgsrc="flower.png"alt="花"> </body>
toggle
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>クリックする度に画像が換わる</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> </head> <body> <divid="container"> <pid="imgChange"><imgsrc="img/surf01.png"></p> </div> <script> $(function(){ $('#imgChange').toggle(function(){ $('img').attr('src','img/surf02.png'); },function(){ $('img').attr('src','img/surf03.png'); },function(){ $('img').attr('src','img/surf04.png'); }); }); </script> </body> </html>
2014-12-23
2014-12-23
HTML/CSSを操作する
HTML/CSSを操作するjQueryの命令
- どのHTMLの要素を操作するか指定する(セレクター)
- 操作する内容(命令)
jQueryの命令
- テキストの変更と取得
- HTMLの変更と取得
- HTMLの挿入
- HTMLの移動
- 他の要素で包む
- 親要素を取り除く
- 要素の置き換え
- 要素の削除
- 属性値の変更の取得
- class属性の追加と削除
- CSSの制御
記述
<script> $(document).ready(function(){ //この中に処理を記述 }); </script>
を、以下の短縮形で記述します。
<script> $(function(){ //この中に処理を記述 }); </script>
テキストの変更と取得
- text()メソッドで命令
テキストの変更
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:テキストの変更</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $("p#first").text('変更後'); }); </script> </head> <body> <pid="first">変更前</p> </body> </html>
テキストの取得
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:テキストの取得</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p#second').text($('p#first').text()); }); </script> </head> <body> <pid="first">取得する文字列</p> <pid="second">変更前</p> </body> </html>
HTMLの変更と取得
- html()メソッドで命令
HTMLの変更
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTMLの変更</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p#first').html('<strong>変更後</strong>'); }); </script> </head> <body> <pid="first">変更前</p> </body> </html>
HTMLの取得
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTMLの取得</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p#second').html($('p#first').html()); }); </script> </head> <body> <pid="first"><strong>変更後</strong></p> <pid="second">変更前</p> </body> </html>
HTMLの挿入
- prepend()、append()、befor()、after()メソッドで命令
HTML要素内の先頭に挿入
- prepend()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の先頭に挿入</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p#first').prepend('<strong>先頭に挿入</strong>'); }); </script> </head> <body> <pid="first">テキストテキスト</p> </body> </html>
HTML要素内の最後に挿入
- append()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の最後に挿入</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p#first').append('<strong>最後に挿入</strong>'); }); </script> </head> <body> <pid="first">テキストテキスト</p> </body> </html>
HTML要素内の前に挿入
- before()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の前に挿入</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $ ('p#first').before('<h1>前に挿入</h1>'); }); </script> </head> <body> <pid="first">テキストテキスト</p> </body> </html>
HTML要素内の後ろに挿入
- after()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の後ろに挿入</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $ ('p#first').after('<h1>前に挿入</h1>'); }); </script> </head> <body> <pid="first">テキストテキスト</p> </body> </html>
HTMLの移動
- HTMLの要素を文書内に新たに追加するのではなく、もともと存在していた要素の文書内の位置を変更する
HTML要素内の先頭に移動
- prependTo()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の先頭に移動</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('strong').prependTo('p'); }); </script> </head> <body> <pid="first">テキストテキスト</p> <strong>先頭に移動</strong> </body> </html>
HTML要素内の最後に移動
- appendTo()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の最後に移動</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('strong').appendTo('p'); }); </script> </head> <body> <pid="first">テキストテキスト</p> <strong>最後に移動</strong> </body> </html>
HTML要素内の前に移動
- insertBefore()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の前に移動</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('h1').insertBefore('p'); }); </script> </head> <body> <p>テキストテキスト</p> <h1>前に移動</h1> </body> </html>
HTML要素内の後ろに移動
- insertAfter()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:HTML要素内の後ろに移動</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('h1').insertAfter('p'); }); </script> </head> <body> <h1>後ろに移動</h1> <p>テキストテキスト</p> </body> </html>
他の要素で包む
- 指定した要素を追加するのではなく、特定の要素で包む
各要素を指定した要素で包む
- wrap()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:各要素を指定した要素で包む</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('strong').wrap('<h2></h2>'); }); </script> </head> <body> <strong>テキストテキスト</strong> <strong>テキストテキスト</strong> </body> </html>
全要素を別の要素で包む
- wrapAll()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:全要素を別の要素で包む</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('strong').wrapAll('<h2></h2>'); }); </script> </head> <body> <strong>テキストテキスト</strong> <strong>テキストテキスト</strong> </body> </html>
指定した要素の子要素を別の要素で包む
- wrapInner()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:指定した要素の子要素を別の要素で包む</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p').wrapInner('<strong></strong>'); }); </script> </head> <body> <p>テキストテキスト</p> <p>テキストテキスト</p> </body> </html>
親要素を取り除く
- 指定した要素の親要素を取り除く
- unwrap()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:親要素を取り除く</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('strong').unwrap(); }); </script> </head> <body> <h1><strong>テキストテキスト</strong></h1> </body> </html>
要素の置き換え
- 指定した要素を他の要素に置き換える
- replaceWith()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:要素の置き換え</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p').replaceWith('<h1>置き換え後</h1>'); }); </script> </head> <body> <p>置き換え前</p> </body> </html>
要素の削除
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:要素の削除</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p strong').remove(); }); </script> </head> <body> <p><strong>削除する要素</strong>テキストテキストテキスト</p> </body> </html>
属性値の変更と取得
属性値の変更
- attr()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:属性値の変更</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a').attr('href', 'http://google.co.jp/'); }); </script> </head> <body> <p><ahref="http://yahoo.co.jp/">リンク先</a></p> </body> </html>
属性値の取得
- attr()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:属性値の取得</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a').text( $('a').attr('href')); }); </script> </head> <body> <p><ahref="http://google.co.jp/">リンク先</a></p> </body> </html>
属性値の削除
- removeAttr()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:属性値の削除</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('a').removeAttr('target'); }); </script> </head> <body> <p><ahref="http://google.co.jp/"target="_blank">リンク先</a></p> </body> </html>
class属性値の追加と削除
class属性値の追加
- addClass()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:class属性値の追加</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> .red { color:red; } </style> <script> $(function(){ $('p').addClass('red'); }); </script> </head> <body> <p>テキストテキストテキストテキストテキスト</p> </body> </html>
class属性値の削除
- removeClass()メソッド
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:class属性値の削除</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <style> .red { color:red; } </style> <script> $(function(){ $('p').removeClass('red'); }); </script> </head> <body> <pclass="red">テキストテキストテキストテキストテキスト</p> </body> </html>
CSSの制御
CSSプロパティの設定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:CSSプロパティの設定</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $ ('p').css('color', 'red'); }); </script> </head> <body> <p>テキストテキストテキストテキストテキスト</p> </body> </html>
《一括して設定する場合》
<script> $(function(){ $('p').css({ backgroundColor: 'skyblue', fontWeight: 'bold', color: 'yellow' }); }); </script>
CSSプロパティの値の取得
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド:CSSプロパティの値の取得</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $('p').text( $('p').css('color')); }); </script> </head> <body> <p>テキストテキストテキストテキストテキスト</p> </body> </html>
メソッドチェーン
- 命令と命令を、ドットでつなげて記述する
- 1つのセレクターに対して、2つ以上の命令を連続して実行する
2014-12-22
2014-12-22
if文を使った反転
反転の考え方
(1)右に移動
- 右端までは移動速度が代入され続け、右に移動します
onClipEvent (load) { var speed:Number = 10; //移動速度 } onClipEvent (enterFrame) { _x += speed; }
(2)ステージの右端まで移動
- 右端のX座標を指定
- 右端のX座標を上回ったら(条件)
onClipEvent (load) { var speed:Number = 10; //移動速度 var rightEdge:Number = 500; //右端の座標 } onClipEvent (enterFrame) { _x += speed; if (_x > rightEdge) { } }
(3)ステージの右端まで移動したら~をする
- 右端のX座標を上回ったら、マイナス値を代入
onClipEvent (load) { var speed:Number = 10; //移動速度 var rightEdge:Number = 500; //右端の座標 } onClipEvent (enterFrame) { _x += speed; if (_x > rightEdge) { _x -= speed; } }
この時点でのプレビューは、反転しません。
条件式が正しい記述ではないからです。
(4)条件式を整える
onClipEvent (load) { var speed:Number = 10; //移動速度 var rightEdge:Number = 500; //右端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge) { _x -= speed; } else { _x += speed; } }
しかし、この記述でも戻ってきません。
X座標に代入する式を変えるだけでは、再生ヘッドが読まれた瞬間に「右に移動し左に移動」を繰り返してしまいます。
連続的に左に移動させるには、代入する値を「マイナス」になるように書き換えます。
(5)条件式を整える
onClipEvent (load) { var speed:Number = 10; //移動速度 var rightEdge:Number = 500; //右端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge) { speed *= -1; } _x += speed; }
これで反転はされましたが、左端でもそのまま移動してしまいます。
(6)左端の条件式も加える
onClipEvent (load) { var speed:Number = 10; //移動速度 var rightEdge:Number = 500; //右端の座標 var leftEdge:Number = 0; //左端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge) { speed *= -1; } if (_x < leftEdge) { speed *= -1; } _x += speed; }
(7)論理和で条件式を整える
onClipEvent (load) { var speed:Number = 10; //移動速度 var rightEdge:Number = 500; //右端の座標 var leftEdge:Number = 0; //左端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge || _x < leftEdge) { speed *= -1; } _x += speed; }
理論演算子
演算子 | 処理内容 | オペランド数 |
---|---|---|
! | 否定 (NOT) | 単項 |
&& | 論理積 (AND) | 二項 |
|| | 論理和 (OR) | 二項 |
否定(NOT)
- 否定(NOT)はオペランドのブール値を反転する論理演算です。
- ブールは true また flase の2値で表されるデータ型です。
論理積 (AND)
論理和 (OR)
【練習3】
Gadgets powered by Google |
onClipEvent (load) { var speedX:Number = 10; //X座標移動速度 var speedY:Number = 10; //Y座標移動速度 var leftEdge:Number = 0; //左端の座標 var rightEdge:Number = 500; //右端の座標 var topEdge:Number = 0; //上端の座標 var bottomEdge:Number = 300; //下端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge - _width/2 || _x < leftEdge + _width/2) { speedX *= -1; } _x += speedX; if (_y > bottomEdge - _height/2 || _y < topEdge + _height/2) { speedY *= -1; } _y += speedY; }
Gadgets powered by Google |
左右の向きを反転
onClipEvent (load) { var speedX:Number = 6; //X座標移動速度 var speedY:Number = 6; //Y座標移動速度 var leftEdge:Number = 0; //左端の座標 var rightEdge:Number = 502; //右端の座標 var topEdge:Number = 0; //上端の座標 var bottomEdge:Number = 300; //下端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge - _width/2 || _x < leftEdge + _width/2) { speedX *= -1; _xscale *= -1; } _x += speedX; if (_y > bottomEdge - _height/2 || _y < topEdge + _height/2) { speedY *= -1; } _y += speedY; }
2014-12-21
2014-12-21
if分を使って条件分岐
if分を使って条件分岐
【F01】
Gadgets powered by Google |
「ムービークリップの幅」を「100」に変更する。
onClipEvent (load) { var speed:Number = 10; //移動速度 var leftEdge:Number = 0; //左端の座標 var rightEdge:Number = 550; //右端の座標 } onClipEvent (enterFrame) { this._x += speed; if ( this._x >= rightEdge) { this._x = leftEdge-this._width/2; } }
【B02】
左端から右端に移動して、そこで反転するムービーを作りなさい。
以下の記述では、端で反転しません。
反転するような記述に書き直しなさい。
Gadgets powered by Google |
onClipEvent (load) { var speed:Number = 10; //移動速度 var leftEdge:Number = 0; //左端の座標 var rightEdge:Number = 550; //右端の座標 } onClipEvent (enterFrame) { if (_x > rightEdge) { _x -= speed; } else { _x += speed; } }
Gadgets powered by Google |
この記述ができたら、はみ出してしまう部分を内側で反転するように記述しなさい。
onClipEvent (load) { var speed:Number = 10; //移動速度 var leftEdge:Number = 0; //左端の座標 var rightEdge:Number = 550; //右端の座標 } onClipEvent (enterFrame) { if (this._x > rightEdge || this._x < leftEdge) { speed *= -1; } this._x += speed; }
この時点では、ムービークリップの半分がはみ出てから反転します。
その差分を考慮して記述します。
onClipEvent (load) { var speed:Number = 10; //移動速度 var leftEdge:Number = 0; //左端の座標 var rightEdge:Number = 550; //右端の座標 } onClipEvent (enterFrame) { if (this._x > rightEdge - this._width/2 || this._x < leftEdge + this._width/2) { speed *= -1; } this._x += speed; }
※スタート位置が端から離れていないと(ステージの中央に配置しておくこと)、動きません。
Gadgets powered by Google |
2014-12-20
2014-12-20
条件分岐
条件を見つける
Gadgets powered by Google |
- 連続的にムービークリップを右に移動する
- 右端まできたら左端に移動する
条件:右端まできたら
処理:左端に移動する
if文
- ユーザーが入力したパスワードが正しかったらこの処理をさせ、間違っていたらこの処理をさせたいなど、ある判定の結果によって処理を枝分かれを作るときに「if」を使います。
if(判定したいこと) { 判定結果が正しいときにやりたい処理; 判定結果が正しいときにやりたい処理2; … }
ifの基本ルール
var a:Number = 5; if( a < 10 ) { trace( "aは10より小さい" ); }
- 数値型の変数 a を宣言し、初期値として 5 を入れる
- a が10より小さいとき、「{}」で囲まれたところが実行される
- 結果を出力パネルに表示する
ifの処理の流れ
もちろん、実際にこの文を使う場合、判定の結果はtrace文ではなく、もっと具体的な演出になります。
さまざまな条件
a < 10 a が10より小さい a > 10 a が10より大きい a <= 10 a が10以下(10も含む) a >= 10 a が10以上(10も含む) a == 10 a が10と一致 a != 10 a が10ではない
この中で特に間違えやすいのは「==」という記号です。
等しいかどうか調べるときには必ず2つ必要です。
if( password != "abc123" ) { trace( "パスワードが間違っています。" ); }
else
条件が成立しない場合に何かを実行したいときに、「そうではないとき」という処理を実行します。
var a:Number = 15; if( a < 10 ) { trace( "a は10より小さい" ); } else { trace( "a は10より小さくはない" ); }
else if
if と else を使えば、条件が成立するときの処理も、成立しないときの処理も書けるので充分のように思えますが、もうひとつ if と else の間に書く「else if」には、if 文と同じように条件を書くことができ、「そうでなくて、もし~ならば」という処理をつくります。
var a:Number = 10; if( a < 10 ) { trace( "a は10より小さい" ); } else if( a == 10 ) { trace( "a はずばり10" ); } else { trace( "a は10以上" ); }
ANDで条件を組み合わせる
if 文では、いくつかの条件を並べることができます。
条件を並べるときには「AND(&&)」か「OR(||)」を使って、条件どおしをつなぎます。
両方の条件が成立するときだけ処理を実行したいときには、AND(&&)を使います。
var a:Number = 5; if( a > 0 && a < 10 ) { trace( "a は1から9までの数値です。" ); }
- 条件A:a > 0 a が0より大きい
- 条件B:a < 10 a が10より小さい
この例では条件A、Bの両方が成立する(true)ので、出力パネルには「a は1から9までの数値です。」と表示されます。
ORで条件を組み合わせる
どちらかの条件が成立するだけで処理を実行したいときは、OR(||)記号を使います。
var a:Number = 5; if( a < 0 || a > 10 ) { trace( "a は0より小さいか、10より大きい数値です。" ); }
- 条件A:a < 0 a が0より小さい
- 条件B:a > 10 a が10より大きい
この例では条件A、Bのどちらも成立しない(false)ので、出力パネルにはなにも表示されません。
中括弧の省略
各コードブロックに文がひとつしかないときには、次のように括弧を省略することもできます。
var a:Number = 5; if( a < 10 ) trace( "a は10より小さい" ); else if( a == 10 ) trace( "a はずばり10" ); else trace( "a は10以上" );
不用意に省略すると、うまくいかない原因にもなるため、常に中括弧を書くようにしましょう。
load と enterFrame どちら?
ムービークリップは連続的にX座標位置が変化しています。
ですから「条件:右端まできたら」を調べるのも「連続的」におこなう必要があります。
つまり、イベントハンドラ「enterFrame」に記述します。
条件の設定
- 「条件:右端まできたら」を記述します
丁寧にいうと「ムービークリップが右端の座標まできたら・・・」となります。
《基準点》
if( 条件式 ){
条件式を満たしおこなう処理
}
ムービークリップ「ball_mc」がすべて見えなくなるまでの距離は「ステージ + ballの半分20px」です。
つまり、ムービークリップ「ball_mc」が右端に到達するということは、「this._x と520が等しい」といえます。
比較演算子
ActionScriptでは「等しい」を表す記号は「==」を使います。
if( this._x == 520 ){
条件式を満たしおこなう処理
}
条件は、上記のように「this._x == 520」で表すことができます。
この条件を表す式を「条件式」と呼びます。
ブール値
「true」と「false」の2つをブール値と呼びます。
- true「真」:条件を満たすこと
- false「偽」:条件を満たさないこと
以下の場合は、
trace(10 == 9);
となり、比較式が「偽」であることがわかります。
適切な条件を考える
条件式は「this/_x == 520」でも文法的には間違いはないのですが、汎用性が低い、悪い記述の仕方です。
なぜかといえば、ムービークリップは移動速度によってはX座標の 520 に止まるとは限らないのです。
50ずつ移動するように設定した場合、520には止まらず条件を満たすことはありません。
今回の場合は、比較演算子「>=」を使います。
if( this._x >= 520 ){
条件式を満たしおこなう処理
}
処理の追加
あとは、条件式を満たしたときにおこなう処理を書けば完成です。
「処理:左端に移動する」は、「this._x」に左端の座標を代入するだけです。
if (this._x >= 520) { this._x = -20; }
マジックナンバーの削除
onClipEvent(load) { speed = 10; //移動速度 leftEdge = -20; //左端の座標 rightEdge = 520; //右端の座標 } onClipEvent(enterFrame) { this._x = this._x + speed; if (this._x >= rightEdge) { this._x = leftEdge; } }
function文
マジックナンバーと同じように「何の処理かわかりずらい処理」はよくありません。
これ場合、「 this._x = leftEdge; 」が、それにあたります。
「何の処理かわかりずらい処理」には名前をつけて、あとで修正しやすいような構造に書き換えます。
function 名前( ){
処理1
処理2
…
}
function文には、さらに高度な利用法があるのですが、この段階では「処理に名前をつける」にとどめます。
function文を書いてみます。
まず、どのイベントハンドラに書くべきかを考えます。
マジックナンバーを削除するのと同じで「はじめに1回設定」すればよいので、イベントハンドラ「load」に記述します。
onClipEvent(load) { speed = 10; //移動速度 leftEdge = -20; //左端の座標 rightEdge = 520; //右端の座標 //ボールを左端にワープさせる function ballWarp (){ this._x = leftEdge; } }
カスタムメソッド
作成したfunction文を呼び出す方法は、変数の利用方法と同じです。
例えば「this.play();」などのメソッドの利用方法と同じです。
onClipEvent (enterFrame) { this._x = this._x + speed; if ( this._x >= rightEdge) { this.ballWarp(); //カスタムメソッドの利用 } }
《完成例》
onClipEvent (load) { speed = 5; //移動速度 leftEdge = -20; //左端の座標 rightEdge = 520; //右端の座標 //ボールを左端にワープさせる function ballWarp (){ this._x = leftEdge; } } onClipEvent (enterFrame) { this._x = this._x + speed; if ( this._x >= rightEdge) { this.ballWarp(); //カスタムメソッドの利用 } }
複雑なif文:理論演算子
条件を満たさないときの処理
「else文」を利用することで、条件を満たさないときにも特定の処理を行うことができます。
if( 条件式 ){
条件式が「真」のときに行う処理
} else {
条件式が「偽」のときに行う処理
}
条件を満たさない場合、さらに条件分岐させる処理
「else」の後ろに「if文」を追加することで条件式が「偽」のときにさらに条件分岐をすることができます。
if( 条件式A ){
条件式Aが「真」のときに行う処理
} else if( 条件式B ) {
条件式Aが「偽」でしかも条件式Bが「真」のときに行う処理
}
「else if」を追加していくことで、さらに複数の条件分岐が実現できます。
しかし追加しすぎると構造がわかりにくくなる場合もあります。
一度に複数の条件式を評価する
条件式は「理論演算子」を使うことで、複数扱うことができます。
if( 条件A && 条件B ){
条件A、条件Bが「ともに」真のときに行う処理
}
if( 条件A || 条件B ) {
条件A、条件Bが「どちらか」真のときに行う処理
}
演算子とは
- データに処理を加える記号のことを演算子といいます。
- 一方の、演算子によって処理されるデータはオペランド、演算子とオペランドの組み合わせのように、値を生成する文を式といいます。
- 論理演算子は、オペランドのブール値 (true / false)をもとに、NOT、AND、OR などの論理演算を行う演算子です。
- 評価結果はブールです。
- 論理演算子はif文、for 文、while 文の条件式で、等価演算子や比較演算子とともによく使用されます。
理論演算子
演算子 | 処理内容 | オペランド数 |
---|---|---|
! | 否定 (NOT) | 単項 |
&& | 論理積 (AND) | 二項 |
|| | 論理和 (OR) | 二項 |
否定(NOT)
- 否定(NOT)はオペランドのブール値を反転する論理演算です。
- ブールは true また flase の2値で表されるデータ型です。
論理積 (AND)
論理和 (OR)