jQueryのfind()を利用した高速化
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
Re:美しいプログラムを書く(業務用Webアプリケーション保守編)
Re:美しいプログラムを書く(業務用Webアプリケーション保守編) ネタ元：美しいプログラムを書く(業務用Webアプリケーション保守編) 僕だったらこう書くかな。 $(function(){ //set obj var newInput = $("input[name='new_version']"); var oldInput = $("input[name='old_version']"); //init newInput.eq(0).attr('checked','checked'); oldInput.eq(0).attr('checked','checked'); //set event newInput.change(function () { var index = newInput.index(this); oldInput.eq(index).attr('checked'
美しいプログラムを書く(業務用Webアプリケーション保守編) | Webシステム開発／教育ソリューションのタイムインターメディア
あらすじ あなたはとある業務用 Web アプリケーションの開発・保守を任されています。 このアプリケーションは ASP.NET を用いて作成されており、 クライアントサイドは一部 jQuery を利用してナウなヤングにバカウケの UI を実装しています。 さて、今回は 商品情報の変更履歴を一覧表示する。一覧から2つのバージョンを選んで差分を表示できるようにする。 という機能を実装することになりました。 これ自体はちゃちゃっと実装し、以下のようなHTMLが生成されるようにしました: ... <table> <tr> <th>A</th> <th>B</th> <th>変更日時</th> <th>変更者</th> </tr> <tr> <td><input type="radio" name="new_version" value="9"/></td> <td></td> <td>2012-0
jQuery言語入門 : tech.kayac.com - KAYAC engineers' blog
先月の社員PVランキングは91番目でした。agoです。 たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。 個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。 文法 Traversing methodでインデントを下げて、.end()でインデントをあげます。 （Traversing以外のmethodはインデントを維持します） そして、末尾には開始行と同じ位置に「;」を置きます。 $('body') .find('a') .filter('.permlink') .attr('href', function () { return $(this).attr('href').repla
New community features for Google Chat and an update on Currents
Join the official community for Google Workspace administrators In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace. ______________ Learn about more Goo
jQuery Standards Teamが発足 | Web標準Blog | ミツエーリンクス
jQueryプロジェクトがStandards Teamという名前のサブチームを立ち上げたことを発表しています。 Announcing The jQuery Standards Team jQuery Standards Teamは、標準化団体やベンダーに対し、Web開発者という立場から働きかけていくチームです。Web標準やブラウザ相互運用性の重要性は高まるばかりですが、Web開発者コミュニティと、標準化団体・ベンダーとの連携はそこまでうまくいっていないという問題意識から生まれたようです。 ブログの中では、標準化団体の持つ標準化プロセスの難しさ、長くなりがちな議論に割ける時間が開発者にない、ブラウザ開発者が活発に議論するメーリングリストでは技術への深い理解が必要という雰囲気になっているといったことが課題として挙げられています。 jQuery Standards Teamは次のゴールを掲げ、関
DOMAIN ERROR
ドメインウェブの設定が見つかりません 考えられる原因 ドメインウェブの設定がまだ行われていない。 ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。 アカウントが存在しない、契約が終了している、削除されている。
$.dataはHTML5 datasetのラッパーではない
$.dataはHTML5のdatasetラッパーでない HTML5では要素に任意の属性を追加出来るdata-*属性がサポートされました。仕様では <div data-foo="bar">...</div> data-fooの値はdiv.dataset.fooでアクセスすることが出来ます。ただしdatasetは現在一部ブラウザでしかサポートされていない。。そこでjQueryに存在する$.dataメソッドを使いましょう、という流れなのですが、$.dataをラッパーとして見た場合結構罠がありおすすめ出来ません。中途半端に対応してしまったために誤解されがちですが、$.dataはdatasetのラッパーではありません。 属性値がJSONとして解釈出来る場合、パースして返す <div id="test1" data-json="{"foo":"bar"}">...</div> $('#foo').da
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQueryの落とし穴 | 水無月ばけらのえび日記
公開: 2011年7月3日19時35分頃 「jQueryにおけるXSSを引き起こしやすい問題について (subtech.g.hatena.ne.jp)」。これは非常に興味深いお話ですね。 jQuery (jquery.com)はJavaScriptのライブラリですが、最近ではもうほとんどのサイトで使われていると言っても過言ではないくらい使われています。これは非常に便利で、面倒なDOM操作をとても簡単に書くことができます。たとえばこんな感じです。 上記のようなコードは良くあるのですが、よく見ると、$() は渡されたものの種類によって全く違う動作をしている事が分かります。 functionを渡すと、DOM読み込み可能になったタイミング (DOMReady) でそのfunctionを実行CSSのセレクタのような文字列を渡すと、既存のノードを選択する動作 (getElementByIdやgetEl
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
要素をスクロールに追従させる jQuery プラグイン
Apple Store のサイドバーのように、要素をウィンドウのスクロールに追従させる jQuery プラグイン、jQuery Floating Widget を作りました。説明が難しいので、まずはデモをご覧ください! jQuery Floating Widget plugin demo このアイデア自体は新しいものではなくて、たとえば以下の記事で詳しく紹介されています: Fixed Floating Elements | jQuery for Designers - Tutorials and screencasts この方法で基本的にうまくいくんですが、フッターの高さがある程度あると、下までスクロールしたときに該当要素がフッター領域に食い込んでしまう場合があります。そこで、上記記事での実装を参考に、要素の「動ける範囲」を制限するための処理などを加えたものを考えてみました。 例として、フ
jQueryプラグイン: Harmonize Text
親要素の幅に収まるようにフォントサイズを変更するjQueryなJavaScriptコードを、Harmonize Textという名前のjQueryプラグインにしました。FitTextを見て「コード短くて凄い！」とか思ったんですけど、自分の求めているものとはずいぶん違ったので、自分で書いたのをjQueryプラグインにしようというモチベーションが湧きました。 Repository: hail2u/jquery.harmonize-text 内容はリサイズに対応するようにした以外は特に変わっていないので、スクロールバーの有無によってぴったり収まらないバグは直っていません。リサイズは重いし、遅延させた方が良さそうな気がするので、そこら辺のオプションを指定できるようにしようかなと考えています。-1を引数として渡すとでリサイズに対応しない、正の整数ならそのミリ秒だけ遅延させてからリサイズ処理を行うとかで
jQueryでcheckboxがcheckされてるかの値をとる - Webtech Walker
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
外部サイトへのリンクにtarget=_blank属性を追加（jQuery）
外部サイトへのリンク jQueryを使って、外部サイトへのリンクにtarget=_blankを追加する仕様にしました。 外部へのリンクにtarget=_blank属性を付けることはアクセシビリティの観点から望ましくない。つまり、別ウインドウで開くかどうかはユーザーが判断すべきとされてきましたが、これだけタブブラウザが普及するとかえってアクセシビリティ上よろしくないという気がします。 といって膨大な記事の中から外部へのリンクを探し出して、手書きでtarget=_blank属性を追加するのも大変な作業量です。 そこで、jQueryを使って処理することにしました。 関連リンク Wordpress: 外部リンクをtarget=_blankに - blog.eラーニング.co.jp jQuery (document).ready( function () { jQuery ('a[href^=htt
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
less - jQuery Templatesプラグインが面白い
jQuery Templatesプラグインが面白い jQuery TemplatesプラグインはjQuery公式のテンプレートエンジンです。元々マイクロソフトのASP.NET Ajax Libraryで実装されていた機能を切り出したものらしい。 jQuery Templates, Data Link, globalization が公式 jQuery プラグインに加わりました - THE TRUTH IS OUT THERE - Site Home - MSDN Blogs 現在は1.0.0pre。そろそろ出るjQuery 1.5には標準で入る模様です。preですがマイクロソフトのCDNが利用出来ます。 配列を渡すと自動的にループして出力されるなど、JSONをそのまま渡して動くように意識されているところが面白いと思いました。 <ul id="name-list"></ul> <script
Cross-Browser Support for HTML5 Placeholder Text in Forms - CSS Reset
<input type="text" placeholder="Start typing to begin searching." /> The only new bit is the placeholder attribute, but it results in this: I love placeholder text because it can help make large, complex forms easier to navigate. What better place to explain the requirements of an input field than right inside the field itself? And on short forms (like a search bar), placeholder text could be used
HTML5のplaceholder属性をjQueryでやってみる
追記：HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ここと同じ内容のことをjQueryプラグインの体裁に整えたものを，GitHubで公開してます．詳しくは上の記事をご参照のこと． 4.10.7.2 Common input element attributes — HTML5 (including next generation additions still in development) HTML5のinput要素には、placeholder属性があります。input要素に、placeholder属性でテキストを書くと、下のような感じの表現が可能になります。今のところOpera・Safari・Chromeでは、ネイティブに記述しても解釈してくれるようです。 ただし、XHTML 1.1や、HTML 4.01のDTDを宣言した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://twitter.com/3ping/status/24474851543