2013-03-01から1ヶ月間の記事一覧
要素を移動する2 - appendTo ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素を移動する2 - appendTo</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #FCF; } #basket { width: 400px; height: 300px; background-color: #F…</meta></head></html>
要素の幅／高さを変更する - width/height ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素の幅／高さを変更する - width/height</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } #div1 { width: 300px; height: 200px; backgr…</meta></head></html>
フェードアニメーション - fadeIn/fadeOut ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フェードアニメーション - fadeIn/fadeOut</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } #div1 { width: 300px; height: 300px; back…</meta></head></html>
スライドアニメーション - slideDown/slideUp ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>スライドアニメーション - slideDown/slideUp</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } #div1 { width: 300px; height: 300px…</meta></head></html>
汎用的なアニメーション - animate 記述内容 $(function() { $('#div1').animate({ 'margin-top': '200', 'margin-left': '400', }); }); 省略記述 $(function() { $('#div1').animate({ top: 200, left: 400, }); }); ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>汎用的な</title></meta></head></html>…
要素の内容をまるごと書き換え - text/html ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素の内容をまるごと書き換え - text/html</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } #div1 { width: 400px; height: 50px; backgroun…</meta></head></html>
変数に保存する 変数を使うと何かを入れておき、これを必要なときに取り出すことができる 記述内容 var lastName = 'Yamada'; alert(lastName); 記述の仕方は、JavaScriptそのもの 変数には変数宣言が必要 １回のみ変数の値を使う場合は、変数は不要 ソース…
変数を何度も使う 記述内容 var lastName = 'Yamada'; //変数 lastName を作る。中身は 'Yamada' var me = lastName + ' Taro'; //変数 me を作る。中身は lastName + 'Taro' → 'Yamada Taro' var father = lastName + ' Ichiro'; //変数 father を作る。中…
☆★データーでの確認★☆find 自要素の子孫が内包する要素すべてのなかから、指定したセレクタにマッチするものを探してくる機能 記述内容 $(function(){ var student = $('#student'); var age = student.find('.age'); var img = student.find('img'); age.cs…
メソッド jQueryオブジェクトが持っているメソッドを実行する スタイルを変更する css show /hide width / height アニメーションさせる fadeIn / fadeOut slideDown / slideUp animate 内容や属性を変更する text / html attr val addClass / removeClass …
要素の表示／非表示を変更する - show/hide ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>要素の表示／非表示を変更する - show/hide</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { background-color: #F93; } #div1 { width: 300px; height: 200px; } #div2 …</meta></head></html>
実行するタイミングの問題 $(function(){}) ページの読み込みが完了してから中に書かれたコードを実行する 複数の命令をひとまとめにした関数を使う 記述内容 $(function(){ $('#sample').hide(); }); $(function(){}) は省略形 文書が準備状態になったとい…
練習用空のテンプレート ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryテンプレート</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <script> $(function(){ }); </script> </body> </html> PA…
$('#idValue') ピンポイントでページ内の要素が欲しいときに最適なセレクタ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <ul> <li>fox</li> </ul></body></html>
$('.className') 2つ以上の要素に何かしたいときに最適なセレクタ ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CLASSセレクタ</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <ul> <li class="man">Paul</li>…</ul></body></html>
$('div') 指定した要素名の要素すべてをとってくる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイプセレクタ（element）</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brow…</p></body></html>
body要素を取得 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイプセレクタ（element）</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brown fox jumps over th…</p></body></html>
$('p strong') ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery 〜</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> <body> <div> <p>I have a <strong>pen</strong>.</p> </div> <ul> <…</ul></body></html>
より高度なセレクタ id が div な要素の直下にある p要素のうち、クラスboxに属さない要素を取得 書式 $('#div > p:not(.box)') CSSのセレクタとjQueryのセレクタ 「:first-child」は、InternetExplorer 6 はサポートしていない jQueryではInternetExplorer …
Google Analyticsの内容 ホームページ解析ツールの内容 Google Analytics Google Analytics はウェブサイトでのユーザーの行動を分析するのに役立つウェブ解析ツールです。ウェブサイトでのユーザーの行動に関するさまざまなレポートが提供され、ウェブサイ…
Like Boxとは いいね！ボックスとは、Facebookのソーシャルプラグインのうち、好きなFacebookページ（ファンページ）を外部Webサイト上で表示できる機能 【 参考サイト 】 weblio Facebookページの作り方 Facebookページを作っていないとlike boxが設置でき…
フォームの基本形 基準となる基本をつくりカスタマイズしていく ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームとテーブルでマークアップする</title> <style type="text/css"> body { font-size: 75%; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-ser</meta></head></html>…
必須項目にフォーカス 送信した後の記入された項目を自動で削除する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォーカス時のスタイルを指定する</title> <link rel="stylesheet" href="css/style.css" media="screen,print"> </head> <body> <form action="#" method="POST" id="inquiry"> </form></body></html>
jQueryとは JavaScriptのライブラリのひとつ ブラウザ依存を気にしなくてよい DOMの操作が簡単 記述の仕方は、CSSに似ている write less, do more. オープンソース（MITライセンス+GPLライセンス） e-Wods jQuery公式 Minified とは改行が除かれた圧縮版 jQu…
jQueryの概念 「何かを取ってくる」→「それに何かする」 $とjQueryオブジェクト $」こそが、「jQuery」そのもの 「$()」でHTML要素を、jQueryオブジェクト化することから始まる 要素を示すセレクタを取ってきて「jQueryオブジェクト」を作成する 何かする 記…
jQueryで記述 この記述で、ブラウザごとの差異を吸収して、そのブラウザでも同じように表示する 記述内容 $('#div1').click(function() { alert('クリックされました'); }); jQueryを読み込む jQueryで記述 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuer読み込み</title> <script src="js/jquery.js"></script> <style> #div</meta></head></html>…
池袋駅からここまでのルートマップ iPhone用フルスクリーン表示設定 ソースコード【 PHP 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>ルートマップ</title> <style> html, body { margin:0; padding:0; } div#map_canvas { width:330…</meta></meta></head></html>
ルート検索 任意の検索場所間のルートを表示する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps ルート検索</title> <style> #map_canvas { width:700px; height:500px; } #container { width: 700px; margin: auto; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false">…</meta></head></html>
ウェブマスター ツール クローラーの巡回対象にするため、サイトを検索エンジンに登録させる Google ウェブマスター Googleウェブマスターツールは基本だ 「Google ウェブマスターツールは、あなたのウェブサイトとGoogle の相性を簡単に高めることができる…
サイトマップの設定 検索エンジンに、作成したすべてのページをインデックスさせる サイトマップ 「sitemap.xml」検索エンジン用サイトマップ 「sitemap.html」閲覧者用のサイトマップ 外部.xmlファイルの作成 記述ルール sitemaps.org （Sitemapsフォーマッ…
