jQuery
jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみます。
5/23に、「第５回 HTML5ビギナーズ」に行ってきたので、３回に分けて勉強会の内容を紹介します。 第５回 HTML5ビギナーズ（jQueryをやります！） : ATND今回は普段から「jQuery」を教えてる方が登壇します！！ハードルを低めにした「基本編」とちょっと背伸…
5/23に、「第５回 HTML5ビギナーズ」に行ってきたので、３回に分けて勉強会の内容を紹介します。 第５回 HTML5ビギナーズ（jQueryをやります！） : ATND今回は普段から「jQuery」を教えてる方が登壇します！！ハードルを低めにした「基本編」とちょっと背伸…
5/23に、「第５回 HTML5ビギナーズ」に行ってきたので、３回に分けて勉強会の内容を紹介します。 第５回 HTML5ビギナーズ（jQueryをやります！） : ATND今回は普段から「jQuery」を教えてる方が登壇します！！ハードルを低めにした「基本編」とちょっと背伸…
どうすれば？ 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 Released | Official jQuery Blog
jQuery1.7がリリースされました。jQuery 1.7 Released | Official jQuery BlogjQuery 1.7 is ready for download! ...APIに[on],[off]が追加されています。 イベントのアタッチ、デタッチにはこれまで複数の方法がありましたが、今後はこの２つのメソッドに…
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がリリースされました。 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をはじめました - プログラマーな日々 DOM要素の作成、操作、挿入 - プログラマーな日々 jQueryで種類を指定してフォーム要素を選択する - プログラマーな日々 グローバル名前空間での競合を回…
QUnitを使うとJavaScriptのユニットテストを自動化できます。テストには以下が必要です。 testsuite.cssのインクルード testrunner.jsのインクルード idが"main"のdiv 詳細はソースコードを見てください。 ソースコード <html> <head> </head></html>
ソースコード <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にはテーマと呼ばれるCSSのセットが用意されています。これを適用することで一貫したスタイルを実現できます。テーマはこちらからダウンロードできます。 Download Builder | jQuery UI以下のエントリーで作成したページにテーマを適用してみます。…
マウスホバーをトリガーにしたトグルメニューのサンプルです。 動作 ナビゲーションメニュー メニュー１ メニュー２ メニュー３ メニュー４ メニュー５ (function ($) { function initDropdown() { if (!$('ul.dropdown').length) { return } // ナビゲーシ…
ソースコード 「jquery-ui.js」をインクルードする必要があります。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <label for="month">月選択</label> </body></html>
ソースコード <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>
ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <input id="first" type="button" value="first" /> </body></html>
ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <input id="binding" type="button" value="bind" /> </body></html>
toggleメソッドで表示／非表示を切り替える ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> </body></html>
ソースコード <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <input id="bar" type="button" value="fooまでスクロール" /> </body></html>
JavaScriptの簡易プロファイラです。（jQueryクックブックより）jQueryクックブックposted with ヨメレバjQuery Community Experts オライリージャパン 2010-08-18 Amazonで購入Kindleで購入楽天ブックスで購入7netで購入hontoで購入e-honで購入 紀伊國屋書…
ソースコード 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>
ソースコード 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では以下の書き方でスコープを限定することができます。 <script type="text/javascript"> (function($) { // ここで使う"$"はスコープが限定される。 })(jQuery); </script> 仮引数が"$"の匿名関数を定義し、jQuer…
フォーム要素の種類に基づいて選択するサンプルコードです。 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>
アンカー作成 まずはアンカーを作成して挿入してみます。 <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をはじめました。まずはお決まりの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…
