タグ

jqueryに関するhirafooのブックマーク (32)

  • .detach() | jQuery API Documentation

    The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

    hirafoo
    hirafoo 2013/02/08
    remove だとイベント削除されるけどこっちは keeps all jQuery data associated with the removed elements
  • jQueryにおける:first-childと:firstの違い

    jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f

    jQueryにおける:first-childと:firstの違い
  • IE6でSelectボックスだけz-indexが効かないバグをjQueryで解消する方法 - nzm_o。

    z-indexでレイヤー表示したボックスの上にselectボックスだけが上側に表示されてしまうIE6のバグがある。 それを解決するjQueryプラグインがある まず事象の確認。 HTML <div id="layer">z-index: 9999;に指定したdivボックス</div> CSS div#layer { color: #FFF; background: #555; border: 1px solid #CCC; position: absolute; width: 100px; height: 100px; z-index: 9999; } 上記で通常問題なくレイヤー表示されるが、IE6の場合以下のようにselectボックスだけがz-indexを無視してしまう。(バグ) これを回避するには、 1.selectボックスを動的に表示/非表示にする 2.iframeをselectボッ

    IE6でSelectボックスだけz-indexが効かないバグをjQueryで解消する方法 - nzm_o。
  • jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita

    // 悪い例 var id = $("#content").data("id"); var itemId = $("#content").data("item-id"); // 良い例 var content = $("#content") var id = content.data("id"); var itemId = content.data("item-id"); // 悪い例 $.each(reallyLongArray, function(count, item) { var newLi = '<li>' + item + '</li>'; $('#ballers').append(newLi); }); // 良い例 : DocumentFragmentを使用 var frag = document.createDocumentFragment(); $.each(reall

    jQueryのパフォーマンスを下げるアンチパターンに関する超意訳 - Qiita
  • jQuery.ajax(options) - jQuery 日本語リファレンス

    HTTP通信でページを読み込みます。 この関数はjQueryにおけるAJAX通信の基部分で、実際には$.getや$.postといった関数を使った方が、容易に実装できます。 但し、これらの抽象化された関数は実装の容易さと引き換えに、エラー時のコールバックなどの複雑な機能を失っています。そのような処理を実装したい場合は、やはり基幹であるこの関数を用いる必要があります。 $.ajax関数は、戻り値として XMLHttpRequestオブジェクトを返します。殆どの場合、このオブジェクトを直接操作することは無いと思われますが、例えば投げてしまったリクエストを中断する場合など、必要であれば利用して下さい。 この関数は引数をひとつだけとりますが、実際にはハッシュで、キーと値の組み合わせにより多くのオプションを受け取ります。 以下にその一覧を載せますので、参考にして下さい。 async / boolea

    hirafoo
    hirafoo 2012/08/03
    dataType json jsonp
  • HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ::ハブろぐ

    HTML5の仕様にあるplaceholder属性を、未対応のブラウザでも擬似的に使えるようにするjQueryプラグインです。title属性に入れた文字列を、プレースホルダー用のテキストとして扱います。placeholder属性については以下などを参照。 HTML5のFormで実現されるplaceholder、autofocusが便利そう - IDEA*IDEA <input> placeholder-HTML5タグリファレンス 今回のプラグインは、HTML5のplaceholder属性をjQueryでやってみる :: ハブろぐ で、以前書いていたjQueryを整理して、プラグインの体裁に整えてみたものです。車輪の再発明もいいとこですね。 2011-09-09追記 バージョン1.2でplaceholderAttrオプションを追加 これまでplaceholder属性代わりに使う属性がtitle

  • Sign in - Google Accounts

    Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode

    hirafoo
    hirafoo 2012/07/31
    ヘッダーをtext/javascirptとしてしまうと、JSONがタグで囲まれてしまいます
  • プログラミング日誌 :: jQuery.uploadでファイルアップロード

    というようにメッソドを呼び出します。 気になった点としては、<input>タグの下に別のタグを配置すると、アップロードした瞬間、表示がずれるという現象が起きることです。 2. jQuery.uploadの引数 url 対応するサーバ側スクリプトのURL。 data サーバに送信するデータ。 josn形式:{'key':'value'} GET形式:key1=value1&key2=value2... などの形式で指定する。 callback アップロード完了後に呼ばれる関数。 type サーバからのレスポンスデータの形式。 'json', 'text', 'xml', 'html', 'script'のどれか。 3. 使用例 ファイルを指定して「アップロード」ボタンを押すと、引数dataで指定した日時が付加されたメッセージがブラウザに表示されるというシンプルなものを実装しました。 3.1

  • 美しいプログラムを書く(業務用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

    美しいプログラムを書く(業務用Webアプリケーション保守編) | Webシステム開発/教育ソリューションのタイムインターメディア
  • jQueryの$(this)とthisの違い : ずっと工事中

    jQueryの$(this)とthisの違い jQueryのイベントハンドラやコールバック関数内のthisについてです。 大した内容でもありませんが、なんとなく知らないまま使っている人もいるみたいなので、ちょっとメモ書き。 $(this)とthisの違い thisはDOMエレメントです。 イベントハンドラのthisはそのイベントが発生した要素、eachのコールバック関数内のthisは順番の回ってきた該当する要素です。 一方$(this)の方はと言うと、この要素を$関数に渡して、単にjQueryオブジェクト化しているだけなんですね。 使い分け という事で、使い分けは、 DOMエレメントのプロパティやメソッドを使うときはthis jQueryオブジェクトのメソッドを使いたいときは$(this) ということになります。 例えば a要素のhref属性を取ってきて何か処理を書こうと思ったとき、 何も

  • jQuery UI の sortable でらくらく並び替え « hampom TODAY

    データを登録するシステムを作ると、必ずといって良いほど出てくる要望の一つが「編集」と「並び替え」。 この2番目のデータを1番に持って行きたいんだけれど…。 なんて事をよく言われますが、マウスでヒュンヒュンと入れ替えする為には便利な jQuery の ユーザーインターフェースライブラリを使うと簡単にできちゃいます! 1. jQuery UI のサイトから、ライブラリをダウンロードします!(→ 公式) 2. ダウンロードして展開したら「css」フォルダをまるごと使いますので組み込むシステムにコピーします。 画像では「ui-lightness」というフォルダ名になっていますが、jQuery UI よりダウンロードする際にテーマを選択する事によってフォルダの名称が異なりますのでご注意ください。 3. システムに読み込む <link type="text/css" href="css/ui-ligh

  • Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks

    Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Really simple concept today folks! A sidebar that “follows” as you scroll down a page. There are a number of ways to go about it. We’ll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick. View Demo   Download Files The easiest way to handle this is just to use CSS fixed positioning. Our

    Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks
  • jQuery で JSONP 2通り - てっく煮ブログ

    JavaScriptjQuery を使って JSONP でリクエストする方法を2通り紹介するよ。その1: $("")createElement を $() を使って実装。 $("") .attr('type', 'text/javascript') .attr('src', "http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback") .appendTo($("head")); function myCallback(json){ // ロード完了時にここが呼ばれる } http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback にリクエストがいく。callback のところは、サービスによって指定の仕方が違うかもね。その2: $.ajax

  • JavaScriptでデータをダンプする「jQuery Dumpプラグイン」

    PerlのData::DumperやPHPのvar_dump()のようなことをJavaScriptで行える「jQuery Dumpプラグイン」を紹介します。 jQuery Dump 1.サンプル jQuery Dumpを使ってデータをダンプするには次のように設定します(青色部分)。 <pre id="dump"></pre> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.dump.js"></script> <script type="text/javascript"> $(function(){ var obj = { hubba: "Some string...", bubba: 12.5, dubba: ["One"

    JavaScriptでデータをダンプする「jQuery Dumpプラグイン」
  • 今さら聞けないjQuery実行パターンまとめ :: 5509

    なんとなく使っているだろう.ready()メソッドについて詳細に見てみましょう。 .ready()メソッド .ready()メソッドという呼び方がパッとしない人もいると思います。こういうのです↓ $(function(){ // .ready()が呼び出されたときに実行されるハンドラ }); jQueryを実行する際のおまじないみたいなものですね。これの中にjQueryコードを書いていくとページロード時(Documentの読み込みが完了時)に実行してくれます。 何気なく使ってる人も多いと思いますが、実際のところこれは何?ということで、少し掘り下げてみましょう。 .ready()を使う際の形式 jQuery APIによれば、以下の3つが.ready()として同じように使えるようです。 $(document).ready(handler) $().ready(handler) (推奨されていな

  • jQuery入門

    このページはAjaxライブラリの1つであるjQueryライブラリを勉強したい人向けに用意されています。 jQueryはバージョンによって記述方法が異なる場合があります。ここでは、バージョン別にページを用意するようにしてあります。 Ajaxライブラリで有名なものとしてはPrototypeライブラリやYahoo UI Libraryなどがあります。jQueryはPrototypeライブラリなどと併用することもできるようになっています。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 jQuery入門 (ver 1.2.1) jQuery入門 (ver 1.2.2) jQuery入門 (ver 1.2.3) jQuery入門 (ver 1.2.4) jQuery入門 (ver 1.2.5) jQuery入門 (ver 1.2.6) jQuery

  • Highcharts - Interactive Charting Library for Developers

    Our core library. Includes all standard chart types and more.

    Highcharts - Interactive Charting Library for Developers
  • jquery-json - Google Code

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    jquery-json - Google Code
  • jQuery 開発者向けメモ - リファレンス

    リファレンス $() jQueryオブジェクトを作り出す関数です. $("CSS文字列") CSSで要素を指定し,マッチした要素を持つjQueryオブジェクトを返します. 詳しい指定方法は Selectors を参照してください. jquery 1.1 までは XPath による指定もできましたが,最新版では削除されています. XPath Compatibility Plugin を利用することで,1.2 でも XPath を利用可能です. var $toc_1 = $("#toc_1"); jquery_dump($toc_1); var $h1 = $("h1"); jquery_dump($h1); var $h1head = $("h1.head"); jquery_dump($h1head); var $ahref = $("a[@href^='http://jquery.com

  • jQueryでiPhone/iPadの向きを検出する[to-R]

    jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出

    jQueryでiPhone/iPadの向きを検出する[to-R]