Java学习笔记——JavaScript（二）

JS的DOm操作

DOM : 文档对象模型

每个HTMl页面就是一个文档，把每个标签或元素就是一个对象，就可以利用对象来操作标签。

注意 : 操作DOM对象需要使用一个全局对象“ document ”来操作

得到DOM对象

1）通过id获得DOM对象

document.getElementById("id");//获得标签对象

2）通过标签名获得DOM对象
    如果有同名的标签，会获得全部同名标签对象，返回数组

var objArr = getElementsByTagName("标签名");

3）通过class获得
    如果有多个标签class相同，会获得全部相同class标签对象，返回数组

 var objArr = getElementsByClassName("标签名");

---

标签对象.nodeName//获得该对象的标签名
标签对象.innerHTML;//获得开闭标签之间的内容
Array.item(下标);//获得数组中指定下标的元素

---

通过DOM对象改变标签的内容

 

标签对象.innerHTML = "改变后的内容";

//可以设置开闭标签之间的内容，内容也可以是标签嵌套在原标签内。设置成功后原标签内容会被覆盖。

通过DOM对象改变标签的属性

标签对象.属性名 = "改变后的内容";

通过DOM对象改变标签样式

标签对象.style.CSS属性名 = "改变后的CSS属性值";
//写属性名时，CSS属性名中加“ - ”的，把“ - ”去掉，其后的字母大写

向浏览器写标签

document.write("要添加的标签");//写到那里在那里添加

JS的函数（function）

类似Java中的方法，用于执行某个功能

普通函数定义格式：

 

function 函数名(参数列表：形参){
    函数体
}

调用 : 函数名(实参);

注意特点：

1）js的函数定义中没有返回值类型
2）如果函数想返回数据，直接使用“return 值”返回即可，调用函数就可以接收返回值
3）参数列表中定义参数不需要写数据类型，也不需要写var，多个变量名直接用“,”隔开
4）多个形参时，
    （1）实参与形参个数一致，正常
    （2）实参比形参个数少，没有被赋值的形参属于undefined
    （3）实参比形参个数多，正常使用，多出来的舍弃
    

匿名函数常见使用：
    

var p1 = document.getElementById("p1");
    p1.onclick = function() {
        alert("33")
    }
    

this

用于传递当前标签对象

<input type="button" value="按钮" onclick="fun1(this)">
//obj就是button对象
<script>
    function fun1(obj){
        console.log(obj);
    }
</script>    



alert();//确认框
var a = confirm();//选择框。点击确定返回true；点击取消返回false

    
    

JS的事件

事件源 : 事件发生的源头 --> 那个标签的事件
事件 : 发生了什么事情 --> 单击/双击/键盘/鼠标...
事件响应 : 在那个标签上有了事件以后,做出什么动作
事件绑定 : 将事件和事件源绑定在一起

事件绑定1

事件和响应都写在事件源上
    --> 事件和事件响应都写在标签内
    --> 事件就是html的事件属性
    --> 响应是动作

<input type="button" value="按钮" onclick="alert('你点我干啥')">

事件绑定2

事件和事件响应分开 : 
    事件写在事件源,
    事件中调用事件响应函数
    在页面其他地方写js响应函数

<button type="button" onclick="fun1()">按钮2</button>

<script type="text/javascript">
    function fun1() {
        alert("朕不在")
    }
</script>

事件绑定3

将事件和事件响应都脱离事件源
    通过js的DOM操作,通过id/class/tegname
    
    

常见事件:

    单击 onclick

    双击 ondblclick=""

    获得焦点 onfocus=""

    失去焦点onblur=""

    域内改变onchange=""

    选中onselect=""

    鼠标移动onmousemove=""

    鼠标进入onmouseenter=""

    鼠标离开onmouseleave=""

    键盘按下onkeydown=""

    键盘按压onkeypress=""

    键盘弹起onkeyup=""

JS的BOM

alert //警告框
confirm //选择框

window.location //跳转页面