Javascript

1. 输出

document.write("")

2. 引入外部文件

<script src="myjs.js"></script>

3. 更改html中的内容

document.getElementById("pid").innerHTML="ABC";

4. 获取其值

document.getElementById("pid").value

5. 声明变量使用var
6. 声明函数function

function demo() {
}

7. alert（）用于显示带有指定消息的对话框

---

JavaScript事件

事件是可以被JavaScript侦测到的行为
常见事件：

1. onClick单击事件

<button onclick="demo()"></button>

2. onmouseover鼠标被移到某元素之上

<div class="div"onmouseover="onOver(this)" </div>
<script>
function onOver(ooj) {
        ooj.innerHTML="abc"
    }
</script

3. onmouseout鼠标从某元素移开

<div class="div"onmouseout="onOut(this)" </div>
<script>
function onOut(ooj) {
        ooj.innerHTML="def"
    }
</script>

4. onchange 文本改变事件

<form>
    <input type="text" onchange="changeDemo(this)">
</form>
<script>
    function  changeDemo() {
        alert("内容改变")
    }
</script>

5. onselect文本选中事件，文本选中后背景变成红色

<form>
    <input type="text" onselect="changeDemo(this)">
</form>
<script>
    function  changeDemo(bg) {
       bg.style.background="red";
    }
</script>

6. onfocus光标聚集事件，光标聚集到文本框后，背景变成蓝色

<form>
    <input type="text" onfocus="changeDemo(this)">
</form>
<script>
    function  changeDemo(bg) {
       bg.style.background="blue";
    }
</script>

7. onload网页加载事件
8. onunload关闭网页事件

---

JavaScript-DOM

DOM网页创建的文档对象模型

DOM操作html

1. 改变html输出流 ,不要在文档加载完成使用document.write()，这会覆盖该文档
2. 寻找元素,通过id和标签名来找到HTML元素,按标签查找会寻找相同元素的第一个

document.getElementById("pid");

document.getElementsByTagName("p")

3. 改变html内容，使用属性innerHTML

var p1= document.getElementById("pid");
p1.innerHTML="123";

4. 修改元素属性

<script>
    function demo(){
       document.getElementById("aid").href="http://www.baidu.com"
    }
</script>

DOM操作css

语法：document.getElementById().style.property=new style

• 点击按钮改变其背景颜色

<div id="div" class="div">
</div>
<button onclick="demo(this)">按钮</button>
<script>
    function demo() {
        document.getElementById("div").style.background="blue"
    }
</script>

DOM添加元素句柄DOM EventListener

1. 添加句柄

document.getElementById("btn").addEventListener("click",function () {alert("123")  })

2. 移除句柄

var vx=document.getElementById("btn")
vx.removeEventListener("click",xx)

3. 句柄之间不会覆盖

<button id="btn">按钮</button>
<script>
    var vx=document.getElementById("btn")
    vx.addEventListener("click",hh)
    vx.addEventListener("click",xx)
    function hh() {
        alert("123")
    }
    function xx() {
        alert("456")
    }