jQueryで複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする - 雑想空間
はまったのでメモ。 jQuery でセレクタを複数条件で指定したい場合などがある。 例えばこんな場合 <table> <tr> <td class="a" id="1">a-1</td> <td class="a" id="2">a-2</td> <td class="a" id="3">a-3</td> </tr> <tr> <td class="b" id="4">b-4</td> <td class="b" id="5">b-5</td> <td class="b" id="6">b-6</td> </tr> </table>こんなテーブル構造があった場合。 classが"a"、idが"5"のカラムの色を変えたい場合。 $(function() { $(".a,#5").css("backgroundColor", "red"); });これでOK。 これは or 条件ですね。 cl
Firebugを活用しよう！jQueryの動作チェックに最適な『FireQuery』
皆さんご存知のFirefoxのアドオン「firebug」コーダーとかであれば、これを入れている人はかなり多くいると思います！ しかし、中には『linker』のまーしーさんや『スグラボ』のフジカワさんのように、”いまいちFirebugを使いこなせていない”なんて人もいるのではないでしょうか？ 今回はそんな方もふくめ「FireQuery」のご紹介を仕様と思います！個人的にかなり便利だと思います。 FireQueryとは？ FireQueryは、Firebugを便利にさせる機能強化アドオンで、Firebugのコンソールで楽々jQueryを使えるようにしたり、DOM画面イベントがどこについているのかとかを確認することができるようになるツールです。 ただのFirebugでもJavaScriptのデバッグや動作の確認をすることはできたのですが、FireQueryを入れることによって、jQueryを使っ
第5回 難しくなる前にFirebugの活用を学ぶ | gihyo.jp
内容が難しくなる前にFirebugに慣れる！ 第1回から第4回まで、jQueryについての各セレクタやメソッドなどを見てきました。各回で簡単なサンプルも載せていましたが、皆さんここまでの内容については問題なくついてこれていますでしょうか？ まだjQueryの基礎について全てを説明し終えてはいないのですが、そろそろスクリプトも長くなってきて、考えることも難しくなってきています。第3回と第4回の内容を振り返ってみても、少しずつスクリプトの量も増えてきているのがわかると思います。この先も、内容が増えていくにつれて、スクリプトも長く、手順をうまく考えなくてはならなくなってきます。 内容がもっと難しくなっていく前に、一度ここで復習をして、この先に備えておきましょう。 Firebugをもっと使ってみる ここまで、いくつかサンプルなどを紹介してきましたが、まだまだjQueryがいまいち理解できていない人
フォームから別ウィンドウを開く方法のまとめ
フォームから別ウィンドウを開くためのTipsをまとめました。 １．はじめに フォームから別ウィンドウを開く場合、 別ウィンドウで起動されるCGIにフォームデータを渡したい フォームボタンを複数回クリックしたときに別ウィンドウを1枚しか開きたくない フォームボタンを複数回クリックしたときに別ウィンドウを複数枚開けるようにしたい と、色々なケースがあります。 業務で使うCGIを開発するときにこれらのことをネットで色々調べたのですが、FAQサイトなどに個別の情報が散在しているだけでしたので、このエントリーで一挙にまとめてみました。 ここではjQueryを使わないオーソドックスなコードで解説します。コード内に使われているCGI（new_window.cgi）は６項に掲載しています。サンプルを実行する場合、すべての資材を同じディレクトリに配置して実行してください。 ２．基本動作 フォームから別ウィン
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
optionタグを選択不可にする disabled 属性を IE6 でも有効にする方法 | Sun Limited Mt.
optionタグを選択不可にする disabled 属性で紹介したように option タグに disabled 属性を指定することにより選択不可にすることができるのですが、IE6 では選択できてしまいます。 JavaScript で解決する方法です。 Select, Option, Disabled And The JavaScript Solution 上記の参考サイトに詳しくやり方が書かれていますので、簡単に手順だけ紹介。 参考サイトの「Implementing」にある download リンクより JavaScript コード(select-option-disabled-emulation.js)をダウンロード select-option-disabled-emulation.js を適当な場所に保存 html 内で select-option-disabled-emulatio
CakePHP AjaxでJSONデータの出力の仕方とcontent-typeについて – MT Systems
以前、Ajax通信で結果を出力する際XMLデータだったので、Content-Typeを「application/xml」か「text /xml」にしようと、RequestHandlerのメソッド(setContent)をいろいろ試したのだが、いつも「text/html */*」となり、なかなか思うように出力できなかった。あの時は、クライアント側で支障なく利用できたので、放り出してしまった。 今回、クライアント側のJavaScriptで扱いやすいように、JSONでデータを出力することにしたので、前回クリアできなかったハードルに再 挑戦することとなった。と言っても、CakePHPについは世界中で多くの情報が公開されているため、作業は検索と動作チェックだけだったけど (^_^;)。 お題は、「ユーザ番号をAjaxのGETで渡し、DBのユーザ情報をJSONで出力する」という、簡単なお話し。クライア
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
第1回 詳説：デベロッパーツールの使い方 | gihyo.jp
こんにちは、Google Chrome ExtensionsのAPI ExpertとChromium-Extensions-Japan管理人を担当している、太田と申します。いつもはクロスブラウザで連載していますが、今回はGoogle Chromeのデベロッパーツールについて紹介します。 昨今のJavaScript、HTML、CSSブームの背景には、開発環境、特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面、高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。そこで、今回から全4回でGoogle Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。 な
Diaspar Journal: JavaScript でプリントデバッグするには？
2009年1月31日土曜日 JavaScript でプリントデバッグするには？ alert 関数を使用しないでプリントデバッグする方法を、ブラウザごとに紹介します。 更新内容 2009-02-27 Safari 3 から Safari 4 へ変更。 2009-01-31 プリントデバッグの検証ページを追加。 2009-01-31 Chrome 2 と IE8 を追加。 Firefox では、 Firebug をインストールすると、いくつかのプリントメソッドが使えるようになります。 詳しくは、 Firebug Console Object and API を参照してください。 以下は、Firebug の代表的なプリントメソッドです。 console.log('Debug Message'); デバッグメッセージの出力先は、Firebug のコンソール（[F12]で表示）です。 Firefo
8行でjQueryのデバッグが楽になるjQuery.pの紹介 - KAYAC Engineers' Blog
週末はオレ標準JavaScript勉強会のUstreamを眺めてました。ago（@kyo_ago）です。 以前jQuery使いが陥りやすい罠の中で「4 何でも一行で書こうとする」という点を上げたのですが、以下のようなmethodを定義することでmethod chainのデバッグが楽になるので紹介したいと思います。 $.fn.p = function (id) { var arg = [this]; if (id) arg.unshift(id); if (!window.console) return this; var c = window.console || { 'log' : function () {} }; (c.debug || c.log).apply(c, arg); return this; }; 具体的な使い方ですが、以下のように確認したいmethodの後に.p()を
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
DeNA、HTML5開発支援フレームワーク「Arctic.js」を オープンソースとして公開 - [DeNA] 株式会社ディー・エヌ・エー
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…
既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」 っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java
コンパイルするとJavaScriptに！ Rubyライクに記述できる「CoffeeScript」とは？
JavaScriptプログラマーの間で「CoffeeScript」を使う人が増えています。CoffeeScriptとは一体どんな言語なのか、そして実際の現場で使うにはどうしたらいいのか、この連載を通して解説していきます。Webブラウザ向けのフロントエンド開発にも、そしてサーバサイド開発にも使える内容となっています。 CoffeeScriptが登場する前 JavaScriptは広く普及している言語ですが、ソースコードは見苦しいものになりがちです。小さなプログラム程度なら構いませんが、大規模なプログラムを作るのはかなり骨が折れる作業です。冗長な記号や面倒な決まり文句などが積み重なると、読みづらくメンテナンスしづらいソースコードができてしまいます。 JavaScriptを使ってある程度の規模の開発を経験したプログラマーの多くはそのような不満を感じ、もう一度JavaScriptで大きな開発をしたい
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
スマホアプリの作り方【超まとめ】Web編：HTML5やjQuery MobileなどスマホWebアプリ開発に役立つ記事52選 - ＠IT
Web編：HTML5やjQuery Mobileなど スマホWebアプリ開発に役立つ記事52選 ＠IT編集部 2012/1/31（2013/2/28 改訂） iOS（iPhone／iPad／iPod touch）、Android、Windows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための＠IT記事のまとめです。今後、順次更新・追加していきます。 開発者が登録したApp StoreやMarketplaceなどからダウンロードしてインストールするアプリ、もしくは、あらかじめインストールされているアプリは、「ネイティブアプリ」と呼ばれています。iOSやAndroid、Windows PhoneといったOS上で動き、マイクやカメラなどデバイスの機能を十分に使えるのが特徴です。作り方は、基本編やデザイン／グラフィック編で紹介した記事が参考になると思います。 一方で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas
もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き） 記事一覧 | gihyo.jp
Example Domain