一：鼠标提示框
需求描述：鼠标移入都input上，div显示，移出，div消失
分析：控制display=block/none
鼠标移入，鼠标移出事件
<input type="button" onmouseover="alert('鼠标移入')" onmouseout="alert('鼠标移出')">
功能代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1 {
200px;
height: 100px;
background-color: gray;
display: none;
}
</style>
</head>
<body>
<input type="button" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'">
<div id="div1">为了你的信息安全，请不要再网吧内勾选</div>
</body>
</html>
问题：版本兼容性差，存在div1 is not define的问题，火狐浏览器会出现问题
解决办法：使用 document.getElementById()
功能代码
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 200px; height: 100px; background-color: gray; display: none; } </style> </head> <body> <input type="button" onmouseover="look();" onmouseout="unlook();"> <div id="div1">为了你的信息安全，请不要再网吧内勾选</div> <script src="13DOM操作.js"></script> # 这里必须在div的下面引用，因为上面引用会先执行js，找不到div1,变量d为none，根本无法修改属性。 </body> </html>
javascript代码
var d = document.getElementById("div1");
function look() {
d.style.display ='block';
}
function unlook() {
d.style.display ='none';
}
二：鼠标移入后，div变大，变色
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div1 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="div1" onmouseover="big();" onmouseout="small();"></div> <script src="13DOM操作.js"></script> </body> </html>
javasript代码
var d = document.getElementById("div1"); function big() { d.style.width ='500px'; d.style.height='500px'; d.style.backgroundColor='green'; } function small() { d.style.width ='100px'; d.style.height='100px'; d.style.backgroundColor='red'; }
三：网页换肤
实现方式一：
html代码
<body id="body">
<input type="submit" id="input1" value="皮肤一" onclick="to_green();"> <input type="submit" id="input2" value="皮肤二" onclick="to_pink();"> <script src="13DOM操作.js"></script>
javadcript代码
var b = document.getElementById("body");
function to_green() {
b.style.backgroundColor="green";
}
function to_pink() {
b.style.backgroundColor="pink";
}
实现方式二：
css代码
# css1.css body { background-color: gray; } #css2.css body { background-color:yellowgreen; } #css3.css body { background-color: pink; }
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css1.css" id="objlink"> # 知识点：任何标签都可以加id和class选择器，用来控制属性 <script src="13DOM操作.js"></script> </head> <body> <input type="submit" value="皮肤一" onclick="to_green();"> <input type="submit" value="皮肤二" onclick="to_pink();"> </body> </html>
javascript代码
var obj = document.getElementById("objlink"); function to_green() { obj.href = "css2.css"; # 知识点二：任何标签的任何属性都可以修改 } function to_pink() { obj.href = "css3.css"; }
四：点击出现下拉菜单，再次点击，隐藏下拉菜单
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css1.css" id="objlink"> <style> #div1{ 100px; height: 500px; display: none; background-color:pink; } </style> </head> <body> <input type="submit" value="选项" onclick="down();"> <div id=div1></div> <script src="13DOM操作.js"></script> </body> </html>
javascript代码
var d = document.getElementById("div1"); function down(){ if (d.style.display =="none"){ # 和python中的==用法一样，判等 d.style.display = "block"; } else{ d.style.display = "none"; } }
五：修改元素属性的两种方法
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> function setText(args1,args2){ var value = document.getElementById("input1") // 点击修改属性的方法一：变量名.属性名 = xxxx // value.value = "点击后出现的文字" // 点击修改属性的方法二：变量名[属性名] = xxxx // value["value"] = "点击后出现文字" // 方法二的优点是可以进行传参，比较灵活 value[args1] = "传递参数改变" value[args2] = "鼠标移动上去显示" } </script> </head> <body> <input type="text" value="" id="input1"> <!-- 属性名字传递进去，为字符串格式 --> <input type="button" onclick="setText('value','title')" value="点击出现文字"> </body> </html>
六：补充知识：样式的优先级
样式优先级：通配符 < 标签 < class < id < style(行间)
样式设置：style.样式名 = xxx 通过style加样式 和style取样式都是将样式加到了行间样式 <div style="widht:200px"></div>
隐患：style和className的关系
例如：通过style和className操作元素的同一个属性，一定是style的属性生成后，class的属性就失效了，可以从绿变红，不能从红变绿
结论：要么一直操纵style，要么一直操作class
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ width: 200px; height: 200px; border: 1px solid black } .box{ background-color: green; } </style> </head> <body> <input type="button" value="变红" onclick="toRed()"> <input type="button" value="变绿" onclick="toGreen()"> <div id="div1"></div> <script> var divbox = document.getElementById("div1") function toGreen(){ divbox.className = 'box' } function toRed(){ divbox.style.backgroundColor = "red" } </script> </body> </html>
七：提取行间事件
<input type="button" value="变绿" onclick="toGreen()"> onclick就是行间事件
（一） 提取事件例子：通过js给元素增加行间点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn1"> <script> var btn = document.getElementById("btn1") function (){ alert("今天吃火锅"); } btn.onclick=haha; </script> </body> </html>
匿名函数实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="button" value="按钮" id="btn1"> <script> var btn = document.getElementById("btn1") // 匿名函数的写法 btn.onclick = function (){ alert("今天吃火锅"); } </script> </body> </html>
window.onload匿名函数
作用：解决在head里面加载js找不到body里面元素的报错，原理是先加载完整个窗口后，再执行函数里面的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function(){ var btn = document.getElementById("btn1") // 匿名函数的写法 btn.onclick = function (){ alert("今天吃火锅"); } } </script> </head> <body> <input type="button" value="按钮" id="btn1"> </body> </html>
行为js-样式css-结构html 三者分离
getElementsByTagName
作用：getElementById是一次获得一个元素，精准定位，getElementsByTagName一次获取一组元素，批量操作
前提知识点：循环
<script> window.onload = function(){ var i = 0; while(i<10){ alert(i); i = i + 1; }
} </script>
<script> window.onload = function(){
# 三元表达式 for(var i=0;i<10;i++){ alert(i) } }
</script>
例子：给所有的div改变背景颜色
<script> window.onload = function(){ var divarr = document.getElementsByTagName("div") for(var i=0;i<divarr.length;i++){ divarr[i].style.backgroundColor="red" } } </script>
全选 复选 不选
需求：点击全选按钮，所以的checkbox都出现对勾，点击取消按钮，取消对勾，点击反选 ，有对勾变没对勾，没对勾变有对勾
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function(){ var b1 = document.getElementById("btn1") var b2 = document.getElementById("btn2") var b3 = document.getElementById("btn3") var v1 = document.getElementById("div1") var inputarr = v1.getElementsByTagName("input") b1.onclick = function(){ for(var i=0;i<inputarr.length;i++){ inputarr[i].checked = true; } }; b2.onclick = function(){ for(var i=0;i<inputarr.length;i++){ inputarr[i].checked = false; } }; b3.onclick = function(){ for(var i=0;i<inputarr.length;i++){ if (inputarr[i].checked==true){ inputarr[i].checked=false; } else{ inputarr[i].checked=true; } } } } </script> </head> <body> <input type="button" value="全选" id="btn1"> <input type="button" value="取消全选" id="btn2"> <input type="button" value="反选" id="btn3"> <div id="div1"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> </body> </html>
网站导航栏，鼠标移到那个栏目，显示哪个栏目的消息：引入this的概念，表示当前事件的标签
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> <style> #div1{ 185px; height: 600px; border: 1px solid green } #div1 div{ display: none; } .active{ background-color: yellow; } </style> <script> window.onload = function(){ var buton_arr = document.getElementsByTagName("input") var div1 = document.getElementById("div1") var div_arr = div1.getElementsByTagName("div") for(var i=0;i<buton_arr.length;i++){ // 为了查找div buton_arr[i].index = i buton_arr[i].onclick = function(){ for(var i=0;i<buton_arr.length;i++){ div_arr[i].style.display = "none"; buton_arr[i].className = ""; } // this表示当前事件的标签本身 this.className = "active"; div_arr[this.index].style.display = "block"; } } }; </script> </head> <body> <input type="button" value="新闻"> <input type="button" value="体育"> <input type="button" value="娱乐"> <input type="button" value="电影"> <div id="div1"> <div style="display:block">浙江温州江南皮革厂倒闭了</div> <div>科比手感不佳，只得了36分</div> <div>赵薇出演画皮3</div> <div>大宝贝和黄晓明共同出演电视剧,毛豆新车网</div> </div> </body> </html>
简易日历
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js简易日历</title> <style> #big_div{ width: 350px; height: 1000px; /* border: 1px solid black */ } #month { width: 310px; height: 410px; /* border: 1px solid red; */ } #month div{ width: 100px; height: 100px; border: 1px solid greenyellow; text-align: center; vertical-align: bottom; background-color: gray; float: left; } #text{ width: 305px; border: 1px solid pink; height: 300px; /* float: left; */ } #text div{ display: none; } </style> <script> window.onload = function(){ var div_month = document.getElementById("month") var div_arr = div_month.getElementsByTagName("div") var text_div = document.getElementById("text") var text_arr = text_div.getElementsByTagName("div") for(var i=0;i<div_arr.length;i++){ div_arr[i].index = i div_arr[i].onclick = function(){ for(var i=0;i<div_arr.length;i++){ div_arr[i].style.backgroundColor="gray"; text_arr[i].style.display = "none"; } this.style.backgroundColor = "yellow"; text_arr[this.index].style.display="block"; } } } </script> </head> <body> <div id = "big_div"> <div id="month"> <div style="display: block"><h3>一月份</h3><p>Jan</p></div> <div><h3>二月份</h3><p>Feb</p></div> <div><h3>三月份</h3><p>Mar</p></div> <div><h3>四月份</h3><p>Apr</p></div> <div><h3>五月份</h3><p>May</p></div> <div><h3>六月份</h3><p>Jun</p></div> <div><h3>七月份</h3><p>Jul</p></div> <div><h3>八月份</h3><p>Aug</p></div> <div><h3>九月份</h3><p>Sept</p></div> <div><h3>十月份</h3><p>Oct</p></div> <div><h3>十一月份</h3><p>Nov</p></div> <div><h3>十二月份</h3><p>Dec</p></div> </div> <div id="text"> <div>一月通常称：正月、端月、初月</div> <div>二月常称：仲春、仲阳、如月； </div> <div>三月常称：暮春、末春、晚春；</div> <div>四月常称：孟夏、首夏、初夏；</div> <div>五月常称：仲夏、超夏；</div> <div>六月常称：荷月、季月、伏月； </div> <div>七月常称：孟秋、初秋、新秋； </div> <div>八月常称：仲秋、正秋；</div> <div>九月常称：季秋、晚秋、暮秋； </div> <div>十月常称：孟冬、初冬、上冬； </div> <div>十一月常称：仲冬、中东； </div> <div>十二月常称：季冬、严冬、残冬； </div> </div> </div> </body> </html>
八：取模的运用 12%5 = 2
（一）：标签栏，黄绿交替出现
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>交替变色</title> <script> window.onload = function(){ var li_arr = document.getElementsByTagName("li") for(var i=0;i<li_arr.length;i++){ if(i%2==0){ li_arr[i].style.backgroundColor="green" }else{ li_arr[i].style.backgroundColor="yellow" } } }; </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
（二）秒转时间
<script> window.onload = function(){ var s = 345; alert( parseInt(s/3600)+"小时"+parseInt(s/60)+"分"+s%60 + "秒") } </script>
九：运算器
需求：输入框输入数值，进行相加，非数值进行提醒
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>交替变色</title> <script> window.onload = function(){ var n1 = document.getElementById("input1"); var n2 = document.getElementById("input2"); var n3 = document.getElementById("button1"); n3.onclick = function(){ var v1 = parseInt(n1.value); # 将字符串数字转成整数，缺点3.5--->3 parseFloat 3.5--->3.5 3--->3 推荐使用parseFloat var v2 = parseInt(n2.value); // isNaN(x) 检查x参数是否为是非数字值 if(isNaN(v1)&& (!isNaN(v2))){ # && ----> and ！----> not || ----> or alert("第一个值输入有误") } else if(isNaN(v2) && (!isNaN(v1))){ alert("第二个值输入有误") } else if(isNaN(v1)&&isNaN(v2)){ alert("两个值都输入有误") } else{ alert("两个值的和是"+(v1+v2)) } } }; </script> </head> <body> <input type="text" id="input1"> <input type="text" id="input2"> <input type="button" value="点击我" id="button1"> </body> </html>
判等
a = "5"
b = 5
a == b true # 转换类型后，判断
a === b flase # 不转换类型，判断
十：变量的作用域和闭包
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>局部变量与全局变量</title> <script> window.onload = function(){ function f1(){ // 外函数的局部变量，内函数可以直接使用 var a = 10; function f2(){ alert("a") } // python这里是 return f2 js里面是直接调用f2函数。 f2(); } // 闭包的调用-调用外函数，其实就是调用内函数 f1(); } </script> </head> <body> </body> </html>
十一：变量的命名，匈牙利命名法
aTest---数组 sTest---字符串 oTest---存对象
类型前置，单词首字母大写
十二： 循环 break continue
window.onload = function(){ var a = 0; for(var a=0;a<10;a++){ if(a==5){ // break; continue; }else{ alert(a) } } }
十三：json字符串
<script> window.onload = function(){ // 定义 var json = {"name":"zhangsan","habbit":[{"week1":"骑马"},{"week2":"高尔夫"}],"address":{"city":"西安"},"age":12} // 可以取到值 alert(json.name) // 取值 alert(json.habbit[0].week1) alert(json.habbit[1].week2) alert(json.address.city) alert(++json.age) }; </script>
十四：函数的返回值
（一）：最简单的返回值
<script> function show(){ return 12; } alert(show()); </script>
<script> window.onload = function(){ function show(a,b){ return a + b; } alert(show(12,12)) } </script>
（二）不定参数的函数
<script> window.onload = function(arguments){ function show(){ // 其实arguments就是一个数组,用来存储外面传递的参数 var result = 0; for(var i = 0;i<arguments.length;i++){ result = result + arguments[i] } return result; } alert(show(1,2,3,4,5,6,7,8,9,10)) } </script>
（三）CSS 函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>json数据格式</title> <script> function CSS(){ if(arguments.length==2){ return arguments[0].style[arguments[1]] }else{ arguments[0].style[arguments[1]] = arguments[2]; } } window.onload = function(arguments){ var oDiv = document.getElementById("div1"); CSS(oDiv,"background-color","green"); } </script> </head> <body> <div id="div1" style=" 200px;height:200px;background-color: red;">demo</div> </body> </html>
css函数总结：传两个参数返回样式值，传三个参数设置样式
对上面的函数进行改造
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>json数据格式</title> <script> function CSS(obj,name,value){ if(arguments.length==2){ return obj.style[name] }else{ obj.style[name] = value; } } window.onload = function(arguments){ var oDiv = document.getElementById("div1"); CSS(oDiv,"background-color","green"); } </script> </head> <body> <div id="div1" style=" 200px;height:200px;background-color: red;">demo</div> </body> </html>
style 是取行间样式，那么非行间样式怎么取呢，currentStyle取非行间样式，getcomputerStyle()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>json数据格式</title> <style> #div1 { width: 200px; height:200px; background-color: red; } </style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); // chrome下取不到值 // alert(oDiv.style["width"]) // chrome下显示未定义, ie上面正常 // alert(oDiv.currentStyle); // chrome上正常显示，火狐正常显示 // alert(getComputedStyle(oDiv,false).width) if(oDiv.currentStyle){ alert(oDiv.currentStyle.width) } else{ alert(getComputedStyle(oDiv,false).width) } } </script> </head> <body> <div id="div1">demo</div> </body> </html>
十五：数组
（一）数组的创建
var aArr1 = [1,2,3];
var aArr2 = new Array(1,2,3);
alert(typeof(aArr1));
alert(typeof(aArr2));
（二）数组元素的增删改查
<script> window.onload = function(){ var aArr1 = [1,2,3,4,5]; // 增加，默认是末尾插入 aArr1.push(6); alert(aArr1); // 往头部添加元素 aArr1.unshift(); // 删除，指定元素 aArr1.pop(6); alert(aArr1); // 从头部删除 aArr1.shift(); alert(aArr1); } </script>
数组的splice（参数一（必填：index），参数二（必填：指令编码（0,1,2）），参数三（选填：元素））
# TODO 例子
（三） 数组的拼接
<script> window.onload = function(){ var aArr1 = [1,2,3,4,5]; var aArr2 = [6,7,8,9,10]; // 数组的拼接 var aArr3 = aArr1.concat(aArr2); alert(aArr3); } </script>
（四）数组的 join 元素拼接：ajax拼接url
<script> window.onload = function(){ var aArr1 = [1,2,3,4,5]; var sDemo = aArr1.join("+"); // 字符串 alert(typeof(sDemo)); // 1+2+3+4+5 alert(sDemo); } </script>
（五）数组的排序
<script> window.onload = function(){ var aArr1 = [1,2,5,4,3]; aArr1.sort(function(n1,n2){ return n1 - n2 }) alert(aArr1); } </script>
###### TODO