1：js的三部分
2：dom操作页面元素(一件事有触发，有响应，有事件源)：基本元素操作，表单元素操作
3：元素的样式操作
1：js三部分
a:ECMAscript:js基本语法
b:DOM文档对象模型 -- 操作页面的元素--dom树由文档和文档中所有的元素组成的树状结构图
c:BOM 浏览器对象模型 --操作浏览器
2：dom操作页面元素
A:基本元素操作
操作元素的时候，一般都是通过按钮的方式。这时候按钮点击叫做事件触发，里面执行的叫事件响应，事件源是你要事件响应的元素
每次你要想操作，你就得先获取，但是每次都document.getElementById显然有点费事，这时候把它封装在一个文件里面
Function my$(id){
Return document.getElementById(id);
}
用的时候调用就行
案例1
<input type="button" value="点我" id="bt"/>
<input type="button" value="边长边宽" id="bt1"/>
<img src="" alt="" id="im"/>
<script src="../../common.js"></script>
<script>//点击按钮显示图片，修改长宽//事件触发
my$("bt").onclick = function () {
//事件响应//事件源 my$("im").src = "../../images/5.jpg"; //src不用stylemy$("im").width = "50";my$("im").height = "50";// 特有属性不用style也行？像素不加px也行！}
值得注意的是，一个图片的title和alt ，Width，height，src是本身自带的，所以设置他的属性的时候不用style也行，不用style后面也就不用px
案例2：修改p标签的内容
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<input type="button" value="点我" id="bt"/>
<p id="p">大家好</p>
<script src="../../common.js"></script>
<script>
my$("bt").onclick = function(){my$("p").innerHTML ="不好"
// 区分innerText和innerHtml，
// innerText：只是获取标签之间的文字，成对的标签
// innerHTML：连标签带文字一起获取
}
</script>
</body>
</html>
修改一个基本元素的内容，innerText:修改的时候如果有标签，会将标签一起带着
innerHTML：只是修改内容，不带标签
案例3：修改多个p标签的内容
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<input type="button" value="点我" id="bt"/><p>大家好</p><div id="dv1"><p>好</p><p>好</p><p>好</p>
</div><script src="../../common.js"></script>
<script>my$("bt").onclick = function () {
// var pObj = document.getElementsByTagName("p") //getElementByTagName返回值是一个伪数组var pObj = my$("dv1").getElementsByTagName("p") //注意选择的范围，由大到小console.log(pObj);for (var i = 0; i < pObj.length; i++) {pObj[i].innerHTML = "不好";}}
</script>
</body>
</html>
获取多个标签的内容，用的方法getElementByTargetsName();这个方法的返回值是一个伪数组，所以要获取所有的p标签，需要通过循环的方式，得到每一个p，然后修改他的值。innerHTML 如果有标前，也只是要内容
案例4：修改所有文本框的值
方法和p一样，只不过文本框都是input，如果type类型不一样，但是value值都是字符串，这个时候就需要加判断
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<input type="button" value="点我" id="bt"/><input type="text" value="哈哈"/>
<input type="text" value="哈哈"/>
<input type="text" value="哈哈"/>
<input type="text" value="哈哈"/>
<input type="text" value="哈哈"/>
<input type="text" value="哈哈"/>
<script src="../../common.js"></script>
<script>my$("bt").onclick = function () {var inputObj = document.getElementsByTagName("input");for (var i = 0; i < inputObj.length; i++) {if (inputObj[i].type != "button") { //注意这里是字符串 tyoe number ，stringinputObj[i].value = "你好";}}}
</script>
</body>
</html>
If(InputObj[i] type !=”button”){
改变值，这里用innerHTML和value都可以
值得注意的是type后面可以是字符串，数字，布尔类型，所有button要加双引号
}
案例5：按钮的排他功能
排他功能第一步，循环遍历所有按钮，为每个按钮注册点击事件。点击事件里面有两步，第一步；将所有的按钮值设置为默认值，然后将当前的值改为想要改的值，这里需要注意，获取标签名，是TagName
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><input type="button" value="哈哈"/><br/>
<input type="button" value="哈哈"/><br/>
<input type="button" value="哈哈"/><br/>
<input type="button" value="哈哈"/><br/>
<input type="button" value="哈哈"/><br/>
<input type="button" value="哈哈"/><br/>
<script src="../../common.js"></script>
<script>var inputObj = document.getElementsByTagName("input");for (var i = 0; i < inputObj.length; i++) {// wei每个按钮注册点击事件inputObj[i].onclick = function () {// 把所有按钮的value设置为默认值for (var j = 0; j < inputObj.length; j++) {inputObj[j].value = "哈哈";}// 将当前按钮设置为this.value = "mnp" //这里不能用inputObj[j]，for循环是在页面加载完毕的时候，执行完毕了}}
</script>
</body>
</html>案例6：修改性别
其实这个案例主要就是在表单中，如果属性和值只有一个，并且这个值是本身，那么在写js代码，DOM操作的时候，这个值，只要是boolean类型就可以
Disabled,selection,checked
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<input type="button" value="点我" id="bt"/>
<input type="radio" name="sex" id="rad1" value="1"/>男
<input type="radio" name="sex" id="rad2" value="2"/>女
<script src="../../common.js"></script>
<script>//规律：在表单标签中，如果属性和值只有一个，并且值是这个属性本身，那么在写js代码，DOM操作的时候，这个属性值，是布尔类型就可以my$("bt").onclick = function () {my$("rad1").checked = true; //只要是非空字符串就可以
// html中的属性和值都是自己的，并且只有一个，其实可以只写这个属性，不用赋值
//disabled ====>这个属性是禁用
// selection}
</script>
</body>
</html>案例7：点击按钮，显示和隐藏按钮
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#dv {width: 200px;height: 200px;background-color: #DB192A;}</style>
</head>
<body>
<input type="button" value="显示" id="bt"/><div id="dv"></div>
<script src="../../common.js"></script>
<script>my$("bt").onclick = function () {console.log("是的");if (this.value == "显示") {my$("dv").style.display = "none";this.value = "隐藏";}else if (this.value == "隐藏") {my$("dv").style.display = "block";this.value = "显示";}}
</script>
</body>
</html>
这个的思路是你只有一个按钮，所以注册点击事件是在一个按钮上面，然后在里面进行value值得判断，判断玩之后再改回来
案例11 --用类样式的方法操作上面的案例 主要用到className=””
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.cls {width: 200px;height: 200px;background-color: #DB192A;}</style>
</head>
<body>
<input type="button" value="显示" id="bt"/><div id="dv" class="cls"></div>
<script src="../../common.js"></script>
<script>my$("bt").onclick = function () {if (my$("dv").className != "cls") {my$("dv").className = "cls";this.value = "显示"}else {my$("dv").className = "";this.value = "隐藏"}}
</script>
</body>
</html>
案例12 开关灯
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.cls {background-color: black;}</style>
</head>
<body class="cls">
<input type="button" value="开/关灯" id="bt"/>
<script src="../../common.js"></script>
<script>my$("bt").onclick =function(){document.body.className = document.body.className!="cls"?"cls":"";}
//如果body的className = cls那么就是关灯，如果不是，就将body的className设置为空，这样没有值，就是页面的颜色，白色，正好做到了黑白开关简单总结：
1：学了怎样获取页面中的元素，通过id，但是哪一串太长了，所以封装起来。缺点是每次只能获取一个
2：通过标签名 TagName ，由于你获取到的是一组，而且是伪数组，如果想要对标签一样的进行操作哦，就需要循环遍历；当然你要是想取其中某一个，可以通过[]数组的方式来获取；当你想要在一堆标签中选一组，你就要缩小范围，document.getElementsByTagName中的document是页面中的所有，你可以用
var pObj = my$("dv1").getElementsByTagName("p")
来缩小范围
3：说完基本元素，就是表单元素：表单元素
属性和值是同一个，那么在下js代码，操作DOM的时候，只写属性或者这个属性值是布尔类型就可以
4：按钮的排他功能：排他工能的思路是
先获取所有的按钮，由于是所有的，然后循环遍历每一个，并且为每一个注册点击事件。当你点击的时候其实发生了两件事，先是将所有到的按钮值设置为默认值，(这个时候就需要再循环遍历所有的按钮)，然后设置当前的按钮值，
5：修改所有文本框的值，由于所有文本框都是在input里面，input里面包括文本，按钮，文本域，这时候就需要判断类型，来确定你输入的就是文本框，
每一个都要判断，判断的是类型
if (inputObj[i].type != "button")
6：按钮的显示隐藏
第一种是id，做一个判断，value值是不是显示，是的话隐藏，并且将下次的value设置为显示
第二种className的方式，如果他的className不是cls(字符串)，那么就将他的className设置为clas；如过className是cls，就将className设置为空
7：开关灯
直接在body里面设置颜色；
这里用的三木运算还是不错的
Document.boddy.getElementByClassName= = document.body.getElementBtClassNmae !=”cls”?”cls”:””
如果body的className不是cls,就让他等于cls，如果className是cls，就让他为空。这样正好是一黑一白的交替