js之DOM&函数
一.js脚本的引入方法
1.内部引入
<script type="text/javascript">
</script>2.外部引入
<script type="text/javascript" src=""></script> 二. 定义函数:
function 函数名称(参数列表){
函数体
}
匿名函数(没有名称的函数):
ps:一般定义匿名函数都会把函数对象赋值给一个对象
var f1 = function () {
console.log("匿名函数");
}
f1();
函数的参数:
var func3 = function (a, b) {
return a + b;
}
函数的预编:
在js加载js脚本时会把所有的js的函数(非匿名函数)提取出来进行预编译,以方便随时调用,
js引擎会把所有的变量提取出来赋值为 undefined
函数的自调用:
!function () {
console.log("自调用函数...");
}();
三：DOM
页面元素的获取:
var p = document.getElementById("id");
var spans = document.getElementsByClassName("span01")
var spans =document.getElementsByName();
获取元素的内容:
innerText
innerHtml
获取属性:
p.getAttribute("name")
获取表单的值:
value
常用方法
//通过id获得节点
var con = document.getElementById("con");
//创建节点
var a = document.createElement("a");
//添加属性
a.setAttribute("href", "http://www.uplooking.club");
//创建文本节点
var textData = document.createTextNode("点我呀...");
//追加子节点
a.appendChild(textData);
//追加子节点
con.appendChild(a)四：js中的事件:
onclick:点击事件
ondblclick:双击事件
onchange:内容改变 失去焦点事件
onfocus:聚焦事件
onblur:失焦事件
onkeydown:键盘按下事件
onkeyup:按下键盘并且松开键盘的事件
onmouseover:鼠标移上去
onmouseout:鼠标移开
onmousemove:一直移动的事件
onmousedown:鼠标按下事件
onmouseup:鼠标松开事件
五.省级联动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省级联动</title>
<style type="text/css">
.con {
width: 300px;
margin: 100px auto;
}
.con select {
padding: 6px;
}
</style>
</head>
<body>
<div class="con">
<select id="provinces">
</select>
<select id="schools">
</select>
</div>
<script type="text/javascript">
var provinces = document.getElementById("provinces");
var schools = document.getElementById("schools");
var data = [];
data["甘肃省"] = ["兰州大学", "天水师范", "兰州石化"];
data["陕西省"] = ["西安交大", "西安外事学院", "西京学院"];
data["北京市"] = ["北大", "清华", "人大"];
for (key in data) {
var option = document.createElement("option");
option.appendChild(document.createTextNode(key));
option.setAttribute("value", key);
provinces.appendChild(option);
}
getdata();
provinces.onchange = getdata;
function getdata() {
schools.length = 0;
var ss = data[provinces.value];
for (index in ss) {
var option = document.createElement("option");//更新学校
option.appendChild(document.createTextNode(ss[index]));
schools.appendChild(option);
}
}
</script>
</body>
</html>
上一篇： 在maven项目中使用引入的jar包
下一篇： 传智健康项目讲义第二章三