タグ

jqueryとjavascriptに関するstealthinuのブックマーク (66)

  • http://blog.skyld.org/2009/06/jquery-ready.php

    stealthinu
    stealthinu 2020/10/19
    jQueryが読み込み失敗しているか確認する方法。typeof jQueryでundefinedになってるか見る。2020年の今更ながらの話なんだけども。
  • jQuery1.6.0より、属性がない時のattr()の戻り値が、空文字からundefinedへと変更されていた - メモ的な思考的な

    jQueryのバージョンを上げる時に出くわしたのでメモを残します。 目次 環境 現象 原因 実験 ソースコード 環境 対象のjQuery 1.5.2 1.6.0 現象 jQueryの attr() を使って属性の値を取得しているコードのうち、 <p>Hello World</p> <script> // class属性がないのに attr() を使っている result = $('p').attr('class'); </script> と、属性が定義されていない場合、後続の処理で予期しない挙動をしていました*1。 原因 jQuery1.6.0より、 attr() の戻り値が変わっていました。 属性が定義されていない場合の attr() の戻り値が 〜1.5.2:空文字 1.6.0〜:undefined へと変わっていました。 公式ドキュメントの attr() でも undefined が

    stealthinu
    stealthinu 2018/07/03
    1.6に上がったときにattr()やprop()の修正が入っているためそのときに空文字→undefinedへの変更もあったぽいと。こういうのほんと結構困るよね。
  • jquery プラグイン/作成 - Qiita

    注意 この文章は、ここの文章をそのままコピペしたものです。 プラグイン作成に非常に有効なのでメモしました。 最新版はオリジナルの文章を読むことをお勧めします。 元文書: Plugins/Authoring - jQuery Wiki(t) jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です!プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3.

    jquery プラグイン/作成 - Qiita
    stealthinu
    stealthinu 2017/10/27
    jQueryプラグインの作り方のお作法。
  • 【jQuery】処理実行タイミング $(document).readyと$(window).load - Qiita

    $(function(){ //処理 }); jQuery(function(){ //処理 }); jQuery(document).ready(function(){ //処理 }); これらは全て同じタイミングで処理が実行される。 実行されるタイミングは「HTML(DOM)の読み込みが終わったとき」である。 HTMLが読み込まれる前はHTMLの操作ができないので通常はこの記述を行う。 画像などコンテンツ全体が読み込まれたとき $(window).load ただし、HTMLの読み込みが終わったタイミングでは、まだ画像などのコンテンツは読み込まれていない。 そのため、画像が読み込まれなければ正しく動作しないような処理を行う場合は$(window).loadを使用する。 イベントの順番 イベントの順番は下記のようになる。 ページの読み込みが始まる HTMLの読み込みが終わる $(docum

    【jQuery】処理実行タイミング $(document).readyと$(window).load - Qiita
    stealthinu
    stealthinu 2017/08/30
    document.readyはDOMが生成されたタイミングだが、window.loadは画像等のコンテンツが全部読み終わったタイミングで発行される。
  • jQuery.ajaxの代わりにSuperAgentを使う - Qiita

    脱jQuery AngularJSやVue.jsでは、DOMの直接操作は推奨されません。 そうなると、jQueryはAJAXでしか使わなくなります。 であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。 というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。 HTTPリクエストに特化したライブラリです。 Node.jsとブラウザ両方で使うことができます。 作者はExpress, Stylusの開発などで有名なTJです。 superagentの良さ かわいい。 ブラウザでの導入方法 まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。 https://wzrd.in/standalone/superagent@latest scriptタグでsuperag

    jQuery.ajaxの代わりにSuperAgentを使う - Qiita
    stealthinu
    stealthinu 2016/08/01
    jQuery.ajaxのかわりにそこだけをやるためのライブラリ。SuperAgent
  • You Don't Need jQuery - Qiita

    注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで

    You Don't Need jQuery - Qiita
    stealthinu
    stealthinu 2016/04/13
    タイトルとは逆で今でもいかにjQueryが便利かを説明する内容。jQueryを使わない場合にどう書くか、を調べるための逆引き辞書としても使える。
  • HTML-encoding lost when attribute read from input field

    I’m using JavaScript to pull a value out from a hidden field and display it in a textbox. The value in the hidden field is encoded. For example, <input id='hiddenId' type='hidden' value='chalk &amp; cheese' /> gets pulled into <input type='text' value='chalk &amp; cheese' /> via some jQuery to get the value from the hidden field (it’s at this point that I lose the encoding): $('#hiddenId').attr('v

    HTML-encoding lost when attribute read from input field
    stealthinu
    stealthinu 2015/05/21
    jQuery使ったHTMLエスケープ手法『$('<div/>').html(val).text()』は少し問題があるらしくAngularJSのsanitize.jsのencodeEntitiesメソッドだとUnicodeのことも考慮されてるし良いとのこと。
  • GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin

    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

    GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin
    stealthinu
    stealthinu 2015/04/28
    バリデーションを行ってくれるjQueryプラグイン。自分でルール書いたり専用関数呼び出したり出来るなど柔軟性が高い。
  • ReactをjQueryの数行に要約する | POSTD

    Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか? Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('

    ReactをjQueryの数行に要約する | POSTD
    stealthinu
    stealthinu 2015/04/22
    jqueryでreactっぽいものを書くためのものかと思ったがreactとは実はこういうものだよという理解を深めるためのものだった。逆にreactの良さがわかる。
  • onsubmit="return false" has no effect on Internet Explorer 7/8 (form is still submitted)

    I have a form that will be submitted by javascript code triggered in "onsubmit" of the tag. Works fine on all browsers - but not on IE7/IE8. What can I do? <form action="/dosomething.htm" method="GET" onsubmit="submitmyform();return false"> [...] <input type="submit" value="Go"> </form>

    onsubmit="return false" has no effect on Internet Explorer 7/8 (form is still submitted)
    stealthinu
    stealthinu 2015/04/03
    IE8でonsubmitにreturn falseしてもキャンセルしてくれない問題。jQueryでsubmitイベントに対してreturn falseならjQueryがクロスブラウザ対応してくれるため大丈夫。
  • h5Validate - The HTML5 Form Validation Plugin for jQuery

    h5Validate - HTML5 Form Validation for jQuery Download from Github By Eric Elliot, author: "Programming JavaScript Applications" (O'Reilly) Need to brush up? See "Learning JavaScript: Up to Speed in No Time" If you want to contribute, feel free to fork the project on Github. Best practice realtime HTML5 form validation for jQuery. Works on all popular browsers, including old ones like IE6. Regular

    stealthinu
    stealthinu 2014/12/24
    IE9以下にHTML5のrequiredに近いチェックを追加するためのjQueryプラグイン。入力が無かった場合はフォームのバックグラウンド色を変更してその場所をトップにスクロールする。
  • jQuery.post() | jQuery API Documentation

    jQuery.post( url [, data ] [, success ] [, dataType ] )Returns: jqXHR Description: Send data to the server using a HTTP POST request. version added: 1.0jQuery.post( url [, data ] [, success ] [, dataType ] )

    stealthinu
    stealthinu 2014/10/31
    やはりajaxだけじゃなくpostでも.doneメソッドチェーンが使えるのね。今ならこっちを使うべきなのかな?
  • jQuery 1.7、1.8 で非推奨になったイベントのメソッドと Ajax 関連のメソッドとイベント - Sarabande.jp

    jQuery: 大半のブラウザにおいて ready は DOMContentLoaded を指すFunction.prototype.apply、bind と $.proxy の比較event.originalEvent、jQuery.event.props.push、jQuery.event.fixHooks について条件分岐からメソッドチェーンやマップによるコールバックにjQuery 1.7、1.8 で非推奨になったイベントのメソッドと Ajax 関連のメソッドとイベントメソッドチェーンもしくはプロパティ表記を使って複数のイベントハンドラを指定するホーバーで削除ボタンの表示をコントロールするmouseenter と mouseover のちがいjQuery のイベントメソッドのなかでの return false と e.preventDefault() のちがい9月1日追記: on メ

    jQuery 1.7、1.8 で非推奨になったイベントのメソッドと Ajax 関連のメソッドとイベント - Sarabande.jp
    stealthinu
    stealthinu 2014/10/31
    ajaxで成功した時とかのコールバック関数指定が.successとかのメソッドでメソッドチェーンになってる。知らんかった…
  • あなたがReactを使うべき理由 - mizchi's blog

    最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか? 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue

    あなたがReactを使うべき理由 - mizchi's blog
    stealthinu
    stealthinu 2014/09/03
    『HTMLを毎回同じ状態を復元する為に0からビューを構築するとものすごく効率が悪い』だからReactでは自動的に差分だけを操作するDOMを生成して書き換えてくれるらしい。ただjQueryとか直接操作系との併用は不可。
  • selectorの存在確認に便利な`$(selector).exists()`を実装しておく - Qiita

    jQuery.fn.exists = function(){return Boolean(this.length > 0);} 複数個生成したくないDOMを追加する際にvalidateするときとかに使う。 formがsubmitされた際のalert表示を複数個追加したくなかったので、こういうのほしかったのです。 サンプル jQuery.fn.exists = function(){return Boolean(this.length > 0);} // <中略> if ($(selector).exists()) { // selectorが既に存在してた場合の処理 } その他 追記1(2014/03/13 13:52) これ、以下でも実現できるし、意味的にはこっちの記述も良い気がするけど、いろいろと冗長... 処理的に冗長だし、条件によっては一部結果に不備が出るようです。詳細は以下のコメ

    selectorの存在確認に便利な`$(selector).exists()`を実装しておく - Qiita
    stealthinu
    stealthinu 2014/08/15
    jQueryでセレクタで書いたものが存在しているかを確認するためのメソッド。これはスマート。
  • jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」

    jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js (jquery-latest.js を使うな)」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、番環境 (公開している Web サイト) で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js : Official jQ

    jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
    stealthinu
    stealthinu 2014/07/04
    こないだのjquery-latest.jsが読めなくなった問題のこと取り上げられてる。んで、jquery-latest.jsを使わないで、とのこと… すんません使わないようにします…
  • 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合

    結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
    stealthinu
    stealthinu 2014/06/12
    jquery deferred使う例。単に非同期処理を綺麗に書けるって使い方だけじゃなく、処理の「成功」「失敗」インターフェイスの統一が出来る、という説明がなるほどだった。
  • JSONPで悩むある程度の人々へ

    JSONPって、クロスドメインでデータをとってこれて、Web APIとかはこれで実装されているんでしょ。 なんとなくわかる気がするんだけど、自分で作ってみるとなんかうまく動かない。 あるいはその手前で、どういう風に実装していいかわからない。 とくに自分がAPIを提供する側になると、よけいよくわからない。 Wikipediaの解説なんか、わけがわからないよ。 こんな感じの方はいませんか。 というか、ちょっと前の自分はこんな感じでした。 いろんなサイトを調べまくって、ある程度わかってきた気がしますので、後のためにここに残しておきます。 ああ、あのころの自分に教えてあげたかった。 まずJSONって何さ? JSONPにたどり着いた人はJSONのことは知っていると思いますから、簡単に。 こんな感じの「テキスト」のことですよね。 { "key1": "value1", "key2": "value2"

    stealthinu
    stealthinu 2014/05/02
    なんでjsonpだとapplication/javascriptなんだろっていうかそもそもなんで関数名付けただけでクロスサイト実行可能なんだと思ってぐぐってわかりやすかったのがこちら。JSONPは呼び方が全く違うのね。
  • jQueryのメモリーリークの傾向と対策 — KaoriYa

    Web開発にとても便利なjQueryですが、 実はメモリーリークを誘発しやすい構造であることは あまり知られていないようです。 記事ではメモリーリークが発生する傾向と対策を紹介します。 皆さんjQueryは使ったことありますよね。Webでの開発ではとても便利で、ほぼ必須と言っても過言ではありません。しかしながらこのjQueryはメモリーリークを誘発しやすい構造であることはあまり知られていません。 GCのあるJavaScriptでメモリーリークが発生するとは何を言っとるんだ、と思われる向きもあるやもしれません。しかしGCがあっても、もう使わなくなったオブジェクトを配列やテーブル(Object)にしまいこんでいて、それを回収するタイミングが存在しなければ積もり積もってメモリを圧迫する、メモリーリークとなりうるというのは想像に難くないでしょう。jQueryで起こりうるメモリーリークはそのような

    stealthinu
    stealthinu 2014/04/17
    jqueryは「jqueryオブジェクト」を自分で管理してるからDOMを直で消しちゃうとそこで存在しないオブジェクトが参照に残り続けると。なので明示的にjqueryに教えてあげるという手法。
  • Welcome to Convergence Services - HRMS

    stealthinu
    stealthinu 2014/04/01
    IE8対応のFormData使わないajaxなファイルアップロードはたぶんjQuery-File-Uploadを使うのが良さそうなのだが修正が大きくなりそうなのでこのパッチ的な対応を試してみる。