Architect's Log

I'm a Cloud Architect. I'm highly motivated to reduce toils with driving DevOps.

jQuery

jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみる

jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみます。

「第5回 HTML5ビギナーズ」に行ってきた(その3 LT)

5/23に、「第5回 HTML5ビギナーズ」に行ってきたので、3回に分けて勉強会の内容を紹介します。 第5回 HTML5ビギナーズ(jQueryをやります!) : ATND今回は普段から「jQuery」を教えてる方が登壇します!!ハードルを低めにした「基本編」とちょっと背伸…

「第5回 HTML5ビギナーズ」に行ってきた(その2「jQuery応用」by 杉山彰啓さん)

5/23に、「第5回 HTML5ビギナーズ」に行ってきたので、3回に分けて勉強会の内容を紹介します。 第5回 HTML5ビギナーズ(jQueryをやります!) : ATND今回は普段から「jQuery」を教えてる方が登壇します!!ハードルを低めにした「基本編」とちょっと背伸…

「第5回 HTML5ビギナーズ」に行ってきた(その1「jQuery基礎」by 山崎大助さん)

5/23に、「第5回 HTML5ビギナーズ」に行ってきたので、3回に分けて勉強会の内容を紹介します。 第5回 HTML5ビギナーズ(jQueryをやります!) : ATND今回は普段から「jQuery」を教えてる方が登壇します!!ハードルを低めにした「基本編」とちょっと背伸…

jQueryのVisual Studio 2010用コードスニペット集

どうすれば? CodePlexからmsiをダウンロードします。 jQuery Code Snippets for Visual Studio 2010 - Home131 Visual Studio 2010 Code Snippets for use with jQuery msiを実行してインストールします。 Visual Studioを起動し、Webプロジェクトを作成し…

jQuery 1.7.1 がリリースされました

jQuery 1.7.1 がリリースされました。 jQuery 1.7.1 Released | Official jQuery Blog

jQuery1.7がリリースされました

jQuery1.7がリリースされました。jQuery 1.7 Released | Official jQuery BlogjQuery 1.7 is ready for download! ...APIに[on],[off]が追加されています。 イベントのアタッチ、デタッチにはこれまで複数の方法がありましたが、今後はこの2つのメソッドに…

jQuery 1.6.4 がリリースされました

jQuery 1.6.4 がリリースされました。先日1.6.3がリリースされたばかりなのにペース早いですね。 jQuery 1.6.4 Released | Official jQuery BlogThis is a minor point release of jQuery. We’re releasing it fix a couple issues that came up during the …

jQuery1.6.3がリリースされました

jQuery1.6.3がリリースされました。 jQuery 1.6.3 Released | Official jQuery BlogjQuery 1.6.3 is now out! This is the third minor release on top of jQuery 1.6 and lands a number of fixes for bugs, as listed below. As usual, we provide two cop…

jQueryエントリのまとめ

ここまでのjQuery関連のエントリのまとめです。 エントリ jQueryをはじめました - プログラマーな日々 DOM要素の作成、操作、挿入 - プログラマーな日々 jQueryで種類を指定してフォーム要素を選択する - プログラマーな日々 グローバル名前空間での競合を回…

QUnitでJavaScriptのユニットテストを自動化する

QUnitを使うとJavaScriptのユニットテストを自動化できます。テストには以下が必要です。 testsuite.cssのインクルード testrunner.jsのインクルード idが"main"のdiv 詳細はソースコードを見てください。 ソースコード <html> <head> </head></html>

jQueryでAjaxを実装する

ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="contents"></div> <input id="load" type="button" value="load" />…</body></html>

jQuery UIのテーマ

jQuery UIにはテーマと呼ばれるCSSのセットが用意されています。これを適用することで一貫したスタイルを実現できます。テーマはこちらからダウンロードできます。 Download Builder | jQuery UI以下のエントリーで作成したページにテーマを適用してみます。…

【jQuery】マウスホバーをトリガーにしたトグルメニューのサンプル

マウスホバーをトリガーにしたトグルメニューのサンプルです。 動作 ナビゲーションメニュー メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 (function ($) { function initDropdown() { if (!$('ul.dropdown').length) { return } // ナビゲーシ…

jQuery UIのオートコンプリート機能

ソースコード 「jquery-ui.js」をインクルードする必要があります。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <label for="month">月選択</label> </body></html>

【jQuery】1つのチェックボックスに基づいてすべてのチェックボックスを切り替える

ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <fieldset> <legend>Reasons to be happy</legend></fieldset></body></html>

【jQuery】必要なデータをイベントハンドラに提供させる

ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <input id="first" type="button" value="first" /> </body></html>

【jQuery】複数のイベントにハンドラをバインドする

ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <input id="binding" type="button" value="bind" /> </body></html>

【Query】要素のフェードイン・フェードアウト

toggleメソッドで表示/非表示を切り替える ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body></html>

【jQuery】要素が見えるようにスクロールする

ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <input id="bar" type="button" value="fooまでスクロール" /> </body></html>

【jQuery】プロファイラを作成する

JavaScriptの簡易プロファイラです。(jQueryクックブックより)jQueryクックブックposted with ヨメレバjQuery Community Experts オライリージャパン 2010-08-18 Amazonで購入Kindleで購入楽天ブックスで購入7netで購入hontoで購入e-honで購入 紀伊國屋書…

【jQuery】eachメソッドで各要素にfunctionを適用する

ソースコード eachメソッドでjQueryオブジェクトの各要素にfunctionを適用します。 <body> <div id="days"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script> <script type="text/javascript"> (function ($) { var days = {Sunday: 0, Monday: 1, Tuesday: 2, Wednesday: 3, Thursday:…</body>

【jQuery】インデックスを指定して要素を絞り込む

ソースコード eqメソッドでインデックスを指定して要素を選択します。 <body> <p>セリーグ</p> <ol id="central"><li>中日</li><li>阪神</li><li>巨人</li><li>ヤクルト</li><li>広島</li><li>横浜</li></ol> <p>パリーグ</p> <ol id="pacific"><li>ソフトバンク</li><li>西武</li><li>ロッテ</li><li>日本ハム</li><li>オリックス</li><li>楽天</li></ol> </body>

【jQuery】グローバル名前空間での競合を回避する

競合を回避するため、グローバル名前空間の汚染はできるだけ避けたいものです。jQueryでは以下の書き方でスコープを限定することができます。 <script type="text/javascript"> (function($) { // ここで使う"$"はスコープが限定される。 })(jQuery); </script> 仮引数が"$"の匿名関数を定義し、jQuer…

jQueryで種類を指定してフォーム要素を選択する

フォーム要素の種類に基づいて選択するサンプルコードです。 textboxにだけ属性を設定する ソースコード <body> <form> <input type="text" id="hoge" /> <input type="button" id="fuga" value="button"/> </form> </body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

【jQuery】DOM要素の作成・操作・挿入

アンカー作成 まずはアンカーを作成して挿入してみます。 <div id="contents1"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> // アンカーを作成して挿入 $("<p><a>MDN</a></p>").appendTo("#contents1"); </script> レンダリング // アンカーを作成して挿入 $("MDN").a…

jQueryをはじめました

今更ですが、jQueryをはじめました。まずはお決まりのHello Worldから。 ソースコード <body> <div><p id="target"></p></div> </body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> // IDがtargetの要素に'Hello World'を表示する $('#target').text('Hello Wor…