問題タブ [document-ready]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - JQuery:なぜOnClickイベントではなく控えめなJavaScript /ドキュメントレディ機能なのですか?
JQueryを見始めたところです。現在、WebアプリケーションにAJAXはありません。
HTML内の既存のJavaScriptは次のようになります。
[追加]と[検索]のボタンが表示されます。検索の場合、フォームを送信する必要があります。MyFormSubmit()を使用して、データを検証し、ページに視覚効果を追加してから、データをPOSTします。
[検索]ボタンのにクラスまたはIDを追加すると、JQueryで次のように記述できます。
JQueryを理解する「初心者」の段階では、なぜこのようにするのかわかりません。
私の古い方法は、オブジェクトの近くのメソッドを識別します。ユーザーがボタンを押す前にJSがロードされていない可能性があります(そこにありますか?JSのロードはページの上部にあります)。
JQuery Document Readyメソッドは、ドキュメントが読み込まれるまでアクティブ化されませんが(JSがすべて存在し、実行の準備ができていることを保証しますか?)、コードをHTMLファイルの別の部分に移動します。 HTMLソースにMyButtonArrayDIVが表示されますが、どのオブジェクトにメソッドがあり、どのオブジェクトにメソッドがないかはわかりません。
私の選択肢が何であるか、そして私が注意すべき利点/落とし穴を理解するのを手伝ってくれませんか?
編集:クラス「LightBoxThumb」のサムネイルがクリックされたときに表示されるLightBoxなどのDOM操作では、控えめなJavascriptが使用されることに満足しています。
しかし、特定のアクションを持つボタンには、その方法を適用する必要があると自分自身を説得するのに苦労しています。(私は確かに「他の場所」への単一の関数呼び出し以外のコードをボタンに配置しませんが、そのボタンが何をするかについての私の最善の手がかりであり、控えめなJavascriptのレイヤーはそれをはるかに難しくする可能性があります決定する。)
Edit2-承認された回答
私はラスカムズの答えを取りました。控えめなJavascriptについて、それをいつどのように使用するかを理解するのに役立つ方法で説明しています。
今のところ(経験が増えると変更される可能性があります)、デバッグが容易になると感じたため、オブジェクトに対する単一の変更されないアクションのOnClickイベントを使用し、問題が発生したかどうかを診断します。 。見出し列をクリックして並べ替えることができるテーブル上のZebraStripes(およびそのタイプの状況)の場合、控えめなJavascriptアプローチの利点を確認できます
ラスの最後のコメントは特に役に立ち、ここで繰り返されました:
「@Kristen-そうです、多くのプログラミングトピックのように、複数のアプローチがあり、人々は彼らの信念を熱心に支持します!単一のボタンの単一の方法について話している場合、私はあなたがどこにいるのかを完全に理解していますから来ています...
複数の要素に対する同じ関数呼び出し、異なるメソッドに対する異なる関数呼び出しなど、多くのJavaScriptについて話している場合、インラインアプローチと目立たないアプローチを組み合わせるのは難しいと思います。どちらか一方のアプローチを採用する方が良い」
jquery - jQuery:IEでは$(document).ready()が遅すぎる
ページがレンダリングされる前に要素を非表示にするための好ましい方法は何でしょうか?$(document).ready()はFirefoxで問題なく動作しますが、(サーバーへの接続がこれで大きな問題になるようです)InternetExplorerでは少し遅れることがあります。要素が表示され、ワードの直後に非表示になります。つまり、$(document).ready()のコードが実行される前にページがレンダリングされます。
今、私は同様の問題についてSOに関して以前に尋ねられた質問を調べてきましたが、これらは1.3.1で解決されたと報告されています。ただし、私はjQuery 1.3.2を使用しており、この動作を経験しています(IE6、IE7、およびIE8)。
考えられるオプションの1つは、デフォルトでcssを使用して非表示にすることですが、これにより、JavaScriptが有効になっていることに依存して表示されるようになります。私はまだそれをするつもりはありません。
また、JavaScriptを/ bodyタグのすぐ上に移動しようとしましたが、これも役に立たないようです。
javascript - DOMのやり過ぎの準備ができているかどうかをチェックしていますか?
Webテクノロジーを使用してデスクトップアプリを開発するためのプラットフォームを開発しています。そうする過程で、私はプラットフォームに統合するブラウザでいくつかのドキュメント/オンレディ機能を動作させるように努めてきました。これが、私が以前にSOでこの質問をした理由です:javascript-framework-that-primally-provides-just-document-onready-functionality
しかし、私は自分の選択したブラウザ(shush、その秘密;)を取得して、上記の唯一の答えによって提案された機能をうまく利用することができませんでした。だから、何がうまくいくのかを理解しようとしているときに、私は次のことに気づきました。
以下のコードは、1ミリ秒のタイムアウト後に関数を実行するだけで、このブラウザー内で同じ効果があります。大きな画像の読み込み中にDOMに書き込むことができます。これは私にとって究極の解決策ではないかもしれません。このブラウザのJavascriptエンジンによってDOM機能がどのように実装されるかに固有の何かを書くかもしれません。
それでも、これが標準のブラウザーで機能するかどうかを確認することにしました。驚いたことに、機能します。それに照らして、私の質問:さまざまなJavascriptフレームワークによって提供されるdom / readiness機能のさまざまな実装は、単にやり過ぎですか?
編集/さらなる考え私の前の関連する質問への回答によってリンクされたページには、「FirefoxとOperaの場合、イベントタイプの簡単なチェックでDOMContentLoadedかどうかが判断されます。SafariとIEはドキュメントの準備完了状態をチェックします... 。最後に、他のすべてが失敗した場合、onloadイベントが後部を起動します。」おそらく、上記のsetTimeoutに似たsetIntervalは、最後の手段としてonloadに依存する前に、最後から2番目のアクションである可能性がありますか?いずれにせよ、私が選択した埋め込み可能なブラウザーでは、DOMContentLoadedイベントもdocument.readyStateもサポートされていないようです。
javascript - Google がアンチパターンと見なす DOMContentReady の使用
Google Closure ライブラリ チームのメンバーは、DOMContentReady イベントを待機することは悪い習慣であると主張しています。
簡単に言うと、DOMContentReady (またはさらに悪いことに load イベント) を待ちたくないということです。これは、ユーザー エクスペリエンスの低下につながるからです。すべての DOM がネットワークからロードされるまで、UI は応答しません。そのため、できるだけ早くインライン スクリプトを使用することをお勧めします。
彼らはまだこれに関する詳細を提供していないので、IEでOperation Abortedダイアログをどのように処理するのだろうか. このダイアログは、DOMContentReady (またはロード) イベントを待機することがわかっている唯一の重要な理由です。
- 他の理由を知っていますか?
- 彼らはその IE の問題にどのように対処していると思いますか?
jquery - jQuery: ドキュメントの準備ができて、私の要件に対しては早すぎます
私は写真を中心としたサイトを開発しています。このサイトの一部の領域では、正しく機能するために画像の寸法に基づく計算が必要です。私が見つけたのは、ドキュメントの準備が整っているのが早すぎて、その結果、GUI が不安定な動作をしていることです。
ドキュメントの準備ができている関数を削除し、適切な window.onload 関数に置き換えました。これは、正しく読み取った場合、この関数は画像が完全に読み込まれるまで起動しないためです。
私の質問は、これにより問題が発生しますか? おそらく見逃した他の解決策はありますか?
助けてくれてありがとう!!
javascript - イベント ハンドラを使用せずに、DOM が読み込まれるとすぐに特定のクラスを持つ要素に対して関数を実行する
特定のクラスを持つすべての要素に対して実行したい単純な関数があります。DOM がロードされるとすぐにこの関数を実行したい。イベントハンドラーではありません。
以下は、ホバーなどのイベント ハンドラーで実行されるコードです。DOM が読み込まれるとすぐに実行するにはどうすればよいですか?
displayname.alignSpans();
動作しません
javascript - jQueryにNotReadyFunctionはありますか?
ドキュメントの準備ができていないかどうかを確認し、jQuery で定期的に関数を実行することはできますか?
単純に次のようなことを達成したいと思います:
このようなことを達成するためにjQueryに組み込み関数はありますか?
jquery - JQuery Accordian: ヘッダー リンクについて
私はJQueryを学ぼうとしていますが、プロセスを理解するのに苦労しています。いくつかの投稿を読みましたが、javascript の理解が不十分なことが妨げになっているのかもしれませんが、学びたいと思っています。私の目標は、メニュー システムにアコーディオン UI を使用することです。メイン メニュー項目 ( #sidebar ul.accordion li a .opener .selected ) が、サブ メニュー ( div.slide ul li a ) の「オープナー」としてだけでなく、リンクとしても機能するようにします。以下に HTML、CSS、および JQuery スクリプトをリストしましたが、私の質問は次のとおりだと思います。
Q: 私の問題は、JQuery の「header: "opener"」または「event: "click"」、または「click(function(){ })」の必要性ですか?
どんな助け(教育)も大歓迎です。
次のHTMLメニュー構造があります...
私は次のCSSを持っています...
次のjqueryスクリプトがあります...
jquery - jQuery用のGoogleAJAXライブラリCDN
SWFObject、jQuery、GoogleMapsAPIが必要なページがあります。私は使用することの利点を使用できると思いました:
しかし今、私はどこかで読んだ(http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/)使用する必要があります
$(document).ready()..の代わりにこれは本当ですか?
jquery - JQuery を使用した特定の要素 (ID による) の作成を監視しますか?
ユーザーが何らかのアクションを開始したときに、swf を div タグにロードします。div タグの ID は ですcontainer
。埋め込まれた SWF のタグ ID は になりますswf_content
。swf_content
ロード時にそのタグに変数を設定できるようにしたい。次のようなものです:
任意のユーザーアクションまで読み込まれないと仮定すると、これを行う最善の方法は何ですか?