JavaScript
//es6添加的关于数组的方法
//every() 检测数值元素的每个元素是否都符合条件。
//filter() 检测数值元素，并返回符合条件所有元素的数组。
//forEach() 数组每个元素都执行一次回调函数。
//map() 通过指定函数处理数组的每个元素，并返回处理后的数组
//reduce() 将数组元素计算为一个值（从左到右）
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 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);
//正则表达式对象
//创建方式
1.new RegExp('[a-z]+','i');
2.var regx=/[a-z]/i
var str = "hello123";
//这里注意的是需要加上 ^ 开头 $ 结尾
//i 模式 表示不区分大小写
var reg = /^[A-Z0-9]+$/i;
//var reg=new RegExp('^[A-Z0-9]+$','i');
//test() 用来匹配正则
var flag=reg.test(str);
alert(flag);
//查找出三个字符组成的单词。
var str = "da jia hao hao xue xi a";
//g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
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 把字符串分割为字符串数组。
var str="aaa=bbb=ccc=ddd";
//根据普通的字符串来切割。
var arr=str.split("=");
//根据正则表达式来切割。
var arr=str.split(/=/);
alert(arr);
var str2="aaa=bbb=ccc=ddd";
//把=替换成#
// 字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
//根据正则来替换，注意 g 全文替换。
var newStr=str2.replace(/=/g,"#");
document.write(newStr);
//match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
//返回的是指定的值
var str="Hello world!"
document.write(str.match("world") + "<br />")//world
document.write(str.match("world!"))//world!
var str1="1 plus 2 equal 3 4 5 6 7"
//返回的是个数组
var ss=str1.match(/\d+/g) //根据正则去找，找到符合的放到数组中
document.write(ss)//1,2,3,4,5,6,7
document.write("<hr>")
var str2="Visit W3School!"
document.write(str2.search(/W3School/))
document.write("<hr>")//6
var index=str2.indexOf("W3School");
document.write(index);//6
Boolean 对象
var f=new Boolean(false);
//把字符串的true 转换成布尔类型的true
var f2=Boolean("true");
alert(f2==true);
BOM思想
//BOM 浏览器对象模型，将浏览器的各个组成部分看做一个对象，这些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.wirte(r);
//弹出一个输入框，返回用户输入的数据
var addr=window.prompt("请输入收件地址")
document.write(addr);
//打开与关闭窗口的方法
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var v=null;
function into(){
if(window.confirm("确定进入这个网站吗？")){
v=window.open("http://www.baidu.com");
}
}
function closeWindow(){
if(window.confirm("确定关闭这个网站吗？")){
window.close();
}
}
function closebaidu(){
if(window.confirm("确定关闭百度吗？")){
v.close();
}
}
</script>
</head>
<body>
<a href="javascript:void(into())">打开百度</a>
<a href="javascript:void(closeWindow())">关闭该窗口</a>
<a href="javascript:void(closebaidu())">关闭百度</a>
</body>
//定时器的方法
//执行一次的定时器
var show = function() {
alert("定时器执行了");
//document.body.style.background="red";
}
//设置定时器，返回的是定时器的id
var timeID = window.setTimeout(show, 2000)
//取消定时器。根据定时器的id来取消。
window.clearTimeout(timeID);
//循环执行的定时器
var count=1;
var id=window.setInterval(function(){
count++;
},1000);
var id2=window.setInterval(function(){
console.log(count);
},1000);
//根据id来清除定时器。
clearInterval(id);
clearInterval(id2)
//页面时钟
<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");
//alert(time);
//设置标签之间的内容
//time.innerText="2020-10-03 11:20:30"
function showTime(){
//var timeStr=new Date().toLocaleString();
var dateStr2=moment().format('YYYY-MM-DD HH:mm:ss');
time.innerText=dateStr2;
}
showTime();
//使用定时器让函数循环执行。
setInterval(showTime,1000);
</script>
//地址栏(location)对象
//href 设置或返回完整的 URL。
var v=window.location.href;
alert(v);
//设置地址栏里面的内容，可以跳转页面
window.location.href="http://www.163.com";
function into(){
if(window.confirm("你要进入网易吗？")){
//window.open("http://www.163.com");
//href 是个属性，可以获取或设置地址栏里面的内容。
window.location.href="http://www.163.com";
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com">进入百度</a>
<a href="javascript:void(into())">进入网易</a>
</body>
// var loc=window.location;
// var v=loc.href;
// window.location.href
//URL:统一资源定位符，用来描述网络中的一个具体的资源路径
//http://192.168.16.123:8080/a/
alert(location.hostname);//设置或返回当前 URL 的主机名
alert(location.host);//设置或返回主机名和当前 URL 的端口号。
alert(location.port);//设置或返回当前 URL 的端口号。
alert(location.protocol);//设置或返回当前 URL 的协议。
alert(location.pathname);//设置或返回当前 URL 的路径部分。
//历史记录(history)对象
b.html
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function goto(){
window.history.go(1)
}
</script>
</head>
<body>
<a href="a.html">跳转到a页面</a>
<a href="javascript:void(goto())">前进</a>
</body>
a.html
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function goBack(){
window.history.go(-1)
}
</script>
</head>
<body>
<h1>a页面</h1>
<a href="javascript:void(goBack())">后退</a>
</body>
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
//document对象
<!-- 只要操作DOM元素，那个加载顺序有影响，你就把script标签放到最后面 -->
<script type="text/javascript">
//获取body标签对象。
var bd = window.document.body;
alert(bd);
//lastModified 返回文档被最后修改的日期和时间。
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中的方法
//获取Element对象
</head>
<body id="bd">
<h1 id="myH">一行标题</h1>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<h2 class="myh2">222222222</h2>
<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>
//根据标签名称，获取多个标签对象的数组
<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");
//针对表单标签，有一个方法，可以获取表单对象
<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">
//注意返回的是数组对象
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>
//标签对象中的两个常用属性
<body>
<h1 id="myh">一行文本内容</h1>
<h1 id="myh2">
<span>222222行文本内容</span>
</h1>
</body>
</html>
<script type="text/javascript">
var ele=document.getElementById("myh");
//标签对象里面有一个属性，可以获取标签之间的内容
var v=ele.innerHTML;
alert(v);
v=ele.innerText;
alert(v);
var ele2=document.getElementById("myh2");
var v2=ele2.innerHTML; //获取标签之间的子标签和文本内容
alert(v2);
v2=ele2.innerText; //获取标签之间的文内容，会忽略子标签。
alert(v2);
</script>
<body>
<h1 id="myh"></h1>
</body>
</html>
<script type="text/javascript">
var ele = document.getElementById("myh");
//标签对象里面有一个属性，设置标签之间的内容
ele.innerHTML="abc";
ele.innerText="abc";
//innerHTML可以设置子标签以及文本
ele.innerHTML = "<span style='color: red;'>aaaaa</span>";
//设置文本，子标签会被当成文本。
ele.innerText= "<span style='color: red;'>aaaaa</span>";
</script>
//动态的操作DOM元素
<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);
//创建注释
var comm=document.createComment("这是一行注释。");
//添加子元素
bd.appendChild(myDiv);
bd.appendChild(comm);
//给标签直接设置属性，括号里面 属性名和属性值。
myDiv.setAttribute("style", "color:red;font-size: 40px;");
//删除属性。根据属性名来删除属性。
myDiv.removeAttribute("align");
//删除属性对象。传入的是属性对象。
myDiv.removeAttributeNode(myAttr);
//站在父元素的角度，来删除他里面的子元素。
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中的事件
//事件源：事件发生的组件。比如按钮
//监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
//绑定事件：将监听器绑定到事件源上，监听事件的发生
//事件类型:单击事件，双击事件，按键按下事件，鼠标事件。。。。。。。
//事件的处理：事件的发生后怎么去处理，就是一个处理函数。
//事件的绑定方式
<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="按钮" />
<input type="button" name="btn" id="" value="按钮" />
<input type="button" name="btn" id="" value="按钮" />
<input type="button" name="btn" id="" 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
//this 表示你当前触发了那个事件的元素对象。
this.style.background="blue";
}
}
// 绑定方式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(){
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>
//表单事件
<body>
//前台校验，有经验的用户是可以绕过去的，那么后台还得进行二次校验。 -->
<center>
<h1>用户注册</h1>
//表单的数据要填写的符合我们定义的规则，才能往后台提交，不要给后台提交不符合规则的数据表单的提交会触发一个事件 onsubmit
//οnsubmit="return true" 返回true 表单会提交
//οnsubmit="return false" 返回false 表单不会提交
<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) {
document.getElementById("usp").innerHTML = "<span style='color: green;'>用户名规则正确</span>"
} else {
document.getElementById("usp").innerHTML = "<span style='color:red;'>用户名规则错误</span>"
}
return f;
}
//校验密码的规则
function checkPassword() {
//获取用户输入的密码
var pwd = document.getElementById("upwd").value;
//密码的规则是 6-16位数字
var regx = /^[0-9]{6,16}$/;
var f = regx.test(pwd);
if (f) {
document.getElementById("psp").innerHTML = "<span style='color: green;'>密码规则正确</span>"
} else {
document.getElementById("psp").innerHTML = "<span style='color:red;'>密码规则错误</span>"
}
return f;
}
</script>
600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
