GOOD
BOMは、コア・オブジェクト・ウィンドウであるので、主に、窓と窓の間の通信を管理するために使用されるブラウザのオブジェクトモデルを指します。
ウィンドウオブジェクト
すべてのブラウザでは、ブラウザのウィンドウを表し、ウィンドウオブジェクトをサポートしています。
ブラウザのウィンドウではJavaScriptグローバルオブジェクト、関数、変数やメソッドのすべては、ウィンドウ内のオブジェクトのプロパティとなり、トップレベルのオブジェクトである、窓を呼び出し、「ウィンドウ」では省略されてもよいです
ウィンドウの一般的な方法
- window.innerHeight //ブラウザウィンドウの内部の高さを取得します
- window.innerWidth //ブラウザウィンドウの内側の幅を取得します
- window.open（）//新しいウィンドウが開きます
- window.close（）//現在のウィンドウを閉じます
ウィンドウの子オブジェクト
navigatorオブジェクト
window.navigatorブラウザオブジェクト、このオブジェクトは、ユーザーのブラウザ情報、ウィンドウによって決定することができます。省略することができます
- window.navigator.appName // Webブラウザフルネーム
- navigator.appVersion // Webブラウザのベンダーとバージョンの詳細
- navigator.userAgent //クライアントほとんどの情報の
- ブラウザがnavigator.platformで実行されている//オペレーティングシステム
画面オブジェクト
window.screenの画面オブジェクト
- 利用可能screen.availWidth //画面幅
- screen.availHeight //利用可能な画面の高さ
履歴オブジェクト
window.historyオブジェクトは、オブジェクトは、履歴ブラウザが含まれています
- history.forward（）//フォワード1ページ
- history.back（）//戻る1ページ
ロケーション・オブジェクト
window.locationのは、現在のページのURLを取得するために使用されるオブジェクト、およびリダイレクト
- LOCATION.HREFは//現在のページのURLを取得します
- LOCATION.HREF =「URL」指定したURLアドレスへ//ジャンプ
- location.reloadは（）//ページをリロード
ポップアップボックス
警告ボックス、チェックボックス、バルーン：JavaScriptでポップアップボックスの3つのタイプがあります。
- 警告（「これは警告ボックス、唯一の確認ボタンで、あなたは他の操作を実行するには、[OK]をクリックする必要があります。」）
- 確認（「これは確認ボックス、確認です - trueを返し、2つのボタン-falseキャンセル、または受諾メッセージを確認するために使用することができます」）
- （ - 、「キャンセル - リターンヌル2つのボタン」「または戻り値入力これは、プロンプトボックスで、値、確認を入力してください」）プロンプト
タイミング
JavaScriptを使用することにより、我々は時間の一定の間隔で後に時限式イベントでコードを実行することができます
JSのVARトン=のsetTimeout（ "JS声明"、MS）//離れXXミリ秒、文の実行
clearTimeout（「可変タイミング」）//セットクリアは、setTimeoutメソッドをキャンセルします
VARトン=のsetInterval（「JS声明」、ミリ秒単位の時間間隔）//すべてのXXミリ秒、文を実行JS
clearInterval（「可変タイミング」）//セットクリアでのsetIntervalをキャンセルします
<script>
// setTimeout
var t=setTimeout(function () {alert("提示框出来啦");},3000)
// 清除setTimeout
clearTimeout(t)
// 每隔3秒就执行一次相应函数
var t2 = setInterval(function(){alert("提示框出来啦");}, 3000)
// 取消setInterval设置
clearInterval(t2);
</script>JUDGMENT
DOMは、標準的な方法のHTMLドキュメントにアクセスして処理を定義するドキュメントオブジェクトモデルを指します。HTML文書は、各コンポーネントは、ツリーのノードを表します。
ノードが分けられる：文書ノード、要素ノード、属性ノード、テキストノードは、これらのノードを介してHTMLを制御し、変更することができます
ラベルを探します
ダイレクト検索
- ラベルID //取得値に応じてのdocument.getElementById（「id値」）
- document.getElementsByClassName（「クラス値」）//クラス属性の取得は、配列を返します
- document.getElementsByTagName（「タグ名」）//は、配列を返す、ラベルコレクションに応じてタグ名を取得します
間接検索
- parentElement //親ラベル要素
- すべての子どもたち//サブラベル
- firstElementChild //最初の子タグ要素
- lastElementChild //最後の子要素タグ
- nextElementSibling //次の兄弟要素タグ
- label要素に//兄弟をpreviousElementSibling
ノードの操作
ノードを作成します
構文：のcreateElement（タグ名）
例：
var divEle = document.createElement("div");
ノードの追加
構文：親要素.appendChild（newnodeは）//最終的に子ノードを追加します
構文：親要素.insertBefore（newnode、ノード）ノードの増加の前に//ノード。
[ノードの削除
- 親要素.removeChild（ノードが削除される）//削除したい要素を取得し、親要素を呼び出すことによってメソッドを削除します。
交換用ノード
- 親要素.replaceChild（newnode、ノード）。
属性ノード
テキストノードの値を取得します。
var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTMLテキストノードの値
var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>"属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src=".."操作の値を取得します。
構文：elementNode.value
var iEle = document.getElementById("i1"); //input console.log(iEle.value); var sEle = document.getElementById("s1"); // select console.log(sEle.value); var tEle = document.getElementById("t1"); // textarea console.log(tEle.value);
クラス操作
- クラス名//取得すべてのスタイルクラス名（文字列）
- classList.remove（CLS）//指定されたクラスを削除します
- classList.add（CLS）//クラスの追加
- classList.contains（CLS）// trueを返し存在は、存在するかどうかを決定し、そうでない場合はfalse
- classList.toggle（CLS）//削除が存在するかどうかを確認、または追加
CSS指定された操作
- CSSプロパティの一般的なスタイルの水平線で直接使用されていません。属性名を。
obj.style.margin
obj.style.width
obj.style.left
obj.style.position- 水平線の後の最初の文字を含む水平線のCSSプロパティは大文字行うことができます。以下のような：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamilyイベント
一般的なイベント
- ユーザーがオブジェクトをクリックしたときのonclick //イベントハンドラが呼び出されました
- れるondblclick //ときに、ユーザーがオブジェクトをダブルクリックしたときにイベントハンドラが呼び出されます
- ONFOCUS //要素がフォーカスを取得します
- onblur //要素がフォーカスを失いました
- ONCHANGE //ドメインコンテンツが変更されました
- onkeydownを// Aのキーボードのキーが押されました
- onkeypressでは// Aのキーボードのキーを押すと解除されます
- onkeyupの//キーボードのキーが解放されます
- onloadイベント//ページや画像完成読み込み
- れるonmousedown //マウスボタンが押されました
- れるonmousemove //マウスを移動させ、
- れるonmouseout //マウスが要素外に移動されます
- 要素の上のonmouseover //マウス
- テキストボックス内のテキストが選択されている場合ONSELECT //が発生します
- onSubmit //確認ボタンは、フォームを使用してオブジェクトをクリックします
結合事象のJSの道
モード1は推奨されません
<button onclick="func()">按钮</button>モード2は、動的結合の方法を見つけるためにラベルを使用することをお勧めします
function func() { alert('我被点击了') } var i1Ele = document.getElementById('d1'); i1Ele.onclick = function () { // i1Ele标签被点击之后 你能做的事 func() }
`` `
状況を解決するためのJSコードは、エラーの動作を反映しています
- 1つの実施形態
物体待っwindow.onloadイベントを使用しては実行する前にロード
xxx.onloadを=関数（）{} - モード2
下部の体で書かれたあなたのJSコードに直接
jQueryの
jQueryの紹介
jQueryのは、より簡単に扱うことができ、軽量、マルチブラウザの互換性のJavaScriptライブラリで、JavaScriptプログラミングを簡素化
同様のPythonモジュール
jQueryの使い方
最初のインポート、再使用はしなければなりません。以下のようなローカルファイル、または文書のjQueryの紹介：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQueryの構文構造
jQueryの（ 'セレクタ'）.action（属性）
$（ 'セレクタ'）.action（属性）
ラベルを探します
基本的なセレクタ
IDセレクタ：
$("#id")タグセレクタ：
$("tagName")クラスセレクター：
$(".className")を使用しました：
$("div.c1") // 找到有c1 class类的div标签セレクタのすべての要素：
$("*")複合セレクター：
$("#id, .className, tagName")レベルセレクタ
xおよびyは任意選択であってもよいです
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y