概述
入门案例:循环输出HelloWorld
<script>
//js代码
for (var i = 0; i < 5; i++) {
document.write("hello World" + i + "<br>")
}
</script>
js编写位置
第一种行内位置
<!--行内位置 本标签能使用js代码-->
<input type="button" value="按钮" onclick="alert('Hello World')">
第二种内部位置编写 
外部位置编写
注意:
如果引入了外部IS文件,这个标签中的IS代码是无效的
java Script 快速入门
介绍
js基础语法-变量的定义
es5和es6变量区别
设置idea的es6模式
变量的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//ES5定义变量
var a = 10;
document.write(a + "<br/>");
//ES6定义变量
let b = 30;
document.write(b + "<br/>");
//常量(不能修改)
const c=50;
document.write(c + "<br/>");
//JS是弱类型语言:一个变量可以赋值为不同的数据类型(可以乱来)
let m=10;
m=true;
m="我就是要乱来";
document.write(m + "<br/>");
//ES6中反引号字符串(模板字符串)``
//目的是要输出10+20=30;
let x=10;
let y=20;
document.write(x+"+"+y+"="+(x+y) + "<br/>");
document.write(`${x}+${y}=${x+y}` + "<br/>");
</script>
</body>
</html>
五种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5种数据类型</title>
</head>
<body>
<script>
//number:数值型，整数和小数都行
let n1 = 10;
document.write(typeof (n1) + ":" + n1 + "<br/>");
let n2 = 6.66;
document.write(typeof (n2) + ":" + n2 + "<br/>");
//boolean:true/false
let a = true;
document.write(typeof (a) + ":" + a + "<br/>");
//string:字符串 在is中""包裹的内容和’’包裹的内容都是字符串，
let b1 = "今天学js好轻松啊!";
document.write(typeof (b1) + ":" + b1 + "<br/>");
let b2 = '今天学js好轻松啊!';
document.write(typeof (b2) + ":" + b2 + "<br/>");
//object:对象类型
// Js内置的对象Array
let obj1 = new Array(2, 3, 4);
document.write(typeof (obj1) + ":" + obj1 + "<br/>");
// 自定义JS对象:{键1:值1，键2:值2}
let obj2 = {"name": "张三", "age": 18};
document.write(typeof (obj2) + ":" + obj2 + "<br/>");
//null表示对象类型，null是obiect类型的默认值，
let obj3 = null;
document.write(typeof (obj3) + ":" + obj3 + "<br/>");
// undefine:未定义 没有给变量赋值
let x;
document.write(typeof (x) + ":" + x + "<br/>");
</script>
</body>
</html>
字符串转化数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串转化数字</title>
</head>
<body>
<script>
let a = "5"; // "5" -> 5
let b = "6";
document.write(a + b + "<br/>"); // 56
//将字符串转成整数"5"->5 Java使用Integer.parseInt("5")-> 5;
// parseInt():将字符串转成数字
document.write(parseInt(a) + parseInt(b) + "<br/>");
//parseInt能转多少算多少
document.write(parseInt("123gvhbgf") + "<br/>");
//如果一个都转不了,得到NaN(Not aNumber不是一个数字)
document.write(parseInt("sdgdrs") + "<br/>");
</script>
</body>
</html>
浏览器调试JavaScript代码
常用运算符
算术运算符
赋值运算符
比较运算符
- 字符串和数字比较,会先把字符串转化为数字在进行比较.
- 既比较值又比较类型(js中为了严谨建议使用===)
逻辑运算符
三目运算符(三元运算符)
流程控制语句
if语句
if语句条件表达式
switch语句
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例</title>
</head>
<body>
<script>
/*prompt(message, _default):表示网页的输入框
message:提示语,给用户看
_default:默认值
返回值:用户输入的数据，是string类型*/
var score = prompt("请输入您的分数", 60);
document.write(typeof (score) + ":" + score + "<br/>");
var score = parseInt(score);
document.write(typeof (score) + ":" + score + "<br/>");
// var score = prompt("请输入您的分数", 60);
// document.write(typeof (parseInt(score)) + ":" + score + "<br/>");
// 通过prompt输入的分数，如果90~100之间，输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出不及格
switch (true){
case score>=90&& score<=100:
document.write("优秀" + "<br/>");
break;
case score>=80&& score<90:
document.write("良好" + "<br/>");
break;
case score>=60&& score<80:
document.write("及格" + "<br/>");
break;
case score>=0&& score<100:
document.write("不及格" + "<br/>");
break;
default:
document.write("分数输入有误" + "<br/>");
}
</script>
</body>
</html>
while/do-while循环语句
for循环
小结
函数
命名函数
匿名函数
参数传递原理
document.getElementByld(“id”)
通过id获取一个元素(标签)
window.setInterval(“函数名()”,时间)
每隔一段时间自动调用一次指定的函数，时间是毫秒
window.setlnterval(函数名,时间)
另一种写法，功能同上
案例:轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<style>
div {
width: 600px;
margin: auto;
}
</style>
<div>
<img id="image" src="../img/0.jpg" width="600px"/>
</div>
<script>
//调用这个shijian这个函数,每隔1000毫秒调用一次;
//setInterval(函数名,时间间隔):定时器,每个指定时间执行一次前面的函数(反复执行)
setInterval(shijian, 3000);
//定义全局变量num=1;下一张图片的名字
let num = 1;
function shijian() {
//在shijian的方法中,设置图片的src属性为../img/num.jpg
document.getElementById("image").src = "../img/" + num + ".jpg";
//num++,判断num是否等于2,如果等于或者大于2.则重置为0;
num++
if (num >= 2) {
num = 0;
}
}
//创建一个函数,打印hello和时间
// function shijian() {
// document.write("hello" + new Date() + "<br/>");
// }
</script>
</body>
</html>
总结
语法规则
基本选择器
常见的css样式
基础语法
五种数据类型
函数语法
定时器
JS处理事件(*)
事件介绍
用户可以对网页的元素有各种不同的操作:如 单击,双击,鼠标移动等这些操作就成为事件,事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行
常用事件
两种方式设置事件
单击事件
设置事件的两种方式:
命名函数
通过标签中的事件属性进行绑定
<button> type = "button" onclick = "函数名()" </button>
匿名函数
通过DOM元素属性绑定
document.getElementById("btn").onclick = function(){
}
事件案例
命名函数设置事件-通过双击复制上一个输入框内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双击事件</title>
</head>
<body>
<from>
姓名1:<input id="input1" name="username1"/><br/>
姓名2:<input id="input2" name="username2"/><br/>
<!-- 使用命名函数设置事件:ondblclick双击事件,鼠标双击时触发这个时间-->
<input type="button" value="鼠标双击复制" ondblclick="copy()">
</from>
<script>
//双击复制
function copy() {
//1.得到第一个输入框的内容,value就是输入框输入的内容
let str= document.getElementById("input1").value;
//2.将内容赋值给第二个输入框
document.getElementById("input2").value=str;
}
</script>
</body>
</html>
命名函数设置事件-根据焦点得到或失去提示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>得到失去焦点事件</title>
</head>
<style>
#msg {
color: red;
}
</style>
<body>
<!--命名函数设置事件-->
<!--onfocus:输入框得到焦点的事件-->
<!--onblue:输入框时区焦点的事件-->
用户名:<input type="text" id="a1" onfocus="f1()" onblur="f2()"> <span id="msg">请输入</span>
<script>
//输入框得到焦点的事件
function f1(){
//把提示文字改成"正在输入"
// innerTest设置标签的主体内容的文字
document.getElementById("msg").innerText="正在输入"
}
//输入框失去焦点的事件
function f2(){
//把提示文字改成"请输入"
document.getElementById("msg").innerText="请输入"
}
</script>
</body>
</html>
将输入的内容转换为大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>值改变大写</title>
</head>
<body>
英文1:<input type="text" id="input1"><br/>
英文2:<input type="text" id="input2"><br/>
<!--匿名函数设置事件-->
<script>
//找到第一个输入框设置改变的事件
//onchange:值改变事件,输入框的值改变了就会触发这个函数
document.getElementById("input1").onchange = function () {
//1.得到输入框的内容
var str = document.getElementById("input1").value;
//2.将得到的内容转化为大写并赋值给第二个输入框;
//toUpperCase:转化为大写
document.getElementById("input2").value = str.toUpperCase();
}
</script>
</body>
</html>
网页加载完成时事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页加载完显示事件</title>
<script>
//window.onload:网页加载完成时调用
window.onload = function () {
alert("网页加载完...")
}
</script>
</head>
<body>
<h3>我是h3</h3>
<h3>我是h3</h3>
<h3>我是h3</h3>
<h3>我是h3</h3>
</body>
</html>
JS内置对象
数组对象
创建数组的四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的四种创建方式</title>
</head>
<body>
<script>
//JS创建数组的四种方式//Array是JS中内置的对象
// 方式一:创建一个长度为0的数组 (一个数字表示数组的长度)
let arr1 = new Array();
document.write(arr1 + "<br/>");
// 方式二:创建一个长度为5的数组，没有数据
let arr2 = new Array(5);
document.write(arr2 + "<br/>"); //,,,,
//方式三:创建数组,保存指定的数据 (多个数字表示数组的内容)
let arr3 = new Array(11, 22, 33); //11,22,33
document.write(arr3 + "<br/>");
// 方式四:创建数组,保存指定的数据*****
let arr4 = [44, 55, 66, 77]; //44,55,66,77
document.write(arr4 + "<br/>");
//修改数组数据:数组名[索引]
arr4[1] = 666;
document.write(arr4 + "<br/>"); //44,666,66,77
//获取数组数据:数组名[索引]
document.write(arr4[3] + "<br/>"); //77
//1.数组中元素的类型可以不同(了解)
let arr5 = [10, true, "随便", 6.66] //数据类型可以不同:10,true,随便,6.66
document.write("数据类型可以不同:" + arr5 + "<br/>");
//2.长度可以动态变化//数组添加数据// 数组删除元素
arr5.push("新增数据"); //新增数据:10,true,随便,6.66,新增数据
document.write("新增数据:" + arr5 + "<br/>");
arr5.pop() //删除数据:10,true,随便,6.66
document.write("删除数据:" + arr5 + "<br/>");
//3.数组中还有方法
//reverse:将数组内容反转
arr5.reverse(); //翻转后的数组:6.66,随便,true,10
document.write("翻转后的数组:" + arr5 + "<br/>");
// concat:将两个数组合成一个数组
let arr7 = [1, 2, 3, 4];
let arr6 = [5, 6, 7, 8];
let arr8 = arr7.concat(arr6); //合并后的数组:1,2,3,4,5,6,7,8
document.write("合并后的数组:" + arr8 + "<br/>");
//join:将数组中的元素根据参数拼接成字符串
let str = arr6.join("+"); //拼接字符串:5+6+7+8
document.write("拼接字符串:" + str + "<br/>");
// sort排序
//数组中是字符串，排序规则:根据字符串的首字母ASCTT码值排序，如果首字母相同，根据下一个字母的ASCTT码值来排序
var arr10 = ['z', 'ac', 'ab', 'x', 'AB', "B"];
var str1 = arr10.sort(); //排序后:AB,B,ab,ac,x,z
document.write("排序后:" + str1 + "<br/>");
var arr11 = [100, 9, 46, 20]; //数字排序后:100,20,46,9
//数组中是数字,将数字转成字符串,然后按照字符串的规则排序
document.write("数字排序后:" + arr11.sort() + "<br/>");
//自定义排序，按照数字从小到大排序
arr11.sort(function (a, b) {
return a - b;
}) //自定义排序后:9,20,46,100
document.write("自定义排序后:" + arr11 + "<br/>");
</script>
</body>
</html>
日期对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期时间</title>
</head>
<body>
<script>
//创建日期对象,时间是执行这行代码的时间(当前时间)
let date = new Date();
document.write(date + "<br/>"); //Sat Apr 23 2022 21:18:08 GMT+0800 (中国标准时间)
//得到年份
document.write("当前的年份:" + date.getFullYear() + "<br/>");
//得到星期
//得到星期:0表示周日,1^6表示周一到周六
document.write("当前的星期:" + date.getDay() + "<br/>");
//得到毫秒值
document.write("当前的毫秒值:" + date.getTime() + "<br/>");
//得到本地格式的时间(根据我的操作系统语言,转成对应国建的通用时间格式)
document.write("当前的本地系统时间:" + date.toLocaleString() + "<br/>");
</script>
</body>
</html>
使用js修改css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作css</title>
</head>
<body>
<style>
.more{
color: red;
font-size: 90px;
font-family: 新蒂黑板报底字;
}
</style>
<h1 id="first"> 我是一个h1 </h1>
<h1 id="second">我是一个h1</h1>
<input type="button" value="JS一次修改单个css样式" onclick="changeOne()"/><br/>
<input type="button" value="JS一次修改多个css样式" onclick="changeMore()"/><br/>
<script>
//JS一次修改单个CSS样式
//标签对象.style.样式名="样式值"
//css的样式名多个单词使用-连接:font-size，js使用的是驼峰式命名:fontSize:
function changeOne() {
document.getElementById("first").style.color="red";
document.getElementById("first").style.fontSize="60px";
}
//JS一次修改多个CSS样式
function changeMore() {
//找到标签,添加一个class属性
document.getElementById("second").className="more";
}
</script>
</body>
</html>
JS操作BOM(*)
BOM介绍
location对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<!--location.reload():刷新网页-->
<input type="button" value="点我刷新" onclick="location.reload()"/><br/>
<script>
//location的href属性:获取地址栏的所有内容
document.write(location.href + "<br/>");
//location的href属性:修改地址栏的所有内容(可以跳转网页)
//location.href="http://www.jd.com";
//location的search属性:获取地址栏中?及以后的数据
document.write(location.search + "<br/>");
//location是window的属性可以省略window
// location的href属性可以省略
document.write(window.location.href + "<br/>");
document.write(location.href + "<br/>");
document.write(location + "<br/>");
</script>
</body>
</html>
location面试题
都可以!!
history对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history前进后退历史记录</title>
</head>
<body>
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="后退哦" onclick="history.back()">
<a href="js日期.html" >点</a>
</body>
</html>
window对象
三个对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三个框</title>
</head>
<body>
<script>
//提示框:(只有确定按钮)
window.alert("你喜欢我么?")
//输入框:(可以输入数据,有确定和取消按钮),点击确定得到输入框的内容,点击取消得到null;
let a = window.prompt("你喜欢我么?", "喜欢")
document.write(a + "<br/>");
//确认框:(只有确定和取消按钮),点击确定得到true,点击取消得到false
let b = window.confirm("是真的么?")
document.write(b + "<br/>");
</script>
</body>
</html>
计时器的有关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时跳转页面</title>
</head>
<body>
<span id="time">5</span>秒后进行跳转
<script>
//定义全局变量为5;
let num=5;
//每过一秒调用一次自定义的f()函数
let timer = setInterval(f,1000);//setInterval返回值就是计时器
//定义f()函数,时间-1,修改span中的数字
function f() {
num--;
document.getElementById("time").innerText=num;
//判断时间=0,则跳转新页面
if(num==0){
window.location.href="http://www.jd.com";
clearInterval(timer);//停止计时器
}
}
</script>
</body>
</html>
JS操作DOM(*)
DOM概念
DOM查找元素的四个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格行换颜色</title>
</head>
<body style="margin: 50px;">
<table border="1" width="1000">
<tr style="background-color: #999;">
<th><input type="checkbox" name="chekbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td align="center"><input type="checkbox" name="chekbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
1.定义一个提交按钮:点击按钮即可变换颜色
<input type="button" value="点击添加颜色" onclick="huan()"><br/>
2.定义一个提交按钮:点击按钮即可全选中复选框
<input type="button" value="点击全选复选框" onclick="xuan()"><br/>
3.定义一个提交按钮:点击按钮即可给传智播客添加跳转链接
<input type="button" value="点击给传智播客添加链接" onclick="jia()"><br/>
<a class="company">传智播客</a><br/>
<a class="company">传智播客</a><br/>
<a class="company">传智播客</a><br/>
<script>
//1.(通过标签名)给tr的奇偶数行添加背景颜色:byTagName
function huan() {
//通过tr标签找到所有的tr标签
let tr1 = document.getElementsByTagName("tr");
//设置背景颜色
for (let i = 0; i < tr1.length; i++) {
if (i % 2 == 0) {
tr1[i].style.backgroundColor = "red";
} else {
tr1[i].style.backgroundColor = "blue";
}
}
}
//2.(通过name属性)选中所有商品:byName
function xuan() {
//通过name属性的值找到标签
let cheboxx = document.getElementsByName("chekbox");
for (let cheboxx1 of cheboxx) {
//让他选中:在input标签里面让属性checked="checked"就选中啦,在js中能够要让checked=true就会选中;
cheboxx1.checked = true;
}
}
//3.(通过类名)给a标签添加链接:byClassName
function jia() {
//通过class值找到所有的a标签
let className = document.getElementsByClassName("company");
for (let classNameElement of className) {
//给所有a标签设置href属性;
classNameElement.href="http://www.jd.com";
}
}
</script>
</table>
</body>
</html>
DOM树的添加方法
案例:学生信息管理(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息系统</title>
<style>
div {
width: 500px;
margin: auto;
}
td {
text-align: center;
}
</style>
</head>
<body>
<!--border:边框:粗细,线型,颜色; cellspacing:单元格与单元格之间间距 cellpadding:内容与单元格之间的间距-->
<table border="1px" width="500px" cellspacing="0px" cellpadding="5px" align="center">
<tr>
<th>
<input id="daGe" type="checkbox" onclick="checkAll()">
</th>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>
<input class="xiaoDi" type="checkbox" >
</td>
<td>001</td>
<td>潘金莲</td>
<td>
<!-- this:就是前面的标签-->
<input type="button" value="删除" onclick="deleteStudent(this)">
</td>
</tr>
<tr>
<td>
<input class="xiaoDi" type="checkbox" >
</td>
<td>002</td>
<td>鲁智深</td>
<td>
<!-- this:就是前面的标签-->
<input type="button" value="删除" onclick="deleteStudent(this)">
</td>
</tr>
</table>
<div>
学号:<input id="inputNumber">
姓名:<input id="inputName">
<input type="button" value="添加" onclick="addStudent()">
</div>
<script>
//添加的实现
function addStudent() {
//得到文本框的文本
let number = document.getElementById("inputNumber").value;
let name = document.getElementById("inputName").value;
//判断如果输入内容为空则返回提示
if (number == "" || name == "") {
alert("录入信息不能为空!")
return;
}
//创建tr节点
let tr = document.createElement("tr");//相当于生成<tr><tr/>
//将这行内容使用innerHTML直接设置到tr内部
tr.innerHTML = "<td>\n" +
" <input class=\"xiaoDi\" type=\"checkbox\" οnclick=\"addStudent()\">\n" +
" </td>\n" +
" <td>" + number + "</td>\n" +
" <td>" + name + "</td>\n" +
" <td>\n" +
" <!-- this:就是前面的标签-->\n" +
" <input type=\"button\" value=\"删除\" οnclick=\"deleteStudent(this)\">\n" +
" </td>"
//浏览器会自动给table表格添加一个tbody,所有的tr都在tbody中;
//找到浏览器自动添加tbody标签 数组[索引]
let tbody = document.getElementsByTagName("tbody")[0];
//把tr追加到表格中
tbody.appendChild(tr);
//清空输入框的内容
document.getElementById("inputNumber").value = "";
document.getElementById("inputName").value = "";
}
//删除的实现
function deleteStudent(clickBtn) {
//提示,二次确认
let b = confirm("您真的要删除该数据吗?");
//如果确定就从父元素的父元素删除本身(爷爷自杀)
if (b) {
clickBtn.parentElement.parentElement.remove();
}
}
//全选的实现
function checkAll(){
//得到最上面的复选框状态:.checked;
let checked = document.getElementById("daGe").checked;
//得到下面所有复选框
let xiaoDis = document.getElementsByClassName("xiaoDi");
//遍历数组得到每个复选框
for (let xiaoDi of xiaoDis) {
//把下面xiaoDi所有复选框的状态和daGe的同步
xiaoDi.checked=checked;
}
}
</script>
</body>
</html>
JS使用正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式验证</title>
<style>
.left {
text-align: right;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
</style>
</head>
<body>
<!--当表单准备提交数据的时候会触发onsubmit事件-->
<!--οnsubmit="return true" 表单会正常提交
οnsubmit="return false" 表单不会提交
οnsubmit="false" 缺少return 无效还是会提交
οnsubmit="return false" 我们不能写死,true或者false 而应该根据用户名和手机号的正则表达式的结果来决定-->
<form action="aa" method="post" id="myform" onsubmit="return checkAll()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名:</td>
<td class="center">
<input id="user" name="user" type="text" class="in" onchange="isUser()"><span id="user_sp"
class="error"></span>
<!-- <span class="error">用户名不对</span>-->
</td>
</tr>
<tr>
<td class="left">密码:</td>
<td class="center">
<input id="pwd" name="pwd" type="text" class="in">
</td>
</tr>
<tr>
<td class="left">确认密码:</td>
<td class="center">
<input id="ispwd" name="ispwd" type="text" class="in">
</td>
</tr>
<tr>
<td class="left">电子邮箱:</td>
<td class="center">
<input id="email" name="email" type="text" class="in">
</td>
</tr>
<tr>
<td class="left">手机号码:</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" onchange="ismobile()"><span id="mobile_is"
class="error"></span>
</td>
</tr>
<tr>
<td class="left">生日:</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in" onchange="isbirth()"><span id="birth_is"
class="error"></span>
</td>
</tr>
</table>
</form>
<script>
function isUser() {
let userName = document.getElementById("user").value;
let zuser = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
let b = zuser.test(userName);
if (b) {
//如果匹配,在后面的span中显示一个图片
document.getElementById("user_sp").innerHTML = "<img src=\"img/0.jpg\" width=\"3%\"/>"
} else {
//如果匹配,在后面的span中显示一个图片
//<span className="error">用户名不对</span>-- >
document.getElementById("user_sp").innerText = "用户名不对";
}
return b;
}
function ismobile() {
let mobile = document.getElementById("mobile").value;
let ismobile = /^1[3456789][1234567890]{9}$/;
let b = ismobile.test(mobile);
if (b) {
//如果匹配,在后面的span中显示一个图片
document.getElementById("mobile_is").innerHTML = "<img src=\"img/0.jpg\" width=\"3%\"/>"
} else {
//如果不匹配,在后面的span中显示错误信息
document.getElementById("mobile_is").innerText = "手机号格式不对";
}
return b;
}
function isbirth() {
}
//检测所有
function checkAll() {
//只有用户名验证为true && 手机号为true,结果才为true
return isUser() && ismobile();
}
</script>
</body>
</html>
js创建正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<script>
// 正则表达式的创建方式一:实例创建方式(创建正则表达式对象)
//格式:let 变量名 =newRegExp("正则表达式规则");
let regl = new RegExp("1[3456789]\\d{9}");//需要两个//
//正则表达式的创建方式二(建议使用):字面量创建方式(直接给一个正则表达式)
// 格式:let 变量名 = /正则表达式规则/;
let reg2 = /1[3456789]\d{9}/;//需要一个/
//在js中正则表达式必须使用^开头,$结尾,才能严谨的匹配
let reg3 = /^1[3456789]\d{9}$/;//需要一个/
//正则表达式的使用格式:正则表达式对象.test("要匹配的内容")
//js只要部分匹配即为true;
let b = reg2.test("13838389438");
alert(b);
</script>
</body>
</html>
总结
js事件绑定的方法
js的定时器对象
dom获取元素对象
dom对象操作元素
dom对象操作css样式
js弹出框的使用
js的location对象
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
