プロの JavaScript テクニック学習ノート_JavaScript スキル-jsチュートリアル-php.cn

グローバル変数は Window オブジェクトのプロパティの一部です。 例:

コードをコピーします コードは次のとおりです: var test = 'test'; alert(window.test); ブラウザの HTML レンダリングと操作のおおよそのシーケンス: HTML 解析が完了しました 外部スクリプトとスタイルシートがロードされました スクリプトがドキュメント内で解析され実行されました HTML DOM が完全に構築されました 画像と外部コンテンツがロードされました Web ページがロードされました すべての主要ブラウザ これらはすべて innerHTML 属性を実装していますが、統一された標準がないため、多かれ少なかれ奇妙なバグが存在します。

Mozilla ベースのブラウザは、innerHTML 宣言で 要素を返しません。 IE によって返される要素文字はすべて大文字です。 要素内の HTML 属性でのみ使用できます。 XML DOM ドキュメントで使用される場合、DOM ドキュメントの一部は null 値のみを返します。 要素に指定された属性があるかどうかを確認します:

コードをコピーします コードは次のとおりです: function hasAttribute(elem, name) { return elem.getAttribute(name) != null;

JavaScript イベントは 2 つのフェーズで実行されます。 : キャプチャとバブル。

GET リクエストには、破壊的な副作用 (メッセージの削除など) があってはなりません。

クリック、マウスオーバー、マウスアウトのイベントが発生するあらゆる機会に、マウスにバインドされていないオプションのイベントを提供することを検討してください。

コードをコピーします コードは次のとおりです。 onmouseout –>onblur onmousedown –>onkeydown onmouseup –>onkeyup onclick –>onfocus

例> コードをコピーします

コードは次のとおりです。 var ax = document.getElementsByTagName('a'); for ( var i = 0; ax.length; i ) { ax[i].onmouseover = ax[i].onfocus = function(){ this.style.backgroundColor = 'blue'; 🎜>}; ax[i].onmouseout = ax[i].onblur = function(){ this.style.backgroundColor = 'white' }; >

静的配置: これは要素を配置するデフォルトの方法であり、単にドキュメントの通常の流れに従います。要素が静的に配置されている場合、top 属性と left 属性は効果がありません。

position:static;top:0px;left:0px; 相対配置: この形式の配置は、特に指定がない限り、要素がドキュメントの通常のフローに従い続けるという点で静的配置と非常によく似ています。 。ただし、top または left プロパティを設定すると、要素は元の (静的) 位置に対してオフセットされます。

position:relative;top:-50px;left:50px; 絶対配置: 絶対配置された要素は、ページ レイアウトの通常の流れから完全に外れ、最初の要素に対して相対的に配置されます。非静的配置 祖先要素によって表示されます。そのような祖先要素が存在しない場合、それはドキュメント全体に関連します。 position:absolute;top:20px;left:0px; 固定位置: ブラウザ ウィンドウを基準にして要素を位置決めします。要素の上端と左端を 0 に設定すると、要素はブラウザの左上隅に表示され、ブラウザのスクロール バーのドラッグが完全に無視され、常にユーザーの視界に表示されます。

position:fixed;top:20px;left:0px; 開発予約フォールバック (正常に機能低下): 何らかの形式の動的なインタラクションをページに追加すると、一部のユーザーが疎外される可能性があります。 JavaScript または CSS が無効になっている場合でも、Web アプリケーションは基本的な使いやすさを備えている必要があることに常に注意してください。