[B! jquery][javascript] stealthinuのブックマーク

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

stealthinu 2020/10/19

jQueryが読み込み失敗しているか確認する方法。typeof jQueryでundefinedになってるか見る。2020年の今更ながらの話なんだけども。 ●javascript ●jquery

リンク

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 2018/07/03

1.6に上がったときにattr()やprop()の修正が入っているためそのときに空文字→undefinedへの変更もあったぽいと。こういうのほんと結構困るよね。

リンク

jquery プラグイン/作成 - Qiita

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

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

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

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は必要ない﹂というタイトルで

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 & cheese' /> gets pulled into <input type='text' value='chalk & 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

stealthinu 2015/05/21

jQuery使ったHTMLエスケープ手法『$('<div/>').html(val).text()』は少し問題があるらしくAngularJSのsanitize.jsのencodeEntitiesメソッドだとUnicodeのことも考慮されてるし良いとのこと。

リンク

GitHub - posabsolute/jQuery-Validation-Engine: jQuery form validation plugin

jQuery.validationEngine v3.1.0 Looking for official contributors This project has now been going on for more than 7 years, right now I only maintain the project through pull request contributions. However, I would love to have help improving the code quality and maintain an accepta ble level of open issues. Summary jQuery validation engine is a Javascript plugin aimed at the validation of form fiel

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('

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>

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 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 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 メ

stealthinu 2014/10/31

ajaxで成功した時とかのコールバック関数指定が.successとかのメソッドでメソッドチェーンになってる。知らんかった…

リンク

あなたがReactを使うべき理由 - mizchi's blog

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

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︶これ、以下でも実現できるし、意味的にはこっちの記述も良い気がするけど、いろいろと冗長... 処理的に冗長だし、条件によっては一部結果に不備が出るようです。詳細は以下のコメ

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

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の仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合

stealthinu 2014/06/12

jquery deferred使う例。単に非同期処理を綺麗に書けるって使い方だけじゃなく、処理の「成功」「失敗」インターフェイスの統一が出来る、という説明がなるほどだった。

リンク

JSONPで悩むある程度の人々へ

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

stealthinu 2014/05/02

なんでjsonpだとapplication/javascriptなんだろっていうかそもそもなんで関数名付けただけでクロスサイト実行可能なんだと思ってぐぐってわかりやすかったのがこちら。JSONPは呼び方が全く違うのね。

リンク

jQueryのメモリーリークの傾向と対策 — KaoriYa

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

stealthinu 2014/04/17

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

リンク

Welcome to Convergence Services - HRMS

stealthinu 2014/04/01

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

リンク

はてなブックマーク

タグ

関連タグで絞り込む (19)

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

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス