一、JS
1.函数function
1.1 arguments对象和函数的方法及属性
arguments对象中存放了调用该函数时传递的实际参数
//arguments对象中存放了调用该函数时传递的实际参数 function fun(){ console.log(arguments.length); for(var i in arguments){ console.log(arguments[i]); } } fun(1,2,3);
1.2函数的作用域
//函数作用域 js中函数可以随意嵌套 function f1(){ console.log("我是函数f1"); function f2(){ console.log("我是函数f2"); return "哈哈哈"; } return f2; } console.log(f1());//打印我是函数f1、f2函数 //console.log(f1()());//打印我是函数f1和f2函数、undefined console.log(f1()());
1.3闭包
需求：在外部想要使用函数内容的资源|数据，可以选择使用闭包 闭包： 外函数嵌套函数 外函数返回内函数 内函数中使用外函数的资源 <script type="text/javascript"> function f1(){ var i=1; return function(){ i++; console.log(i); } } console.log(f1());//返回内函数 var f=f1(); f(); f(); f(); //给花浇水例子 function water(ml){ function flower(name){ if(ml>=50){ console.log("给"+name+"浇水"+"当前还剩"+(ml-=50)); }else{ console.log("请加水"); } } return flower; } console.log(water(200)); var f=water(200); f("百合"); f("满天星"); f("玫瑰"); f("喇叭花"); </script>
1.4递归
函数自己调用自身。函数头:尽头 函数体:重复执行
a. 自己调用自己
b. 函数体根据判断结束递归调用
function print(num) { if(num == 10) { //递归头 return; } //递归体 console.log(num); print(num + 1); } print(1);
2.内置函数
String charAt(idx)：返回指定位置处的字符 indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1 substr(m,n)：返回给定字符串中从 m 位置开始，取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。 substring(m,n)：返回给定字符串中从 m 位置开始，到 n 位置结束，如果参数 n省略，则意味着取到字符串末尾。 toLowerCase()：将字符串中的字符全部转化成小写。 toUpperCase()：将字符串中的字符全部转化成大写。 replace(s1, s2)：替换，将s1替换为s2。 length: 属性，不是方法，返回字符串的长度。Math Math.random()：生成随机数 Math.ceil()：向上取整 Math.floor()：向下取整 Math.round()：四舍五入取整 Date // 获取日期时间 getFullYear()年, getMonth()月, getDate()日, getDay()周, getHours()时,getMinutes()分,getSeconds()秒 // 设置日期时间 setYear(), setMonth(), … toLoacaleString() 注意:月份从0开始 a. getMonth()：得到的值：0~11（1月~12月） b. setMonth()：设置值时0~11 c. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。 <script type="text/javascript"> /*String*/ var str="my name is hsq"; //charAt(idx)：返回指定位置处的字符 索引从0开始 str.charAt(1); console.log(str.charAt(1));//y //indexOf(Chr)：返回指定子字符串的位置，从左到右。找不到返回-1 console.log(str.indexOf('my'));//0 //substr(m,n)：返回给定字符串中从 m 位置开始， //取 n 个字符，如果参数 n 省略，则意味着取到字符串末尾。 console.log(str.substr(3,7));//name is //substring(m,n)：返回给定字符串中从 m 位置开始， //到 n 位置结束，如果参数 n省略，则意味着取到字符串末尾。 console.log(str.substring(3,7));//name //toUpperCase()：将字符串中的字符全部转化成大写。 console.log(str.toUpperCase()); //toLowerCase()：将字符串中的字符全部转化成小写。 console.log(str.toLocaleLowerCase()); //replace(s1, s2)：替换，将s1替换为s2。 console.log(str.replace(" ","")); //length: 属性，不是方法，返回字符串的长度。 console.log(str.length);//14 /*Math*/ var a=Math.random()*100; console.log(a);//77.52 //Math.ceil()：向上取整 console.log(Math.ceil(a));//78 //Math.floor()：向下取整 console.log(Math.floor(a));//77 //Math.round()：四舍五入取整 console.log(Math.round(a));//78 /*Date*/ // 获取日期时间 //getFullYear()年, getMonth()月, getDate()日, getDay()周, //getHours()时,getMinutes()分,getSeconds()秒 var date=new Date(); console.log(date); //toLoacaleString()当地时间 console.log(date.toLocaleDateString()); //getFullYear()年 console.log(date.getFullYear()); //getMonth()月 console.log(date.getMonth()+1); //getDate()日, getDay()周, console.log(date.getDate(),date.getDay()); //getHours()时,getMinutes()分,getSeconds()秒 console.log(date.getHours(),date.getMinutes(),date.getSeconds()); // 设置日期时间 //setYear(), setMonth(), … date.setFullYear(2021); date.setMonth(4); console.log(date.toLocaleDateString()); </script>
二、js对象
1.对象的创建
js中的对象 {}代表对象 键值对形式的内容 键值对之间使用,进行分隔 key:value key和value内部都是字符串 如果key符合标识符的命名规范.''可以省略 value可以为任意类型的数据 创建对象: 1.字面量的创建方式 {} 2.new Object() 使用对象中的内容: 对象.属性 对象['属性名']--万能的 //创建对象 var obj={ name:"xxh", age:18, gender:1,//0代表为女，1代表男 ball:[ { name:"篮球", weight:20 },{ name:'羽毛球', weight:5 } ], fn:function(){ console.log("很爱运动") }, o:null, "hhh":undefined }; console.log(obj); //name console.log(obj.name); console.log(obj['age']); console.log(obj["hhh"]); //创建对象 var obj2=new Object(); console.log(obj2); obj2.name="sss"; obj2["hello world"]=null; console.log(obj2); //创建对象 var obj3=Object.create(null); console.log(obj3);
2.对象序列化和反序列化
var arr=obj.ball; console.log(arr[0].name); //序列化 js对象转化JSON格式字符串 var str=JSON.stringify(arr[0]); console.log(str); //反序列化 JSON格式字符串转换js对象 var ob=JSON.parse('{"name":"篮球","weight":20}'); console.log(ob);
3.eval()
可借助eval()动态函数，将参数字符串解析成js代码来执行，只接受原始字符串作为参数
//eval() 可以把参数字符串中的内容当做js语句执行 eval("var s="+str); console.log(s);
4.this
<!-- this 关键字 this 动态绑定对象 1.this所在的函数是否通过new调用使用，如果是指向当前new的对象 2.this是通过对象.函数名使用，this指代当前调用对象 3.this默认指代window，window指全局对象 定义全局变量，默认定义window对象属性 定义全局函数，为window的功能 --> <script type="text/javascript"> //全局变量 var a=10; console.log(a); console.log(this.a); console.log(window.a); //1.this所在的函数是否通过new调用使用，如果是指向当前new的对象 function Student(name,age){ this.name=name; this.age=age; } var s=new Student("hhh",18); var s2=new Student("sss",18); console.log(s); console.log(s2); //2.this是通过对象.函数名使用，this指代当前调用对象 var obj={ a:12, fn:function(b,c){ console.log(this.a,b,c); } } obj.fn();//12,undefined,undefined //3.this默认指代window，window指全局对象 var f=obj.fn; f();//10,undefine,undefine window.f(); this.f(); var obj2={ a:24 }; //修改this指向：间接调用，是所有的函数都call和apply方法 //call(新的对象，实参列表) //apply(新的对象，参数) obj.fn.call(obj2,1,2);24,1,2 obj.fn.apply(obj2,[7,8]);24,7,8 //()->才是调用 console.log(obj.fn);//得到fn函数
三、js事件
1.理解
事件: 通过某些行为触发js代码的执行,这个行为成为事件
2.常用事件
onload：当页面或图像加载完后立即触发
onclick：鼠标点击某个对象
dbclick：鼠标双击某个对象
onblur：元素失去焦点
onfocus：元素获得焦点
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:100px; height: 100px; } #click{ background: red; } #dbclick{ background: blue; } #mouserover{ background: green; } #mouserout{ background: yellow; } #span{ font-size: 10px; color:red; } </style> </head> <body> <div id="click">点击事件</div> <div id="dbclick">双击事件</div> <div id="mouserover">移入事件</div> <div id="mouserout">移出事件</div> <input type="text" id="username" placeholder="请输入用户名"><span id="span"></span> <!-- 事件：通过某些行为触发js代码的执行，这个行为成为事件 --> <script type="text/javascript"> //单击事件 var div1=document.getElementById("click"); var div2=document.getElementById("dbclick"); var div3=document.getElementById("mouserover"); var div4=document.getElementById("mouserout"); //绑定事件 div1.onclick=function(){ console.log("点我"); } div2.ondblclick=function(){ console.log("双击"); } div3.onmouseover=function(){ console.log("移入"); } div4.onmouseout=function(){ console.log("移出"); } //失焦事件 var username=document.getElementById("username"); var span=document.getElementById("span"); username.onblur=function(){ console.log(username.value); if(username.value=='hhh'){ span.innerHTML="用户已经使用了，请更换"; } } </script> </body> </html>
3.失焦和聚焦案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 清除浏览器的默认样式 */ *{ padding: 0; margin: 0; } label{ display: inline-block; height: 42px; line-height: 42px; font-size: 14px; color: #666; width: 65px; text-align: right; font-weight: bold; margin-right: 10px; } input{ height: 16px; width: 328px; padding: 10px; display: inline-block; font-size: 14px; color: #666; margin:10px; } p{ margin-top: 20px; } span{ font-size: 12px; color: #333; } </style> </head> <body> <p> <label for="username">用户名</label> <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="func_blur()"><span id="info"></span> </p> <script> var username=document.getElementById("username"); var span = document.getElementById("info"); //为input元素绑定获取焦点事件 username.onfocus=function(){ console.log("聚焦啦1!!!"); span.innerHTML="设置后不可更改中英文即可"; span.style.width='300px'; span.style.border='none'; span.style.textAlign='left'; span.style.color='#333'; } function func_blur(){ if(username.value == 'yinwei'){ span.innerHTML="× 此用户名太受欢迎,请更换"; span.style.color='red'; }else if(username.value == ''){ span.style.display='none'; }else{ span.innerHTML="√"; span.style.display='inline-block'; span.style.width='20px'; span.style.height='20px'; span.style.textAlign='center'; span.style.lineHeight='20px'; span.style.color='green'; span.style.border='1px solid green'; span.style.borderRadius="100%"; } } </script> </body> </html>
4.事件流
<!-- 事件流： 事件冒泡： 如果点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播： 1、<div> 2、<body> 3、<html> 4、document 事件捕获： 那么单击<div>元素就会按下列顺序触发click事件： 1、document 2、<html> 3、<body> 4、<div> --> <!-- 事件冒泡 --> <div onclick="alert('so cool');">click me</div> <!-- 事件捕获 --> <div onclick="alert('so cool');" id="hhh">单击事件</div> <!-- 点击事件在全部方块中，先后顺序 由内到外 --> <div id="box"> 哈哈哈哈哈 <p id="item">呵呵呵</p> </div> <script type="text/javascript"> var id=document.getElementById("hhh"); id.onclick=function(){ alert("点击"); id.innerHTML="点击"; } var box=document.getElementById("box"); var item=document.getElementById("item"); box.onclick=function(){ console.log("我是box"); } item.onclick=function(){ console.log("我是item"); } </script>
5.事件处理程序
HTML事件处理程序
某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的
HTML特性来指定。
<input type="button" value="Press me" οnclick="alert('thanks');" />DOM0级事件处理程序
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除DOM0级方法指定的事件处理程序，只要将属性值设为null
<button id="myBtn">按钮</button> <script type="text/javascript"> var btn = document.getElementById('myBtn'); btn.onclick = function () { alert('you click a button'); } </script>DOM2级事件处理程序
可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注意，在删除的时候，不能删除匿名处理函数。
<button id="myBtn2">按钮</button> <script type="text/javascript"> var btn2 = document.getElementById('myBtn2'); // 第一种添加的方式 btn2.addEventListener('click', function(){ alert('you add a eventListener by DOM2'); }, false); btn2.addEventListener('click', function(){ alert('you add a eventListener by DOM2 again'); }, false); // 第二种添加的方式 function thread () { alert('you add a eventListener by DOM2 第三次'); } btn2.addEventListener('click', thread, false); // 移除事件 btn2.removeEventListener('click', thread, false); </script>
四、JS-BOM事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-goyHv4wt-1581509798331)(C:\Users\Hello Word\AppData\Roaming\Typora\typora-user-images\1581507945182.png)]
1.window对象
1.1打开和关闭窗口
<button type="button" onclick="funciton_open()">打开</button> <button type="button" onclick="funciton_close()">关闭</button> <script> /* window对象是BOM提供的核心全局对象 定义的全局变量和函数相当与window对象的属性和方法,window可以省略 open() 打开某个连接 close() 关闭 */ var num; function funciton_open(){ //window.open("http://www.shsxt.com"); //默认新页面打开 //window.open("http://www.shsxt.com","_self"); num=window.open("http://www.shsxt.com","_blank","width=200px,height=200px"); } function funciton_close(){ num.close(); }
1.2系统对话框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> //普通弹出框 alter alert("哈哈哈哈哈"); window.alert("看来是大家看风景"); //confirm 确认框 var flag=window.confirm("喜欢动物来看一下。。。"); console.log(flag); //输入框prompt var str=window.prompt("不应当！！！！"); console.log(str); </script> </body> </html>
1.3定时器
<div id="box1">开始</div> <div id="box2">开始</div> <script> /* js定时器 重复执行定时器 setInterval: 每隔多长时间执行一次 延迟执行定时器 setTimeout: 只执行一次 两个参数: 函数体 : yaozhi要执行的代码 毫秒数 : 间隔的时间|延迟的时间 1s=1000ms 结束定时器 */ //5s种后显示当前时间 var box1=document.getElementById("box1"); var box2=document.getElementById("box2"); var i=1; window.setTimeout(function(){ box1.innerHTML=new Date().toLocaleString(); },5000); var num; box2.onclick=function(){ console.log(123); num=setInterval(fn,1000); } function fn(){ console.log(456); box2.innerHTML=i; if(i==10){ //return; window.clearInterval(num); } i++; } </script>
1.4定时器心跳案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ line-height: 500px; text-align: center; } .heart0{ color:yellowgreen; font-size:20px; } .heart1{ color:skyblue; font-size: 60px; } .heart2{ color:palevioletred; font-size:90px; } .heart3{ color: red; font-size: 120px; } .heart4{ color: brown; font-size: 180px; } </style> </head> <body> <div class="heart0" id="box">❤</div> <script type="text/javascript"> //心跳案例 //五秒发生颜色变化，大小变化 var box=document.getElementById("box"); var i=1; window.setInterval(function fn(){ box.className="heart"+i; if(i==4){ i=0; }else{ i++; } },500); </script> </body> </html>
2.history对象
<!-- history对象 --> <p>我是A页面</p> <a href="B.html">B页面</a> <button type="button" onclick="history.forward()">去下页</button> <p>我是B页面</p> <a href="C.html">C页</a> <button type="button" onclick="history.back()">去上一页</button> <button type="button" onclick="history.forward()">去下一页</button> <p>我是C页面</p> <button type="button" onclick="history.back()">去上一页</button> <button type="button" onclick="history.go(-2)">去上上一页</button>
3.location对象
location 对象的属性href：设置或返回完整的 URL location 对象的方法 reload()：重新加载当前文档。 replace()：用新的文档替换当前文档。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" value="刷新" onclick="window.location.reload();" /> <input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" /> <script> function open_sxt(){ alert(window.location.href); /* 当前页面的url*/ //window.location.href="http://www.taobao.com"; //存在后退 location.replace("http://www.tianmao.com"); //不存在后退 } </script> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/121478.html
