目录
1.json复杂类型
var 对象名 = [{},{},{}...] 描述类似数组或者集合
<script>
var students =
[
{"name":"高圆圆","age":42,"gender":"女","address":"西安市"},
{"name":"王宝强","age":35,"gender":"男","address":"北京市"},
{"name":"文章","age":32,"gender":"男","address":"渭南市"},
{"name":"姚笛","age":25,"gender":"女","address":"西安市"}
] ;
//json对象[索引值].key 获取对应value值
document.write(students[1].address) ;
</script>
结果:北京市
2.dom入门
3.通过document获取标签对象
共4种方式
1.id属性值
2.class属性值
3.name属性值
4.标签名称
//方式1:在标签中给定id属性值,必须唯一 (推荐)
//document.getElementById("id属性值") 获取标签对象
var username = document.getElementById("username") ;
//方式2:docuement.getElementsByClassName("class属性值") ; 获取的标签对象列表
var username = document.getElementsByClassName("cl_username")[0] ;
//方式3:docuement.getElementsByName("name属性值") ;//获取的标签对象列表
var username = document.getElementsByName("name")[0] ;
//方式4:通过标签名称获取标签对象
//docuement.getElementsByTagName("同名的标签名称") ; //返回的标签对象列表
var username = document.getElementsByTagName("input")[0] ;
//标签对象获取value属性:内容可以获取到
//alert(username.value) ;
4.js中常见事件分类
1. 点击相关的
单击事件 (重点) onclick
双击事件 ondbclick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单双击事件</title>
</head>
<body>
<input type="button" value="单击我试试" onclick="danji()"/>
<input type="button" value="双击我试试" ondblclick="shuangji()"/>
<script>
function danji(){
alert("您单击了一次!");
}
function shuangji(){
alert("您双击了一次!");
}
</script>
</body>
</html>
2. 焦点事件 (重点)
获取焦点 onfocus
失去焦点 onblur
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点事件</title>
</head>
<body>
<input type="text" placeholder="点我获取焦点" onfocus="juji()" />
<input type="text" placeholder="点我一下就离开" onblur="shiqu()"/>
<script>
function juji(){
alert("您已获取焦点!");
}
function shiqu(){
alert("您已失去焦点!!");
}
</script>
</body>
</html>
3. 选项卡发生变化的事件 (重点)
select标签 下拉菜单 onchange
option 下拉选项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点事件</title>
</head>
<body>
籍贯:
<select onchange="testChange()" id="province">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
籍贯:
<select onchange="testChange()" id="province">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
<script>
function testChange(){
// alert("选项卡发生变化了") ;
//获取 id="province"的select标签对象,同时获取选择的内容
var province = document.getElementById("province").value ;
// alert(province) ;
//获取id="city"的select标签对象
var city = document.getElementById("city") ;
//每一次选项卡变化将上一次拼接的文本内容,清空掉
city.innerHTML = "" ;
//判断
if(province=="陕西省"){
//创建一个数组,陕西省的城市
var arr = ["西安市","咸阳市","宝鸡市","渭南市","神木市"] ;
//遍历
for(var i = 0 ; i < arr.length ; i++){
//arr[i]每一个城市名
//设置id="city"的select标签对象的文本内容
city.innerHTML += " <option value="+arr[i]+">"+arr[i]+"</option>" ;
}
}
if(province=="山西省"){
//创建一个数组,陕西省的城市
var arr = ["太原市","大同市","晋中市","临汾市","运城市"] ;
//遍历
for(var i = 0 ; i < arr.length ; i++){
//arr[i]每一个城市名
//设置id="city"的select标签对象的文本内容
city.innerHTML += " <option value="+arr[i]+">"+arr[i]+"</option>" ;
}
}
if(province=="广东省"){
//创建一个数组,陕西省的城市
var arr = ["深圳市","东莞市","惠州市","佛山市","珠海市"] ;
//遍历
for(var i = 0 ; i < arr.length ; i++){
//arr[i]每一个城市名
//设置id="city"的select标签对象的文本内容
city.innerHTML += " <option value="+arr[i]+">"+arr[i]+"</option>" ;
}
}
</script>
</body>
</html>
4. 鼠标经过事件 :onmouseover
5. 鼠标移出事件:onmouseout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点事件</title>
</head>
<body>
<input type="text" placeholder="鼠标经过我试试" onmouseover="mouseover()"/>
<hr />
<input type="text" placeholder="鼠标经过我试试" onmouseout="mouseout()"/>
<script>
function mouseover(){
document.write("你真好看!")
}
function mouseout(){
document.write("别离开我!")
}
</script>
</body>
</html>
6. 页面载入事件 (重点):onload
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦点事件</title>
</head>
<body onload="load()">
<input type="text" placeholder="鼠标经过我试试" />
<hr />
<input type="text" placeholder="鼠标经过我试试" />
<script>
function load(){
document.write("已加载完毕!")
}
</script>
</body>
</html>