文章目录
es6增加的关于数组的方法
every() 检测数值元素的每个元素是否都符合条件。
filter() 检测数值元素，并返回符合条件所有元素的数组。
forEach() 数组每个元素都执行一次回调函数。
map() 通过指定函数处理数组的每个元素，并返回处理后的数组
reduce() 将数组元素计算为一个值（从左到右）
<script type="text/javascript">
var arr=[10,20,30,40,10,50,8,1,3,5,7,9];
//判断数组中的元素是不是都是偶数
var f=arr.every(function(ele){
return ele%2==0
});
alert(f);
//把数组中的偶数过滤出来 返回处理后的结果数组
var newArr=arr.filter(function(ele){
//return false; //返回true说明元素符合条件，会过滤到新数组里面，返回false说明不符合条件，那就不要。
return ele%2==0;
});
alert(newArr);
//遍历数组。
arr.forEach(function(ele,index){
alert(index+"==="+ele);
})
var arr = [10, 20, 30, 40, 10, 50, 8, 1, 3, 5, 7, 9];
//把数组中的每一个元素进行平方的一个运算。
//提取数组中的每一个元素，应用到一个新的函数上，返回处理后的结果数组。
var newArr = arr.map(function(ele) {
//return ele*ele;
return Math.pow(ele, 2);
});
alert(newArr);
//累加数组中的每一个元素。
var arr2 = [10, 20, 30, 40, 10, 50, 8, 1, 3, 5, 7, 9];
var sum=arr2.reduce(function(total,ele,index,arr){
return total+ele;
},0); //这个0是个初始值，可选参数
alert(sum);
正则表达式对象
RegExp 对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
直接量语法
/pattern/attributes创建 RegExp 对象的语法：
new RegExp(pattern, attributes);
//创建正则表达式的方式1
var regx=new RegExp('[a-z]+','i');
//创建正则表达式的方式2 常用
var regx2=/[a-z]/i;
var str = "hello123";
//这里注意的是需要加上 ^ 开头 $ 结尾，否则会对str进行局部匹配（例如满足0-9即可），导致匹配不完整而判断错误
//i 模式 表示不区分大小写
var reg = /^[A-Z0-9]+$/i;
//var reg=new RegExp('^[A-Z0-9]+$','i');
//test() 用来匹配正则
var flag=reg.test(str);
alert(flag);
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
//查找出三个字符组成的单词。
var str = "da jia hao hao xue xi a";
var regx = /\b[a-z]{3}\b/ig;
var s=regx.exec(str); //获取出符合正则的字符串。
alert(s);
s=regx.exec(str);
alert(s);
s=regx.exec(str);
alert(s);
s=regx.exec(str);
alert(s);
split与replace
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
//split 把字符串分割为字符串数组。
var str="aaa=bbb=ccc=ddd";
//根据普通的字符串来切割。
//var arr=str.split("=");
//根据正则表达式来切割。
var arr=str.split(/=/);
alert(arr);
var str2="aaa=bbb=ccc=ddd";
//把=替换成#
//根据正则来替换，注意 g 全文替换。
var newStr=str2.replace(/=/g,"#");
document.write(newStr);
BOM
browser object model的缩写 浏览器对象模型，将浏览器的各个组成部分看做一个对象，这些BOM对象有浏览器来创建，我们可以获取使用。
BOM的组成部分
window 视口对象
location 地址栏对象
history 历史记录对象
screen 屏幕对象
navigator 浏览器对象
Window 对象
Window 对象表示浏览器中打开的窗口。
浏览器会为 HTML 文档创建一个 window 对象，
属性：
浏览器对象模型中的其他四个对象，可以通过window对象中的属性来获取。
var his=window.history;
var loc=window.location;
var sc=window.screen;
var nav=window.navigator;
//获取html文档对象。
var doc=window.document;
//方法：有关于弹框的方法
//window 对象可以省略不写。
window.alert("弹一个警告框")
//弹出一个确认取消框,用户点击了确定，返回true，点击了取消就返回false
var r=window.confirm("你确定吗？");
document.write(r);
//弹出输入框。返回值就是用户输入的内容
var addr=window.prompt("请输入你的收件地址");
document.write(addr);//返回到显示的页面上
window对象中打开窗口的方法
定义函数使用判断来打开窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var newWindow=null; //新窗口全局变量 定义全局变量也可以不加var
function into(){
if(window.confirm("你要进入这个网站吗？")){
//打开一个页面,open() 返回值返回的是新打开的那个窗口对象。
newWindow=window.open("http://www.163.com");
}
}
function closeWindow(){
if(window.confirm("你确定要关闭本窗口吗？")){
window.close();
}
}
function close163(){
if(window.confirm("你确定要关闭新打开的窗口吗？")){
newWindow.close();
}
}
</script>
</head>
<body>
<a href="javascript:void(into())">进入网易</a>
<a href="javascript:void(closeWindow())">关闭本窗口</a>
<a href="javascript:void(close163())">关闭新窗口</a>
</body>
</html>
定时器
//写一个函数表示定时器执行的内容。
var show = function() {
alert("定时器执行了");
}
//设置定时器，2s后执行，返回的是定时器的id
var timeID = window.setTimeout(show, 2000)
//取消定时器。根据定时器的id来取消。
window.clearTimeout(timeID);
循环定时器
一个循环定时器每隔1s对count++，一个循环定时器每隔1s对count输出到控制台
var count=1;
var id=window.setInterval(function(){
count++;
},1000);
var id2=window.setInterval(function(){
console.log(count);
},1000);
//根据id来清除定时器。
clearInterval(id);
clearInterval(id2)
通过循环定时器写一个页面时钟
写一个显示时间的函数，使用循环定时器每隔1s去调用函数，页面的时间就会跳转起来，就是一个页面时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/moment.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 id="time">2020-10-03 11:17:30</h1>
</body>
</html>
<script type="text/javascript">
//通过id获取标签对象。
var time = document.getElementById("time");
//设置标签之间的内容
function showTime(){
var dateStr2=moment().format('YYYY-MM-DD HH:mm:ss');
time.innerText=dateStr2;
}
//使用定时器让函数循环执行。
setInterval(showTime,1000);
</script>
地址栏对象
href 设置或返回完整的 URL。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function into(){
if(window.confirm("你要进入网易吗？")){
//window.open("http://www.163.com");
//href 是个属性，可以获取或设置地址栏里面的内容。 可以跳转页面
window.location.href="http://www.163.com";
}
}
</script>
</head>
<body>
<a href="javascript:void(into())">进入网易</a>
</body>
</html>
//URL:统一资源定位符，用来描述网络中的一个具体的资源路径
//http://192.168.16.123:8080/a/
alert(location.hostname);
alert(location.host);
alert(location.port);
alert(location.protocol);
alert(location.pathname);
地址栏对象的方法search
一个页面url如下： b.html?username=zhangsan&password=123456
search会获得?username=zhangsan&password=123456
先进入b页面并提交一些参数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--get请求 ?后面的我们叫做请求参数
请求参数的格式 键=值&键2=值2&键3=值3
username=zhangsan&password=123456
-->
<a href="b.html?username=zhangsan&password=123456">b页面</a>
</body>
</html>
b页面中展示的内容如下：分析提交的参数打印并提供刷新功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//search 设置或返回从问号 (?) 开始的 URL（查询部分）。
var v=window.location.search;
v=v.replace("?","");
//username=zhangsan&password=123456
var arr=v.split("&");
var one=arr[0].split("="); //username,zhangsan
var two=arr[1].split("=");//password,123456
document.write(one[0]);
document.write("<br>");
document.write(one[1]);
document.write("<br>");
document.write(two[0]);
document.write("<br>");
document.write(two[1]);
function flush(){
//重新加载页面
//console.log("刷新")
window.location.reload();
}
</script>
</head>
<body>
<h1>这是B页面</h1>
<a href="javascript:void(flush())">刷新</a>
</body>
</html>
====================================================================
history历史记录对象
先设置一个a页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function goBack(){
//window.history.back();
window.history.go(-1);
}
</script>
</head>
<body>
<h1>a页面</h1>
<a href="javascript:void(goBack())">后退</a>
</body>
</html>
运行历史记录页面：
先点击进入a页面，有了历史记录之后，再次点击后退范围历史记录页面，前进又会进入a页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function goto(){
//window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="a.html">跳转到a页面</a>
<a href="javascript:void(goto())">前进</a>
</body>
</html>
DOM思想
// DOM:Document Object Model 文档对象模型
//将HTML文档的各个组成部分看做一个对象。
//DOM对象：当HTML文档加载进浏览器，就会创建DOM对象，我们可以获取使用。
//DOM:组成部分。
//Element:标签对象。
//Text:文本对象
//Attribute:属性对象。
//Comment:注释对象。
//Node:节点对象 整个文档由（标签，文本，注释，标签还有兄弟父子这种嵌套关系。）
//Document:整个HTML文档对象。document 他可以获取或创建其他DOM对象。
//我们怎么获取出 document对象
//可以通过window对象中的document属性来获取整个文档对象。
var doc=window.document;
//window.document
只要操作DOM元素，那个加载顺序有影响，你就把script标签放到最后面
Document对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
</body>
</html>
<!-- 只要操作DOM元素，那个加载顺序有影响，你就把script标签放到最后面 -->
<script type="text/javascript">
//获取body标签对象。
var bd = window.document.body;
alert(bd);
alert(window.document.lastModified); //弹出上一次修改的时间
//alert(document.title);
document.title = "网页标题"
//bd.style.background="yellow";
alert(document.URL); //获取或设置地址栏中的内容
alert(location.href); //获取或设置地址栏中的内容
//write() 向文档写 HTML 表达式 或 JavaScript 代码。
window.document.write("<h1 style='color:red'>一行标题</h1>")
window.document.writeln("<span style='color:red'>一行标题</span>")
window.document.write("<br>")
window.document.writeln("<span style='color:red'>一行标题</span>")
</script>
Document对象的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="bd">
<h1 id="myH">一行标题</h1>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
</body>
</html>
<script type="text/javascript">
//通过id 或一个标签对象。
var myH = document.getElementById("myH");
//var bd=document.body;
var bd2=document.getElementById("bd");
//通过class属性值，获取多个标签对象数组。
var h2Arr=document.getElementsByClassName("myh2");
for(let i=0;i<h2Arr.length;i++){
if(i%2==0){
h2Arr[i].style.background="red";
}else{
h2Arr[i].style.background="yellow";
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
</body>
</html>
<script type="text/javascript">
//根据标签名称，获取多个标签对象的数组
var h1Arr= document.getElementsByTagName("h1");
for(let i=0;i<h1Arr.length;i++){
if(i%2==0){
h1Arr[i].style.background="red"
}else{
h1Arr[i].style.background="blue"
}
}
h1Arr[0].style.color="white";
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="username" id="d1" value="" />
<br>
<input type="text" name="password" id="d2" value="" />
<br>
<input type="checkbox" name="hobby" id="d3" value="" />绘画
<input type="checkbox" name="hobby" id="d4" value="" />音乐
</body>
</html>
<script type="text/javascript">
//针对表单标签，有一个方法getElementsByName，可以获取表单对象
//注意返回的是数组对象
var arr1=document.getElementsByName("username");
arr1[0].style.border="2px red solid";
//注意返回的是数组对象
var arr2=document.getElementsByName("hobby");
arr2[0].checked=true;
arr2[1].checked=true;
</script>
标签对象的两个常用属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh2">
<span>222222行文本内容</span>
</h1>
</body>
</html>
<script type="text/javascript">
//标签对象里面有一个属性，可以获取标签之间的内容
var ele2=document.getElementById("myh2");
var v2=ele2.innerHTML; //获取标签之间的子标签和文本内容。即不翻译子标签的内容
alert(v2);
v2=ele2.innerText; //获取标签之间的文内容，会忽略子标签。 即翻译子标签的内容
alert(v2);
</script>
=============================
标签对象里面有一个属性，设置标签之间的内容
<body>
<h1 id="myh"></h1>
</body>
var ele = document.getElementById("myh");
ele.innerHTML="abc";
ele.innerText="abc";
innerHTML可以设置子标签文本
ele.innerHTML = "<span style='color: red;'>aaaaa</span>";
而innerText只设置文本
var ele = document.getElementById("myh");
ele.innerText= "<span style='color: red;'>aaaaa</span>";
动态创建DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">阿斯顿发顺丰</h1>
</body>
</html>
<script type="text/javascript">
var bd = document.body;
//创建标签对象。
var myDiv = document.createElement("div");
//创建文本对象
var myText = document.createTextNode("这是标签之间的文本。")
myDiv.appendChild(myText);
//创建属性对象。
var myAttr = document.createAttribute("style");
//给属性设置值。
myAttr.value = "color:red;font-size:30px";
//给标签设置属性对象。
myDiv.setAttributeNode(myAttr);
//给标签直接设置属性，括号里面 属性名和属性值。
//myDiv.setAttribute("style", "color:red;font-size: 40px;");
myDiv.setAttribute("align", "center");
//删除属性。根据属性名来删除属性。
myDiv.removeAttribute("align");
//删除属性对象。传入的是属性对象。
myDiv.removeAttributeNode(myAttr);
//删除标签对象。
//创建注释
var comm = document.createComment("这是一行注释。")
//添加子元素
bd.appendChild(myDiv);
bd.appendChild(comm);
//自己干掉自己。
//myDiv.remove();
//站在父元素的角度，来删除他里面的子元素。
bd.removeChild(myDiv);
//替换子元素。
//替换子元素，值1：新的元素，值2：是要替换的旧元素。
// bd.replaceChild(h4,h);
var oldEle=document.getElementById("myh1");
var newEle=document.createElement("h2");
newEle.innerText="h2222222222";
bd.replaceChild(newEle,oldEle);
//站在父标签的角度，给h1标签对象，前面插入h5这个标签对象。
//bd.insertBefore(h5,h1);
var myH5=document.createElement("h5");
myH5.innerHTML="5555555555555555"
bd.insertBefore(myH5,newEle);
</script>
事件
//JS中的事件
// * 事件源：事件发生的组件。比如按钮
// * 监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
// * 绑定事件：将监听器绑定到事件源上，监听事件的发生
//事件类型:单击事件，双击事件，按键按下事件，鼠标事件。。。。。。。
//事件的处理：事件的发生后怎么去处理，就是一个处理函数。
如何给元素绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 一个元素上面可以绑定多个事件。 -->
<button type="button" onclick="show()" ondblclick="test()">一个按钮</button>
<input type="button" name="btn" id="btn1" value="按钮" />
<input type="button" name="btn" id="" value="按钮" />
<input type="button" name="btn" id="" value="按钮" />
<input type="button" name="btn" id="" value="按钮" />
</body>
</html>
<script type="text/javascript">
//事件的绑定方式1:直接在标签上绑定。
function show() {
alert("点击了");
}
function test() {
alert("你双击");
}
//绑定方式2：用代码动态绑定
var btn=document.getElementById("btn1");
btn.onclick=function(){
alert(11111);
}
var btns=document.getElementsByTagName("input");
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
//小发现：就是这个 i 如果用let来定义，我们发现用btns[i]是可以的，可以不使用this
//btns[i].style.background="pink";
//this 表示你当前触发了那个事件的元素对象。
this.style.background="blue";
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 一个元素上面可以绑定多个事件。 -->
<button type="button" id="btn">一个按钮</button>
</body>
</html>
<script type="text/javascript">
// 3. 通过 addEventListener() 方法 来添加事件
// 语法：document.getElementById("myBtn").addEventListener("click",事件处理函数);
// //移除事件 值1：事件名 值2：事件处理函数
// document.getElementById("myBtn").removeEventListener('click',show);
var btn = document.getElementById("btn");
var show=function(){
alert("呵呵");
}
var show3=function(){
alert("哈哈");
}
var show2=function(){
//alert("呵呵");
this.style.background="red";
}
btn.addEventListener('click',show);
btn.addEventListener('click',show3);
btn.addEventListener('mouseover',show2);
//移除事件
btn.removeEventListener('mouseover',show2);
btn.removeEventListener('click',show3);
</script>
表单事件
表单的数据要填写的符合我们定义的规则，才能往后台提交，不要给后台提交不符合规则的数据，表单的提交会触发一个事件onsubmit
onsubmit="return true" 返回true 表单会提交
onsubmit="return false" 返回false 表单不会提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 前台校验，有经验的用户是可以绕过去的，那么后台还得进行二次校验。 -->
<center>
<h1>用户注册</h1>
<form action="#" method="get" onsubmit="return checkFormData()">
用户名：<input type="text" name="username" id="uname" value="请输入用户名6-16字母" onfocus="test()" onblur="checkUsername()" />
<span id="usp"></span>
<br>
密码：<input type="password" name="password" id="upwd" value="" placeholder="请收入密码6-16数字" onblur="checkPassword()" /><span
id="psp"></span>
<br>
<input type="submit" value="注册" />
</form>
</center>
</body>
</html>
<script type="text/javascript">
function checkFormData() {
//校验用户的用户名和密码是否符合我们定义的规则。
return checkUsername() && checkPassword();
}
function test() {
//清空掉表单中的默认值
var uname = document.getElementById("uname");
uname.value = "";
}
//校验用户名的规则
function checkUsername() {
//获取用户输入的用户名
var uname = document.getElementById("uname").value;
//用户名的规则是 6-16位字母
var regx = /^[a-z]{6,16}$/i;
var f = regx.test(uname);
if (f) {
//alert("规则正确")
document.getElementById("usp").innerHTML = "<span style='color: green;'>用户名规则正确</span>"
} else {
//alert("规则不正确")
document.getElementById("usp").innerHTML = "<span style='color:red;'>用户名规则错误</span>"
}
return f;
}
//校验密码的规则
function checkPassword() {
//alert("校验密码");
//获取用户输入的密码
var pwd = document.getElementById("upwd").value;
//密码的规则是 6-16位数字
var regx = /^[0-9]{6,16}$/;
var f = regx.test(pwd);
if (f) {
//alert("规则正确")
document.getElementById("psp").innerHTML = "<span style='color: green;'>密码规则正确</span>"
} else {
//alert("规则不正确")
document.getElementById("psp").innerHTML = "<span style='color:red;'>密码规则错误</span>"
}
return f;
}
</script>
1359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
