-
ECMAScriptのjsの基本的な文法
-
BOMブラウザ関連のブラウザーオブジェクトモデル、
-
DOMドキュメントオブジェクトモデルの操作HTML
GOOD
ウィンドウオブジェクト
JSは、トップレベルのオブジェクト、直接省略ウィンドウを使用することができるグローバル・オブジェクト・ウィンドウのプロパティおよびメソッドである
ブラウザ:ウィンドウ
BOM関連するAPIを、基本的にはウィンドウオブジェクト
BOM関連のAPI
警告()のwindow.alert();ポップ
;プロンプト()にwindow.prompt()は、ユーザ入力情報ポップ受け入れ
確認()チェックボックスの
戻り値を:ユーザが確認するためにクリックしたときに、trueを返す、falseを返しますをキャンセル]をクリックします
履歴オブジェクト
履歴オブジェクト、主に保存、ブラウザに関連する履歴情報
方法3
さらに前history.forward()
ポストhistory.back()バックステップ
)(history.go
ゴー(1)をさらに前に
進む(0)リフレッシュ
行く後(-1)ステップを取ります
ロケーション・オブジェクト
ブラウザのアドレスバー情報を保存:現在のウィンドウのアドレスを取得し、あなたは現在のウィンドウのアドレスを変更することができます
href属性は、現在のアドレス(フルアドレス)ウィンドウを保持
、href属性を取得するために、現在のアドレスは、href属性を変更取得、ページジャンプ
リフレッシュするには、reload()メソッドを
プロパティに関するいくつかの基本的な情報を思い出すことができないナビゲータブラウザレコード
ブラウザについてuserAgentに記録する基本的な情報
-現在のブラウザの名前を取得navigator.appName`
`ブラウザの現在のバージョン番号を取得navigator.appVersion` -
現在のコンピュータのオペレーティングシステムを取得navigator.platform` -`
openメソッドcloseメソッド
窓の開閉
オープン(URL、ターゲット、スタイル)
三つのパラメータ:• 1、URL。• 2、デフォルトオープン_self _blank _blank • 3、外観。• 「幅= 300、高さ= 300、左= 300、トップ300 = " リターン:開いているウィンドウオブジェクトのページ([ウィンドウ])に近いデフォルトのウィンドウが存在しない場合はページのwindowオブジェクトを閉じ、現在のページです
ブラウザウィンドウのサイズに関係
- window.innerHeight -ブラウザウィンドウの内側の高さ
- window.innerWidth -スクロールバーを含むブラウザ・ウィンドウの内側の幅
可視領域の幅と高さ:
document.documentElement.clientWidth可視領域は、スクロールバーの幅を含まない
document.documentElement.clientHeightよいですビューポートの高さは、スクロールバーが含まれていません。
ローリング距離
他のブラウザにdocument.documentElement.scrollTop IE
document.documentElement.scrollLeft //横
document.body.scrollTop低クロムバージョン
スクロールイベント
マウスホイールをスクロール、スクロールバーまたはクリック
window.onscroll =関数(){ }
loadイベント
ページのloadイベント:ロードされたトリガの後にページのHTML / CSSリソースを待ちます
注意:
htmlファイルが数回あれば、以下は上記でカバーされますが、一度だけ表示されます
使用シナリオ:
JSが頭の中で書かれている場合、すべてのJSコードは、window.onloadイベントに投げ込まれるべき、または要素を取得することはできません
JUDGMENT
ドキュメントオブジェクトモデルドキュメントオブジェクトモデルの操作HTML
文書には、最大のターゲットDOMであります
DOMオブジェクト:タグ内のJS、オブジェクトは、DOMをいいます
要素を取得します
-
IDによって要素を取得します。
document.getElementById( "IDの名字")
戻り値:DOMオブジェクト
-
タグ名で要素を取得します。
document.getElementsByTagName( "タグ名")
戻り値:クラスArray
注意:
文書は、その祖先要素は、祖先の範囲内のいくつかのタグを行くことができる限り、他のオブジェクトのDOMの前にあってもよいです
利点:さらに範囲を狭めます
-
IE8は、クラス名で、次の要素を取得するための要素をサポートしていません。
document.getElementsByClassName( "クラス值")
戻り値:クラスArray
注:原稿の表面はまた、先祖の範囲内であれば、その祖先要素は、ラベルの一部を取得することができるように、他のオブジェクトのDOMとすることができます
利点:さらに範囲を狭めます
新H5セレクタ
document.querySelector( "CSSセレクタ")
オブジェクトは、DOMで返し、最初に一致した要素がすぐに返される検索
document.querySelectorAll( "CSSセレクタ")
すべての資格要素、クラスの配列を返すの数を検索
要素は、操作属性
要素の属性を取得します• 要素.getAttribute(「プロパティ名を」); ***** 要素のプロパティ設定• 要素.setAttribute(「属性名」、値);理解プロパティの要素を削除します • 要素.removeAttributeは(「属性名」);学ぶDOMオブジェクトは、のベース文法オブジェクトを含むオブジェクトであり得る:要素がname属性要素[「属性名が」] 設けられている。要素の属性=値を要素の[「属性名」] =値
{
nodeNameを:「DIV」、
innerHTMLプロパティ:「コンテンツ」、
クラス名:「クラスプロパティ」、
スタイル:{ } } DOMオブジェクト:HTMLのカスタムプロパティでは、離れてDOMからで、属性名、オブジェクト名を通過することはできません。 、使いやすさのためにJS、のgetAttributeの包装方法()カスタムプロパティを取得することができます
概要:
要素の属性を取得
要素の属性がすでに得られてもよい要素のプロパティもJSカスタムで得ることができた需要の90%を属性。
要素の[プロパティ]タイム%を持つプロパティの変数である5。
のgetAttribute()ユニバーサルHTMLでカスタムは、それが5%使用する属性
:提供=要素の属性値を要素[特性]が値= 要素.setAttribute(「属性」の値)
入力取得と要素を設定
classNameプロパティを設定することができます取得することができます
要素が取得.className
要素.className =値
コンテンツの取得および設定要素
テキストコンテンツ
innerTextは、ラベルが含まれていないテキストのみが含まれています
HTMLコンテンツ
innerHTMLのは、ラベルが含まれています*
スタイル要素を取得します。
JSインラインの形でスタイル要素を設定することです
な理由:
の効果持っている必要があります1、連合の中で一番高い優先度、スタイルを追加するjsのコードを確保するために、
現在のラベルに対してのみ有効、2を、全体的なコードは影響しません
。<divのスタイルを= "幅:200pxの、高さ:200pxの"> </ div>
{
スタイル:{ 幅: "200pxの"、高さ: "200pxの" } } 要素.style.css属性名= "値" 注:JSが許可されていません-多くの属性がありますCSSのコネクタの背景色-webkit-変換-の原点へ-こぶ、可変要素.style.backgroundColorの要素.style.WebkitTransformOrigin =「センターセンターは、」インラインスタイルの値を取得前提を:インラインによって提供されている必要がありますオーダーのプロパティのCSSの値が。そうでなければ、プロパティ値は、元素.styleではありません
どのように結合事象の要素に
JS
イベント名=関数().on要素{
イベント関数
この関数のイベントはイベントソースへのポインタである
} 関数fn(){} FN =イベント名.on素子; //ない括弧
イベントでは、アレイとアレイとの間の1対1の対応になります
ループのためのカスタムプロパティを使用します
VAR ARR = [1、2、3]。
用(VAR i = 0; I <btns.length; iは++){
btns [i]は.num = I。
btns [i]は.onclick =関数(){
アラート(this.num)。
}
}
BOM:
歴史
LOCATION
エリアの幅と高さの表示
からスクロールを
ローリングイベント
loadイベントの
DOM:日は、しなければなりません