ディレクトリ

まず、父と息子のページ通信
二、ウィンドウオブジェクト
- 一般的な方法1.ウィンドウオブジェクト
  - （1）window.open（）
  - （2）はwindow.close（）
- 2.ウィンドウの子オブジェクト
三、BOM操作
- 1. BOM一般的操作法
四、DOM操作

まず、父と息子のページ通信

ポップJSコードで、メインページとサブページ間の通信

二、ウィンドウオブジェクト

Windowオブジェクトは、ウィンドウオブジェクトが他のオブジェクトのほとんどの共通の祖先であるため、ウィンドウオブジェクトのメソッドとプロパティを呼び出すとき、あなたは、ウィンドウオブジェクトへの参照を省略することができ、トップターゲットクライアントのJavaScriptの一つです。例えば：window.document.write()それは省略することが可能document.write()に：。（ウィンドウを書き込んだ後、次のBOMおよびDOM操作が省略されています）
ウィンドウオブジェクト、ほとんどのブラウザはウィンドウオブジェクトをサポートし、彼はブラウザのウィンドウと述べました。
BOMおよびDOM操作は、ウィンドウオブジェクトによって運営されています。

一般的な方法1.ウィンドウオブジェクト

（1）window.open（）

新しいウィンドウを開きます。

（2）はwindow.close（）

現在のウィンドウを閉じます

2.ウィンドウの子オブジェクト

ウィンドウオブジェクトは、子ウィンドウは、このキーは、これらのオブジェクトを開始する点に窓の外のオブジェクトに直接書き込みません省略しています。

三、BOM操作

BOM（ブラウザオブジェクトモデル）は、「トーク」にはJavaScript対応ブラウザが可能ブラウザオブジェクトモデルを指し、
これは、ブラウザのウィンドウを動作させることです

1. BOM一般的操作法

（1）ナビゲータオブジェクト

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

（2）画面オブジェクト

画面オブジェクトは、一般的に使用されていません

（3）履歴オブジェクト

//相当于浏览器的后退和前进

history.forward()  // 前进一页
history.back()  // 后退一页

（4）位置オブジェクト

window.locationのオブジェクトは、現在のページのアドレス（URL）を取得するために使用され、ブラウザが新しいページにリダイレクトされます。

location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

（5）ポップアップボックス

警告ボックス、チェックボックス、バルーン：3つは、JSのメッセージボックスに作成することができます
1. アラートボックス
- アラートボックスは、多くの場合、ユーザーはいくつかの情報を得ることができることを確実にするために使用されます。
- 警告ボックスが表示されたら、ユーザーは続行するために[OK]ボタンをクリックする必要があります。
- 文法
```
alert("你看到了吗？");
```
1. 確認ボックス
- 特定の情報を確認したり、受信するユーザーのためのボックスをチェックします。
- 確認ボックスが表示されたら、ユーザーは続行するために、ボタンを[OK]をクリックするか、キャンセルする必要があります。
- ユーザーが確認するためにクリックした場合、戻り値はtrueです。ユーザーが[キャンセル]をクリックした場合、戻り値はfalseです。
- 文法
```
confirm("你确定吗？")
```
1. ヒントボックス
- プロンプトボックスは、多くの場合、ページに入る前に入力する値をユーザーに促すために使用されています。
- プロンプトボックスが表示されますが、ユーザーが値を入力する必要がある場合は、[OK]をクリックするか、操作を継続するために[キャンセル]ボタンを。
- ユーザーが確認するためにクリックした場合、戻り値は入力されています。ユーザーが[キャンセル]をクリックした場合、戻り値はnullです。
```
prompt("请在下方输入","你的答案")
```

（6）タイミング関連

JavaScriptを使用することにより、我々は時間の一定の間隔で後に関数が呼び出された直後にコードを実行し、しないようにすることができます。私たちは、時限イベントを呼び出します。Pythonで同様のtime.sleep()

setTimeout() （設定した待ち時間）
- 文法
```
var t=setTimeout("JS语句",毫秒)
```
- setTimeout()メソッドは値を返します。上記のステートメントでは、値がTで名前の変数に格納されています。あなたはこれをキャンセルしたい場合setTimeout()、あなたはそれを指定するには、この変数名を使用することができます。
- setTimeout()最初のパラメータには、JavaScriptステートメントを含む文字列です。この文は、ようなものであってもよいalert('5 seconds!')、またはのような関数の呼び出し、alertMsg()。
- 第2のパラメータは、現在（1000のMSが1に等しい）から何ミリ秒の実装からパラメータを示しています。

clearTimeout()（キャンセルsetTimeout()の設定）

構文：
```
clearTimeout(set)
```

例

// 在指定时间即3秒之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)

// 取消setTimeout设置，只要有这个语句，上面的语句一次也不执行
clearTimeout(timer);

setInterval() （定期的な実行コード）
- setInterval()呼び出す関数または演算式に（ミリ秒単位）指定された間隔で方法。
- setInterval()この方法は、まで、関数を呼び出し続けるclearInterval()と呼ばれているか、ウィンドウが閉じられています。setInterval()ID値戻りとして使用することができるclearInterval()方法のパラメータ。
- 文法
```
setInterval("JS语句",时间间隔)  //时间间隔也是毫秒单位
```
- 返却値
  - Aは、に渡すことができWindow.clearInterval()、それにより定期的に実行されるコードの値をキャンセルします。
clearInterval()（キャンセルsetInterval() 的周期性执行代码）

clearInterval()メソッドのパラメータは、しなければならないsetInterval()IDの値を返します

文法

clearInterval(setInterval返回的ID值)

例

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)

// 取消setInterval设置
clearInterval(timer);

四、DOM操作

DOM（ドキュメントオブジェクトモデル）は、文書や抽象概念の内容のためのメソッドのセットです。あなたはどちらのHTML文書のすべての要素にアクセスするためのドキュメントオブジェクトモデルを意味し、
ページがロードされると、ブラウザは、ドキュメントオブジェクトモデル（ドキュメントオブジェクトモデル）のページを作成します。
HTML DOMモデルは、オブジェクトツリーとして構成されています。
限りノードが存在するとして、あなたは他のすべてのノードを見つけることができます。

1. DOMの役割

各成分（1）DOM標準HTML文書1つのノード（ノード）です。

Documentノード（ドキュメントオブジェクト）：文書全体を代表して
要素ノード（要素オブジェクトは）：要素（タグ）を表します
ノードのテキスト（テキストオブジェクト）：テキスト内の代表的要素（タグ）
ノード属性（属性オブジェクト）：attribute要素（タグ）の特性を有する表します
コメントはコメントノード（コメントオブジェクト）です

（2）JavaScriptはDOMを通じてダイナミックHTMLを作成することができます。

JavaScriptは、ページ上のすべてのHTML要素を変更することができます
JavaScriptは、すべてのHTMLページのプロパティを変更することができます
JavaScriptは、すべてのCSSスタイルのページを変更することができます
JavaScriptは、すべてのイベントページに反応することができます

2.検索ラベル

（1）ダイレクト検索

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

（2）間接検索

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

3.ノードの操作

（1）ノードを作成します

文法
```
createElement(标签名)
```

例

// 在body标签中创建一个div标签
var divEle = document.createElement("div");

（2）ノードを追加します

子ノードを追加（最後として、子ノード）

appendChild(添加的子节点)

ノードは、ノードの前面に加えます

insertBefore(添加的子节点 , 某个已存在的节点)

例：

// 创建一个img标签
var imgEle=document.createElement("img");
// 给img标签添加src属性
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");

// 给id值为 d1 的标签最后位置添加一个 img 子标签
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

（3）削除ノード

構文：
1. 呼び出すことにより、親要素を削除し、削除したい要素を取得します
2. removeChild(要删除的节点)

（4）交換ノード

構文：

replaceChild(新的节点，某个已存在的节点)

（5）プロパティノード

テキストノードの値を取得します。

var divEle = document.getElementById("d1")
divEle.innerText  // 只获取标签的文本信息  inner 是“内部的”的意思
divEle.innerHTML  // 获取标签所有文本的信息和标签的信息

テキストノードの値

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attributeオペレーティング

var divEle = document.getElementById("d1");
// 添加属性
divEle.setAttribute("age","18") 
// 获取属性值
divEle.getAttribute("age")
// 删除属性
divEle.removeAttribute("age")

（6）は、入力ブロックおよび列選択の入力値を取得します

ラベルに適用されます：input/select/textarea
文法

标签对象.value

操作の（7）クラス

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

（8）はCSS操作を指定します

JS CSS財産法の操作

いいえの場合中横线即 -、一般的に直接使用するCSSプロパティ、style.属性名に

例：
```
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
```

含む中横线即 -CSSプロパティを、水平ラインの裏へのプロパティの最初の文字を大文字にすることができます。

例：

obj.style.marginTop        //  原来的写法 ：margin-top
obj.style.borderLeftWidth  //  原来的写法 ：border-feft-width
obj.style.zIndex   // 原来的写法：z-index
obj.style.fontFamily   //  原来的写法 ：font-famliy

4.イベント

イベントには、新しいコンテンツを起動するボタンをクリックするなど、自動的にトリガされているアクションまたは特定の条件を満足させる反応です。

（1）共通のイベント

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

（2）結合方法

一つの方法：（推奨されません）

<button onclick="func()">按钮</button>

第二の方法：（推奨）

function func() {
            alert('我被点击了')
            }
            var i1Ele = document.getElementById('d1');
            i1Ele.onclick = function () {
                // i1Ele标签被点击之后 你能做的事
                func()
            }

異なるスタイルやラベル結合位置を配置するさまざまな方法によると、JSコードは、最初のケースを実行することができ、エラーが発生します。

解決法1： （推奨されません）
- headタグ使用window.onload()方法論的な理由を、コードを待ってbodyタグがロードされた後、その役割は再ラベル頭実行形式のタグにあるが、今回は、道を結合するエラーは、これが結合する方法としては推奨できません。
対処方法2： （推奨）
- 底部のbodyタグに配置されたスタイルタグである本体の底部に直接書き込むためのJSコード。

実施例（3）イベント

Timerインスタンス

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>

<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };

</script>
</body>
</html>

定时器示例

検索例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

リンケージを選択

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>

<select id="city">
  <option>请选择市:</option>
</select>

<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};

  var p = document.getElementById("province");
  var c = document.getElementById("city");

  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";

    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

select联动

BOMおよびDOM操作