<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day1</title>
<style>
.on{
background-color: white;
}
.off{
background-color: black;
}
</style>
</head>
<body class="on">
<input type="button" value="内置js代码" onclick="alert('嘻嘻嘻')" />
<input type="button" value="分离js代码" id= "btn">
<script>
//DOM
//Document Object Model
//BOM
//Browser Object Model
//
//HTML文档--对象--标签--对象--元素--节点
//
//事件-注册事件-触发事件-响应事件-执行事件代码-事件结束
//
var obj = document.getElementById("btn");
obj.onclick = function(){
alert("哈哈哈");
};
//js代码最好不要写在head标签中，否则可能会因为找不到对象而报错
</script>
<!-- 案例 点击按钮显示图片-->
<input type="button" value="显示图片" id="btn2">
<div >
<img src="" alt="" id="img" />
</div>
<script>
document.getElementById("btn2").onclick = function(){
var img = document.getElementById("img");
// img.width = "500";
// img.height = "500"; //要注意不能加单位，这样属性值会变成0！原因在于我们所赋值的类型应该为number类型，如果为其他值，会自动转换成0！
img.style.width = "500px";
img.style.height = "500px"; //用style方式即CSS方式修改时需要加单位
img.src = "images/1.jpg";
};
</script>
<!-- 案例：点击按钮修改p标签的内容 -->
<p id="p1">这是一个p</p>
<input type="button" value="修改标签内容" id="btn3">
<script>
var p1 = document.getElementById("p1");
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
p1.innerText = "写入标签用innerText ="" "
};
</script>
<!-- 案例 ：点击按钮修改超链接 -->
<input type="button" id="btn4" value="修改超链接">
<a href="http://www.baidu.com" id = "a1" target="_black">百度一下</a>
<script>
document.getElementById("btn4").onclick = function(){
var aObj = document.getElementById("a1");
aObj.href = "http://www.google.com";
aObj.innerText = "谷歌一下";
};
</script>
<div id="div1">
<p class="p2" >天王盖地虎</p>
<p class="p2">天王盖地虎</p>
<p>天王盖地虎</p>
<p>天王盖地虎</p>
<p>天王盖地虎</p>
<input type="button" value = "修改前两行" id="btn5">
<input type="button" value = "修改全部" id="btn6">
</div>
<!-- document.getElementsByClassName("") 根据类名获取元素返回的是伪数组-->
<script>
document.getElementById("btn5").onclick = function(){
var pObj = document.getElementsByClassName("p2");
for(var i=0; i<pObj.length; i++){
pObj[i].innerText = "小鸡炖蘑菇";
}
};
</script>
<!-- document.getElementsByTagName("") 根据标签获取元素返回的是伪数组-->
<script>
document.getElementById("btn6").onclick = function(){
var pObj = document.getElementsByTagName("p");
for(var i=0; i<pObj.length; i++){
pObj[i].innerText = "宝塔镇河妖";
}
};
//发现把前面案例的p都改了
//可以附加更加准确地获取标签
//getElementsById("div1").getElementsByTagName("p")
</script>
<!-- 排他功能案例 -->
<button>我是按钮</button>
<button>我是按钮</button>
<button>我是按钮</button>
<button>我是按钮</button>
<button>我是按钮</button>
<button>我是按钮</button>
<script>
var btns = document.getElementsByTagName("button");//获取所有按钮
for(var i = 0; i < btns.length; i++){ //为所有按钮添加事件
btns[i].onclick = function(){
//先把所有按钮复原
for(var j = 0; j < btns.length; j++){
btns[j].innerText = "我是按钮";
}
//把被点击的按钮改变
this.innerText = "我被点击了"; //特别注意，这里不能写btns[i].innerText = "";因为for循环实在页面加载结束就执行了，而点击事件被注册了还没有被触发。此时i已经变成了btn.length，以后触发事件的时候执行的是第113-117的代码，此时i还是btn.length，而不是被点击的那个按钮的索引
//console.log(i);
};
}
</script>
<!-- 案例 ：DOM操作修改CSS样式 -->
<div id="dv"></div>
<input type="button" value="修改样式" id="btn7">
<script>
document.getElementById("btn7").onclick = function(){
var dv = document.getElementById("dv");
dv.style.width = "200px";
dv.style.height = "200px"; //CSS的要加单位
dv.style.backgroundColor = "pink"; //DOM操作修改CSS样式中带有-的属性，一律改成去掉-，首字母大写
};
//DOM操作中设置标签的类，不用class,而要用className
//
//
//
</script>
<!-- 案例：网页开关灯 -->
<input type="button" value="开关灯" id="btn8">
<script>
document.getElementById("btn8").onclick = function(){
if(document.body.className == "on"){
document.body.className = "off";
}else {
document.body.className = "on";
}
};
</script>
</body>
</html>