javascript的基础知识点
一:鼠标提示框
需求描述:鼠标移入都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 { width: 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{ width: 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>
七:提取行间事件
<!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{ width: 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="width: 200px;height:200px;background-color: red;">demo</div> </body> </html>
css函数总结:传两个参数返回样式值,传三个参数设置样式
对上面的函数进行改造
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="width: 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