选择器分类 | 语法 |
---|---|
标签选择器 | 标签名 |
类选择器 | .类名 |
ID选择器 | #ID |
通用选择器 | * |
扩展选择器 | 作用 | 语法符号 |
---|---|---|
层级选择器 | 通过父选择器和子孙选择器来选择元素 | 空格 |
属性选择器 | 通过属性去选择元素 | [] |
伪类选择器 | 不同的操作状态下显示不同的样式 | : |
并集选择器 | 两种以上选择器的和 | , |
交集选择器 | 同时满足2个选择条件 | 标签名#ID 标签名.类名 |
属性 | 作用 |
---|---|
width | 宽度 |
height | 高度 |
margin | 外边距 |
padding | 内边距 |
border | 边框:粗细 线型 颜色 |
关键字 | 说明 |
---|---|
number | 数值 |
boolean | 布尔 |
string | 字符串 |
object | 对象 |
undefined | 未定义类型 |
JS中if语句使用非boolean类型的条件
在一个指定的条件成立时执行代码。
if(条件表达式) {
//代码块;
}
在指定的条件成立时执行代码,当条件不成立时执行另外的代码。
if(条件表达式) {
//代码块;
}
else {
//代码块;
}
使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式) {
//代码块;
}
else if(条件表达式) {
//代码块;
}
else {
//代码块;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>if语句title>
head>
<body>
<script type="text/javascript">
/*
1. Java中判断条件必须是布尔类型的值
2. 在JS中可以使用非布尔类型的表达式
真 假
number 非0 0
string 非空串 空串 ""
object 非空 null
undefined 永远为假
NaN (Not a Number) 永远为假
3. 建议判断条件还是使用boolean类型比较好
*/
/*
if(0) {
document.write("真" + "
");
}
else {
document.write("假" + "
");
}
*/
/*
if("") {
document.write("真" + "
");
}
else {
document.write("假" + "
");
}
*/
/*
var person = {}; //创建一个对象
if(null) {
document.write("真" + "
");
}
else {
document.write("假" + "
");
}
*/
let u; //undefined
if(u) {
document.write("真" + "
");
}
else {
document.write("假" + "
");
}
script>
body>
html>
数据类型 | 为真 | 为假 |
---|---|---|
number | 非0 | 0 |
string | 非空串 | “” |
undefined | 为假 | |
NaN(Not a Number) | 为假 | |
object | 非空 | null |
如果变量名等于某个分支的常量值,就执行这个代码段。如果所有的条件都不满足就执行default代码。
switch(变量名) {
case 常量值:
break;
case 常量值:
break;
default:
break;
}
switch(true) { //这里的变量名写成true
case 表达式: //如:n > 5
break;
case 表达式:
break;
default:
break;
}
调用方法方式:
注:只要是window对象的方法,window对象都可以省略
window对象的方法名 | 作用 |
---|---|
string prompt(“提示信息”,"默认值”) | 输入框,参数: 1. 输入的提示信息 2. 一开始出现在输入框中值 返回值:就是用户输入的信息,字符串类型 |
alert(“提示信息”) | 输出信息框 |
通过prompt输入的分数,如果90100之间,输出优秀。8090之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句的使用title>
head>
<body>
<script type="text/javascript">
/*
通过prompt输入的分数,如果90~100之间,输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
*/
//1. 让用户输入分数
let score = window.prompt("请输入您的分数:","60"); //score是一个字符串类型
//document.write(typeof(score) + "
");
//2. 通过分数判断用户的等级
switch (true) {
//3. 输出用户的等级(比较运算符,会自动将字符串转成数值类型进行比较)
case score >=90 && score <=100 :
document.write("优秀" + "
");
break;
case score >=80 && score <90 :
document.write("良好" + "
");
break;
case score >=60 && score <80 :
document.write("及格" + "
");
break;
case score >=0 && score <60 :
document.write("不及格" + "
");
break;
default:
document.write("分数有误" + "
");
}
script>
body>
html>
如果switch的case后面要使用表达式,switch后面值要写成什么? true
使用循环实现9x9乘法表
当指定的条件为 true 时循环执行代码,也支持非boolean类型的条件
while (条件表达式) {
需要执行的代码;
}
最少执行1次循环
do {
需要执行的代码;
}
while (条件表达式)
循环指定次数
for (var i=0; i<10; i++) {
需要执行的代码;
}
break: 结束整个循环
continue:跳过本次循环,执行下一次循环
以表格的方式输出乘法表,其中行数通过用户输入
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乘法表title>
<style>
table {
/*使用细边框样式*/
border-collapse: collapse;
}
td {
/*设置每个单元格的内间距*/
padding: 3px;
}
style>
head>
<body>
<script type="text/javascript">
let num = prompt("请输入乘法表的数:","9"); //字符串类型
//放在表格中
document.write(""); //如果字符串中有双引号,必须使用\"进行转义
//固定的行和列:9
for (let i = 1; i <= num; i++) { //外循环控制多少行
document.write(""); //表示一行
for (let j = 1; j <= i; j++) { //内循环控制多少列
document.write("");
document.write(j + "×" + i + "=" + (i * j)); //×表示乘法符号
document.write(" ");
}
//每输出一行就换行
document.write(" ");
}
document.write("
");
script>
body>
html>
命名函数和匿名函数的使用
什么是函数
一个代码块,给代码块起个名字,以后可以通过名字来调用它,实现重用的功能。类似于Java中方法
两种函数:
function 函数名(参数列表) {
//代码块
return 返回值; //可选:如果这个函数有返回值,使用return,没有就不使用
}
定义一个函数实现加法功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的使用title>
head>
<body>
<script type="text/javascript">
/*
定义一个函数实现加法功能,参数列表不需要写var或let关键字
*/
function sum(a,b) {
return a + b;
}
//函数不调用不执行
let c = sum(3, 5);
document.write("计算结果是:" + c + "
");
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于函数的重载title>
head>
<body>
<script type="text/javascript">
/*
1. 在JS中没有函数的重载,后面出现的同名函数会覆盖前面的同名函数
2. 实参个数与形参的个数无关,只会按函数名字去调用
3. 在每个函数的内部都有一个隐藏的数组,名字叫arguments
*/
//定义了一个函数
function sum(a,b) {
alert(2);
}
function sum(a) {
alert(1);
}
function sum(a,b,c) { //形参
alert(3);
}
//调用
sum(3, 5); //实参
script>
body>
html>
案例:在函数内部输出隐藏数组的长度和元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏的数组title>
head>
<body>
<script type="text/javascript">
/*
在函数内部输出隐藏数组的长度和元素
*/
function sum(a,b) {
//输出隐藏数组的长度
let length = arguments.length;
document.write("隐藏数组的长度是:" + length + "
");
//输出数组中每个元素,模板代码:itar
for (let i = 0; i < arguments.length; i++) {
document.write("i=" + i + "元素的值:" + arguments[i] + "
");
}
document.write("
");
//输出形参的值
document.write("a=" + a + "
");
document.write("b=" + b + "
");
}
//调用函数
//sum(3, 7, 1); //实参 > 形参
sum(3); //实参 < 形参
script>
body>
html>
var 变量名 = function(参数列表) {
//函数体
return 返回值; //可选
}
后期可以通过变量名来调用函数
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数title>
head>
<body>
<script type="text/javascript">
//定义匿名函数,赋值给一个变量
var sum = function(a,b) {
return a + b;
}
//通过变量名来调用
let c = sum(2, 7);
document.write("计算结果:" + c + "
");
script>
body>
html>
方法 | 描述 |
---|---|
document.getElementById(“id”) | 作用:通过id获取网页上唯一的元素(标签) 参数:ID的值 |
window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间) |
作用:每隔一段时间调用一次指定的函数 参数1:要调用的函数名 参数2:隔多久调用,单位是毫秒 |
每过3秒中切换一张图片的效果,一共5张图片,当显示到最后1张的时候,再次显示第1张。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图案例title>
<style>
body {
background-color: black;
text-align: center;
}
style>
head>
<body>
<img src="img/0.jpg" width="800" id="game">
body>
<script type="text/javascript">
//过2秒调用一次下面的图片
window.setInterval("changePic()", 2000);
let num = 1;
/*
创建一个函数:换图片
技术点:修改img元素的src属性即可
*/
function changePic() {
//通过id得到一个元素,注:这个方法必须在网页已经加载完元素之后执行。要注意这个代码出现的位置
let imgObj = document.getElementById("game");
//alert(imgObj);
//修改图片元素的src属性:对象名.属性名
imgObj.src = "img/" + num + ".jpg";
//文件名数字加1
num++;
//如果等于5,设置为0
if (num == 5) {
num = 0;
}
}
script>
html>
方法 | 描述 |
---|---|
document.getElementById(“id”) | 通过id得到唯一的元素 注:这个代码必须要在元素加载完毕以后执行 |
window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间) |
每隔一段时间调用一次指定的函数,单位是毫秒 |
使用命名函数和匿名函数设置事件
用户在操作网页的过程中,会有各种操作,每种操作都会产生事件。我们可以通过JS来监听这些事件,对这些事件编写函数进行处理,来实现与用户的交互。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的处理方式title>
head>
<body>
<input type="button" value="命名函数" id="b1" onclick="clickMe()">
<input type="button" value="匿名函数" id="b2">
<script type="text/javascript">
/*
有两个按钮,点第1个弹出一个信息框,点第2个弹出另一个信息框。分别使用两种不同的方式激活事件
1. 使用命名函数的处理方式:
在标签上直接使用 on事件名="处理函数()"
2. 使用匿名函数的处理方式:
元素对象.on事件名 = function() {
}
*/
function clickMe() {
alert("命名函数");
}
//得到按钮2这个对象
document.getElementById("b2").onclick = function () {
alert("匿名函数");
}
script>
body>
html>
事件处理中命名函数的写法
onclick = "函数名()"
function 函数名() {
}
事件处理中匿名函数的写法
元素对象.onclick = function() {
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的处理方式title>
head>
<body>
<script type="text/javascript">
//让整个页面全部加载完毕以后执行
window.onload = function() {
//得到按钮2这个对象
document.getElementById("b2").onclick = function () {
alert("匿名函数");
}
}
script>
<input type="button" value="匿名函数" id="b2">
body>
html>
需求:单击复制文本内容,双击清除文本内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击和双击title>
<style>
input {
/*外边距*/
margin: 5px;
}
style>
head>
<body>
姓名:<input type="text" id="t1"/> <br/>
姓名:<input type="text" id="t2" /> <br/>
<input type="button" value="单击复制/双击清除" id="b1">
<script type="text/javascript">
/*
单击复制文本内容,双击清除文本内容
*/
//得到按钮对象,设置单击事件
document.getElementById("b1").onclick = function () {
//复制文本:把t1的value属性值,赋值给t2的value
document.getElementById("t2").value = document.getElementById("t1").value;
}
//得到按钮对象,设置双击事件
document.getElementById("b1").ondblclick = function () {
//将2个value都设置成空串
document.getElementById("t1").value = "";
document.getElementById("t2").value = "";
}
script>
body>
html>
什么是焦点:一个元素得到光标的操作状态,表示获得了焦点
当文本框失去焦点时,显示后面的文字,获得到焦点时,后面的文字消失
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点title>
head>
<body>
用户名:
<input type="text" id="user"> <span id="info" style="color: red">span>
<script type="text/javascript">
/*
当文本框失去焦点时,显示后面的文字,获得到焦点时,后面的文字消失
如果span中有字,就会显示,没有字就不显示。
修改span中文字内容,使用属性:innerText
*/
//设置user对象获得焦点的事件
document.getElementById("user").onfocus = function () {
document.getElementById("info").innerText = "";
}
//设置user对象失去焦点的事件
document.getElementById("user").onblur = function () {
//span元素
document.getElementById("info").innerText = "用户名不能为空";
}
script>
body>
html>
事件名:onchange
<html lang="en">
<head>
<meta charset="UTF-8">
<title>改变事件title>
head>
<body>
城市:
<select id="city">
<option value="广州">广州option>
<option value="上海">上海option>
<option value="南京">南京option>
select>
<hr/>
英文:
<input type="text" id="eng">
<script type="text/javascript">
/*
选中不同的城市,出现一个信息框显示选中城市的值
this对象表示当前激活的对象
*/
document.getElementById("city").onchange=function () {
//当前元素选中那一项的值
alert(this.value);
}
//用户输入英文字母以后,文本框的字母全部变成大写
document.getElementById("eng").onchange=function () {
//得到当前元素中value值
this.value = this.value.toUpperCase(); //转成大写的函数
}
script>
body>
html>
if的判断条件,可以是非boolean类型
number: 非0为真,0为假
string: 非空串为真,空串为假
object: 非null为真,null为假
undefined: 为假
NaN:为假
switch(true) {
case "条件表达式"
break;
}
for(var i=0; i<10; i++)
while(true) {
}
命名函数
function 函数名(参数列表) {
return 返回值
}
匿名函数
var 变量=function(参数列表) {
return 返回值;
}
没有函数的重载,同名的函数后面会覆盖前面,实参的个数与形参的个数无关
每个函数的内部都一个隐藏的数组:arguments
需求:将鼠标移动到img上显示图片,移出则显示另一张图片。图片设置边框,宽500px
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移上和移出事件title>
head>
<body>
<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
<script type="text/javascript">
/*
将鼠标移动到img上显示图片,移出则显示另一张图片。图片设置边框,宽500px
分析:如果要换图片,只要修改src属性即可
*/
document.getElementById("pic").onmouseover = function () {
//this代表当前被激活的元素
this.src = "img/2.jpg";
}
/*document.getElementById("pic").onmouseout = function () {
this.src = "img/0.jpg";
}*/
/**
* obj相当于img对象
*/
function changePic(obj) {
obj.src = "img/3.jpg";
}
script>
body>
html>
<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
document.getElementById("pic").onmouseout = function () {
this.src = "img/0.jpg";
}
JS操作CSS的两种方式
CSS中写法 | JS中的写法 | 说明 |
---|---|---|
color | color | 样式名如果是一个单词是一样 |
font-size | fontSize | 如果有多个单词,样式名中短横去掉,后面每个单词首字母大小 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JS来修改css的样式title>
<style>
.hello {
/*css样式:字体,颜色,大小*/
font-family: "隶书";
color: blue;
font-size: 40px;
}
style>
head>
<body>
<p id="p1">第一自然段p>
<p id="p2">第二自然段p>
<hr/>
<input type="button" id="b1" value="改变几个样式">
<input type="button" id="b2" value="改变类样式">
<script type="text/javascript">
/*
在JS中修改CSS样式有2种方式:
1. 每条语句修改1个样式,语法:
元素.style.样式名 = 样式值;
2. 先使用class定义类样式,然后再使用以下方法,一次修改一批样式:
元素.className = 类名;
*/
document.getElementById("b1").onclick = function () {
//得到p1元素
let p1 = document.getElementById("p1");
//使用方式1来修改css样式:字体,颜色,大小
p1.style.fontFamily = "楷体";
p1.style.color = "red";
p1.style.fontSize = "40px";
}
document.getElementById("b2").onclick = function () {
//得到p2元素
let p2 = document.getElementById("p2");
//一次修改一批样式
p2.className = "hello";
}
script>
body>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GLHAgxJ4-1593131861874)(C:/Users/User/Desktop/学习笔记/web/webday03/day03(JavaScript基础)]/讲义/assets/image-20200413143054348.png)
JS修改CSS样式的两种方式
学习String对象常用的方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置对象:字符串对象title>
head>
<body>
<script type="text/javascript">
let a = 3;
let b = 4;
let c = a + b;
//字符串的拼接操作
let s1 = a + "+" + b + "=" + c;
document.write(s1 + "
");
//反引号:${} 占位符,会被真实的变量代替
let s2 = `${a} + ${b} = ${c}`;
document.write(s2 + "
");
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>string对象的函数title>
head>
<body>
<script type="text/javascript">
let s1 = "我是中国人,我爱我的国家";
//取子字符串:开始位置,结束位置 (索引从0开始),包头不包尾
let s = s1.substring(6, 9);
document.write(s + "
");
//取子字符串:开始位置,取多长
let s2 = s1.substr(6, 3);
document.write(s2 + "
");
//将这个字符使用指定的分隔符,分割成一个字符串数组
let s3 = "a-b-c-xyz-hello";
let arr = s3.split("-");
for (let i = 0; i < arr.length; i++) {
document.write(arr[i] + "
");
}
document.write("
");
//转成大写
document.write("abc".toUpperCase() + "
");
//转成小写
document.write("XYZ".toLowerCase() + "
");
//去掉字符串前后的空格
let s4 = " hello world ";
document.write("长度:" + s4.length + "
"); //原长度
document.write(s4 + "
"); //原字符串
document.write(s4.trim() + "
"); //去掉前后空格
document.write("去掉空格长度:" + s4.trim().length + "
"); //去掉前后空格的长度
script>
body>
html>
方法名 | 作用 |
---|---|
substring(startIndex,endIndex) | 取子字符串,包头不包尾,索引从0开始。参数是起始位置 |
substr(startIndex, length) | 取子字符串,起始位置,长度 |
split(delimiter) | 把一个字符串使用指定的分隔符,切割成一个数组 |
toLowerCase() | 变成小写 |
toUpperCase() | 变成大写 |
trim() | 去掉前后的空格 |
学习Math对象的方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置对象:数学对象title>
head>
<body>
<script type="text/javascript">
//四舍五入保留到整数
let n1 = Math.round(123.5);
document.write(n1 + "
");
//向下取整
let n2 = Math.floor(123.45);
document.write(n2 + "
");
//向上取整
let n3 = Math.ceil(123.45);
document.write(n3 + "
");
//产生随机数,0~1之间的小数,不等于1 [0,1)
let n4 = Math.random();
document.write(n4 + "
");
script>
body>
html>
方法名 | 作用 |
---|---|
round(x) | 四舍五入保留到整数 |
floor(x) | 向下取整 |
ceil(x) | 向上取整 |
random() | 随机生成0~1之间的小数,不等于1 |
学习全局函数的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局函数</title>
</head>
<body>
<script type="text/javascript">
/*
//计算2个数的和
let n1 = prompt("请输入第1个数","0");
let n2 = prompt("请输入第2个数","0");
//拼接2个字符串
let n3 = n1 + n2;
document.write("它们的和是:" + n3 + "
");
*/
/*
将一个字符串转成整数,从一开始向后去查找,碰到第一个不能转换的就停止了
*/
let n4 = parseInt("2") + parseInt("3");
document.write(n4 + "
");
document.write(parseInt("abc") + "
"); //NaN = Not a Number 不是一个数
document.write(parseInt("12abc") + "
"); //12 转换成功
//将一个字符串转成小数,转换方式同上
let n5 = parseFloat("2.3") + parseFloat("3.1");
document.write(n5 + "
");
let order = "明天晚上偷袭珍珠港";
document.write(order + "
");
//对汉字使用URI编码进行转换
let s1 = encodeURI(order);
document.write(s1 + "
");
//对已经编码的字符串进行解码
let s2 = decodeURI(s1);
document.write(s2 + "
");
//执行字符串中js代码
let s3 = "alert('Hello 你好!')";
eval(s3);
</script>
</body>
</html>
字符串转为数字 | 说明 |
---|---|
parseInt(字符串) | 转成整数,如果转换失败,返回NaN |
parseFloat(字符串) | 转成小数 |
isNaN(字符串) | 在转换前判断是否为非数字,非数字返回true,数字为false |
编码和解码 | 说明 |
---|---|
encodeURI(字符串) | 对汉字进行URI编码 |
decodeURI(字符串) | 对URI编码后的 |
执行字符串 | 说明 |
---|---|
eval(字符串) | 执行脚本 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组title>
head>
<body>
<script type="text/javascript">
//创建数组四种方式:
let a1 = new Array(); //创建一个长度为0的数组
document.write(a1.length + "
");
let a2 = new Array(5); //创建一个长度为5的数组
document.write(a2.length + "
");
document.write(a2 + "
");
let a3 = new Array(2, 5, 6, 8); //指定每个元素,创建数组
document.write(a3.length + "
");
document.write(a3 + "
");
let a4 = [4, 7, 10, 45]; //使用中括号创建数组,指定每个元素
document.write(a4 + "
");
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组title>
head>
<body>
<script type="text/javascript">
//创建数组四种方式:
let a1 = new Array(); //创建一个长度为0的数组
document.write(a1.length + "
");
let a2 = new Array(5); //创建一个长度为5的数组
document.write(a2.length + "
");
document.write(a2 + "
");
let a3 = new Array(2, 5, 6, 8); //指定每个元素,创建数组
document.write(a3.length + "
");
document.write(a3 + "
");
let a4 = [4, 7, 10, 45]; //使用中括号创建数组,指定每个元素
document.write(a4 + "
");
/*
1. 元素类型:因为JS是弱类型,数组中每个元素类型是可以不同的
2. 长度是可变的,动态的增加或减少长度
3. 数组中还有不少方法
*/
let a5 = ["abc", true, 50, 3.6];
document.write(a5 + "
");
a5[5] = "xyz"; //增加长度
//循环输出每个元素
for (let i = 0; i < a5.length; i++) {
document.write(a5[i] + "
");
}
document.write("
");
a5.length = 2; //长度变成2
for (let i = 0; i < a5.length; i++) {
document.write(a5[i] + "
");
}
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的方法title>
head>
<body>
<script type="text/javascript">
//两个或两个以上数组的拼接
let a1 = [1, 1, 1];
let a2 = [2, 2, 2];
let a3 = a1.concat(a2, 99);
document.write(a3 + "
");
//对数组反转
let a4 = [4, 1, 8, 9];
a4.reverse();
document.write(a4 + "
");
//将一个数组通过分隔符拼接成一个字符串,与字符串中split函数功能相反
let a5 = [4, 1, 8, 9];
let str = a5.join("="); //这是一个字符串
document.write(str + "
");
/*
对字符串进行排序
1. 按字符的ASCII码值进行比较
2. 两个字符串比较,先比较第1个,如果谁大谁就大,后面不再比较。如果相同则继续比较第2个。
3. 小写字母 > 大写字母 > 数字
如:
*/
document.write(("ac" > "abcdefgh") + "
");
document.write(("x" > "ABCDE") + "
");
//默认按字符串排序
let strArr = ["Jack", "tom","Newboy", "rose"];
document.write("排序前:" + strArr + "
");
strArr.sort();
document.write("排序后:" + strArr + "
");
let a6 = [40, 100, 28, 9]; //默认是按字符的大小来排序
document.write("排序前:" + a6 + "
");
a6.sort(function (a, b) {
return a - b;
}); //如果按数字排序,指定比较器
document.write("排序后:" + a6 + "
");
//删除数组中最后一个元素
let a7 = [2, 6, 7];
a7.pop(); //返回最后这个元素
document.write(a7 + "
");
//向数组最后添加一个或多个元素
a7.push(4, 90);
document.write(a7 + "
");
script>
body>
html>
方法名 | 功能 |
---|---|
concat() | 拼接数组 |
reverse() | 反转 |
join(separator) | 将数组接拼接成一个字符串 |
sort() | 排序 |
pop() | 删除最后一个元素 |
push() | 添加元素 |
日期对象方法的使用
new Date() 创建当前时间的日期对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWksS4fk-1593131861882)(C:/Users/User/Desktop/学习笔记/web/webday03/day03(JavaScript基础)]/讲义/assets/1552052803821.png)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日期对象title>
head>
<body>
<script type="text/javascript">
let date = new Date();
document.write("现在的时间是:" + date + "
");
document.write("年份:" + date.getFullYear() + "
");
//0-6: 0表示周日,1~6表示周一到周六
document.write("周几:" + date.getDay() + "
");
//得到1970-1-1到现在相差的毫秒数
document.write("毫秒数:" + date.getTime() + "
");
//得到本地格式的时间,类似于Java中:SimpleDateFormat
document.write(date.toLocaleString() + "
");
script>
body>
html>
说说下面方法的作用
function 函数名(参数列表) {
return 返回值;
}
var 变量名=function(参数列表) {
return 返回值;
}
元素.onclick = function() {
}
事件名 | 作用 |
---|---|
onclick | 单击 |
ondblclick | 双击 |
onload | 加载完毕 |
onfocus | 得到焦点 |
onblur | 失去焦点 |
onchange | 改变事件 |
onmouseover | 鼠标移上 |
onmouseout | 鼠标移出 |
元素.style.样式名=样式值
元素.className=类名
方法名 | 作用 |
---|---|
substring(startIndex,endIndex) | 包头不包尾 |
split(delimiter) | 切割字符串 |
toLowerCase() | 转成小写 |
toUpperCase() | 转成大写 |
trim() | 去掉前后空格 |
字符串转为数字 | 说明 |
---|---|
parseInt(字符串) | 转成整数 |
parseFloat(字符串) | 转成小数 |
isNaN(字符串) | 判断非数字 |
编码和解码 | 说明 |
---|---|
encodeURI(字符串) | URI编码 |
decodeURI(字符串) | URI解码 |
执行字符串 | 说明 |
---|---|
eval(字符串) | 执行字符串中JS代码 |
方法名 | 功能 |
---|---|
concat() | 拼接数组 |
reverse() | 反转 |
join(separator) | 将数组拼接成一个字符串 |
sort() | 排序,默认按字符串大小 |
pop() | 删除 |
push() | 添加 |
方法名 | 作用 |
---|---|
getFullYear() | 得到年份 |
getDay() | 得到周几 |
getTime() | 得到毫秒数 |
toLocaleString() | 转成本地的时间 |
function 函数名(参数列表) {
return 返回值
}
元素.onclick = function() {
}
事件名 | 作用 |
---|---|
onclick | 单击 |
ondblclick | 双击 |
onload | 加载完毕 |
onfocus | 获得焦点 |
onblur | 失去焦点 |
onchange | 改变事件 |
onmouseover | 鼠标移上 |
onmouseout | 鼠标移出 |
元素.style.样式名=样式值
元素.className=类名
方法名 | 作用 |
---|---|
substring(startIndex,endIndex) | 取子字符串,包头不包尾 |
split(delimiter) | 切割,将字符串切割成一个数组 |
toLowerCase() | 转成小写 |
toUpperCase() | 转成大写 |
trim() | 去掉前后的空格 |
字符串转为数字 | 说明 |
---|---|
parseInt(字符串) | 转成整数 |
parseFloat(字符串) | 转成浮点数 |
isNaN(字符串) | 是否非数字,非数字返回真 |
编码和解码 | 说明 |
---|---|
encodeURI(字符串) | URI编码 |
decodeURI(字符串) | URI解码 |
执行字符串 | 说明 |
---|---|
eval(字符串) | 执行JS中代码 |
方法名 | 功能 |
---|---|
concat() | 拼接数组 |
reverse() | 反转 |
join(separator) | 把数组拼接成一个字符串 |
sort() | 排序,默认按字符串 |
pop() | 删除 |
push() | 添加 |
方法名 | 作用 |
---|---|
getFullYear() | 得到年份 |
getDay() | 周几:0~6 |
getTime() | 得到毫秒数 |
toLocaleString() | 转成本地格式的日期 |
JSON(JavaScript Object Notation, JavaScript对象标记),是一种轻量级的数据交换格式,用于服务器与浏览器之间传输数据。以前我们都是使用XML来传递数据。
<contact>
<name>貂蝉name>
<gender>falsegender>
<age>20age>
contact>
{
name: "貂蝉",
gender: false,
age: 20
}
类型 | 语法 | 解释 |
---|---|---|
对象类型 | {键:值, 键:值} | 代表一个对象,可以有多个属性 属性与值之间使用冒号,属性与属性之间使用逗号 |
数组/集合类型 | [元素,元素,元素] | 数组中每个元素类型是可以不同 |
混合类型 | [{键:值},{键:值},{键:值}] | 数组中每个元素是一个对象 |
{键:[元素,元素,元素]} | 是一个对象,但某个属性是一个数组或集合 |
某个属性值是一个数组,数组中每个元素是JSON对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-daiTy1aX-1593131861886)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/image-20200414093716240.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON数据格式title>
head>
<body>
<h2>JSON对象h2>
<script type="text/javascript">
//一个person对象的JSON对象,属性名:firstname、lastname、age给三个属性赋值
let person = {
firstname: "孙悟空",
lastname: "弼马温",
age: 30
};
//输出对象:对象名.属性名
document.write("姓名:" + person.firstname + ",昵称:" + person.lastname + ",年龄:" + person.age + "
");
script>
<hr/>
<h2>创建一个数组,其中每个元素是JSON对象h2>
<script type="text/javascript">
let arr = [{
firstname: "孙悟空",
lastname: "弼马温",
age: 30
}, {
firstname: "猪八戒",
lastname: "天蓬元帅",
age: 28
}, {
firstname: "沙悟静",
lastname: "卷帘大将",
age: 26
}];
//遍历输出每个JSON对象的属性值
/*
Java中写法:
for(类型 变量名: 集合)
JavaScript中写法:
for(类型 变量名 of 集合)
*/
for (let p of arr) { //p表示集合或数组中每个元素
document.write("姓名:" + p.firstname + ",昵称:" + p.lastname + ",年龄:" + p.age + "
");
}
script>
<hr/>
<h2>JSON对象,其中属性是集合h2>
<script type="text/javascript">
let master = {
name: "唐僧",
age: 20,
brothers: [{
firstname: "孙悟空",
lastname: "弼马温",
age: 30
}, {
firstname: "猪八戒",
lastname: "天蓬元帅",
age: 28
}, {
firstname: "沙悟静",
lastname: "卷帘大将",
age: 26
}]
};
document.write("姓名:" + master.name + ",年龄:" + master.age + "
");
document.write("徒弟们:" + "
");
//快捷键:iter
for (let p of master.brothers) {
document.write("姓名:" + p.firstname + ",昵称:" + p.lastname + ",年龄:" + p.age + "
");
}
script>
body>
html>
JSON三种常用的格式:
对象:{属性名:值}
数组:[元素,元素]
混合:[{},{}] {属性:[]}
JS中与JSON有关的方法
语法 | 功能 |
---|---|
JSON.parse(字符串) | 将一个字符串转成JSON对象 注:JSON字符串中属性名一定要使用双引号引起来 |
JSON.stringify(JSON对象) | 将一个JSON对象转成字符串 |
创建一个字符串:’{“name”: “张三”, “age”: 20}’, 使用上面的方法转成JSON对象
再使用上面的方法,转回成字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVTzz2ti-1593131861891)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/image-20200414094549706.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON有关的函数title>
head>
<body>
<script type="text/javascript">
//定义一个字符串,属性名一定是双引号
let person = '{"name": "张三", "age": 20}';
document.write("字符串:" + person + "
");
//把字符串转成JSON对象
let obj = JSON.parse(person);
document.write("对象:" + obj + "
");
document.write("姓名:" + obj.name + ",年龄:" + obj.age + "
");
//把JSON对象转成字符串
let str = JSON.stringify(obj);
document.write("字符串:" + str + "
");
script>
body>
html>
语法 | 功能 |
---|---|
JSON.parse(字符串) | 将字符串转成JSON对象 |
JSON.stringify(JSON对象) | 将JSON对象转成字符串 |
JavaScript有三个组成:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6yIRhbWQ-1593131861893)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552052941943.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window中的方法title>
head>
<body>
<script type="text/javascript">
/**
* 出现一个确定框,有2个按钮
* 点确定,返回true,否则返回false
*/
let con = window.confirm("你是女生吗");
//document.write(con + "
");
if (con) {
document.write("约吗?" + "
");
}
else {
document.write("捡肥皂" + "
");
}
script>
body>
html>
BOM常用对象 | 作用 |
---|---|
window | 浏览器窗口,已经学过的方法: prompt(), alert(), setInterval() confirm() 确定框,有2个选择按钮(确定,取消) |
location | 代表浏览器的地址栏 |
history | 浏览的历史记录 |
属性 | 功能 |
---|---|
href | 1. 获取属性值,得到当前访问的地址 2. 设置属性值,跳转到指定的页面 |
search | 获取?后面的参数字符串 GET方法提交表单的时候,参数会显示在地址栏上 |
location的方法 | 描述 |
---|---|
reload() | 重载加载当前的页面,类似于刷新 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM:location对象title>
head>
<body>
<input type="button" onclick="location.reload()" value="刷新">
<script type="text/javascript">
//1. 获取属性值,得到当前访问的地址
//document.write(location.href + "
");
//2. 设置属性值,跳转到指定的页面
//location.href = "http://www.itcast.cn";
//获取?后面的参数字符串
//document.write(location.search + "
");
//显示现在的时候
document.write(new Date().toLocaleString() + "
");
script>
body>
html>
history对象有哪些方法
访问历史记录中页面
方法 | 作用 |
---|---|
forward() | 相当于浏览器上前进按钮,如果浏览器上前进按钮不可用,这个方法也不起作用 |
back() | 相当于浏览器上后退按钮 |
go(正数或负数) | go(1)相当于前进,go(-1)相当于后退 |
注:浏览器上的前进和后退按钮可以点的时候,这个代码才起作用。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM:历史记录对象title>
head>
<body>
<a href="demo04_location.html">跳转到demo04a>
<input type="button" value="前进" onclick="history.forward()">
<input type="button" value="前进" onclick="history.go(1)">
body>
html>
方法 | 作用 |
---|---|
forward() | 前进 |
back() | 后退 |
go() | 既可以前进,又可以后退 |
window对象与location对象的综合案例应用
window中的方法 | 作用 |
---|---|
setTimeout(函数名, 间隔毫秒数) | 过一段时间后调用一次指定的函数,单位是毫秒,只调用一次。 返回值是一个整数类型,这就是计时器 |
clearTimeout(计时器) | 清除上面的计时器,参数的计时器就是上面方法的返回值 |
setInterval(函数名, 间隔毫秒数) | 每隔一段时间调用一次指定的函数,单位是毫秒,不停的调用。 返回值是一个整数类型,这就是计时器 |
clearInterval(计时器) | 清除上面的计时器,参数的计时器就是上面方法的返回值 |
页面上显示一个倒计时5秒的数字,到了5秒以后跳转到另一个页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IhZBOOXD-1593131861897)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552053355566.png)]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转title>
head>
<body>
<span id="counter">5span>秒以后跳转
<script type="text/javascript">
/*
分析:
1.用到倒计时:window.setInterval()
2.页面跳转:location.href
3.修改标签中文字使用属性:innerText
*/
let count = 5;
setInterval("countDown()", 1000); //每过1秒调用一次
//调用的函数
function countDown() {
//1.将数字减1
count--;
//2.更新span中数字
document.getElementById("counter").innerText = count;
//3.判断数字是否为0
if (count == 0) {
//4.如果为0就进行页面跳转
location.href = "http://www.itcast.cn";
}
}
script>
body>
html>
页面上有两个按钮,一个开始按钮,一个暂停按钮。点开始按钮时间开始走动,点暂停按钮,时间不动。再点开始按钮,时间继续走动。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会动的时钟title>
head>
<body>
<input type="button" value="开始" id="btnBegin">
<input type="button" value="暂停" id="btnPause" disabled="disabled">
<hr/>
<h1 id="clock" style="color: darkgreen">h1>
<script type="text/javascript">
let timer; //计时器
//开始按钮的点击事件
document.getElementById("btnBegin").onclick = function() {
timer = setInterval("showTime()", 1000); //每过1秒调用1次
//修改disabled的属性为true,表示不可用,false表示可用
//让开始按钮不可用,让暂停按钮可用
document.getElementById("btnBegin").disabled = true;
document.getElementById("btnPause").disabled = false;
}
//暂停按钮的点击事件
document.getElementById("btnPause").onclick=function () {
document.getElementById("btnBegin").disabled = false; //开始按钮可用
document.getElementById("btnPause").disabled = true; //暂停按钮不可用
//让计时器失效
clearInterval(timer); //计时器是setInterval()的返回值
}
/**
* 分析:
* 每过1秒钟输出现在的时间
* 不能使用document.write方法
* 应该放在一个标签内部,修改标签内部的内容,使用innerText或innerHTML
*/
function showTime() {
//得到现在的时间
let now = new Date().toLocaleString();
//在有些浏览器上,会覆盖整个网页,导致这些脚本都没有了
//document.write(now);
//在h1中显示时间
document.getElementById("clock").innerText = now;
}
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerText和innerHTML的区别title>
head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content">span>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
//innerText:修改是纯文本的内容,如果内容中有标签,标签是不起作用
//document.getElementById("content").innerText = "幸福来敲门
";
//innerHTML:修改是HTML的内容,标签是起作用
document.getElementById("content").innerHTML = "幸福来敲门
";
}
script>
body>
html>
DOM: Document Object Model 文档对象模型
作用:操作网页中各种元素,可能通过修改DOM树来实现修改网页结构的目的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9X3HIPsL-1593131861905)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552054005396.png)]
获取元素的方法 | 作用 |
---|---|
document.getElementById(“id”) | 通过id得到一个元素 |
document.getElementsByTagName (“标签名”) | 通过标签名得到一组元素 |
document.getElementsByName(“name”) | 通过name属性得到一组元素 |
document.getElementsByClassName(“类名”) | 通过类名得到一组元素 |
根据CSS选择器获取元素 | 作用 |
---|---|
document.querySelector(CSS选择器) | 通过css选择器获取一个元素,如:"#id" “.类名” “标签名” |
document.querySelectorAll(CSS选择器) | 通过css选择器获取一组元素 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM:查找元素的方法title>
<style>
table {
/*细边框样式*/
border-collapse: collapse;
width: 500px;
}
style>
head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1">
<tr>
<td>100td>
<td>100td>
<td>100td>
tr>
<tr>
<td>100td>
<td>100td>
<td>100td>
tr>
<tr>
<td>100td>
<td>100td>
<td>100td>
tr>
<tr>
<td>100td>
<td>100td>
<td>100td>
tr>
<tr>
<td>100td>
<td>100td>
<td>100td>
tr>
table>
<script type="text/javascript">
//0.按钮的点击事件
document.getElementById("b1").onclick=function () {
//1.获取所有的tr
//let trs = document.getElementsByTagName("tr"); //传统的写法
let trs = document.querySelectorAll("tr"); //新的写法, css的标签选择器
//2.遍历tr集合,判断是奇数还是偶数,遍历快捷键:itar, iter
for (let i = 0; i < trs.length; i++) {
let tr = trs[i]; //得到每个tr
//3.设置不同的背景色
if (i % 2 == 0) { //偶数
tr.style.backgroundColor = "lightgreen";
}
else { //奇数
tr.style.backgroundColor = "lightyellow";
}
}
}
script>
<hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>
<input type="checkbox" name="product">自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机
<script type="text/javascript">
//通过css的#id选择器来选中元素
document.querySelector("#b2").onclick=function () {
//1.得到所有的复选框
let products = document.getElementsByName("product");
//2.遍历集合,将每一项checked=true
for (let product of products) { //每个元素是一个checkbox
product.checked = true;
}
}
script>
<hr/>
<input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客a>
<a class="company">传智播客a>
<a class="company">传智播客a>
<script type="text/javascript">
document.getElementById("b3").onclick=function () {
//1.通过类名得到所有的a标签
let companies = document.getElementsByClassName("company");
//2.遍历集合,给每个a标签添加href属性
for (let company of companies) {
company.href = "http://www.itcast.cn";
}
}
script>
body>
html>
获取元素的方法 | 作用 |
---|---|
document.getElementsByTagName (“标签名”) | 通过标签名得到一组元素 |
document.getElementsByName(“name”) | 通过name属性得到一组元素 |
document.getElementsByClassName(“类名”) | 通过类名得到一组元素 |
根据CSS选择器获取元素 | 作用 |
---|---|
document.querySelector(CSS选择器) | 通过css选择器,获取一个元素 |
document.querySelectorAll(CSS选择器) | 通过css选择器,获取一组元素 |
JSON对象:{属性名:值,属性名:值}
数组或集合:[元素,元素]
混合类型:[{},{},{}] {键:[元素,元素]}
JSON.parse(): 将字符串转成JSON对象
JSON.stringfy(): 将JSON对象转成字符串
prompt() 输入
alert() 信息框
confirm() 确认框
setInterval() / clearInterval()
setTimeout() / clearTimeout()
href:页面跳转
search: 得到?后参数字符串
reload() 重新加载当前页面
forward() 前进
back() 后退
go() 既可以前进,又可以后退
innerHTML: 标签体内的子标签是起作用的
innerText:标签体内的文字是纯文本
getElementById() 通过id得到一个元素
getElementsByTagName() 通过标签名得到一组元素
getElementsByName() 通过name属性得到一组元素
getElementsByClassName() 通过类名得到一组元素
querySelector() 通过CSS选择器得到一个元素
querySelectorAll() 通过CSS选择器得到一组元素
创建元素的方法 | 作用 |
---|---|
document.createElement(“标签名”) | 创建一个元素 |
将元素挂到DOM树上的方法 | 作用 |
---|---|
父元素.appendChild(子元素) | 将元素追加成最后一个子元素 |
父元素.removeChild(子元素) | 通过父元素删除子元素(他杀) |
元素.remove() | 删除自己(自杀) |
页面上有两个下拉列表框,页面加载的时候访问数据库,得到所有的省份显示在第1个列表框中。当选择不同的省份的时候,加载这个省份下所有的城市显示在第二个下拉列表中。
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>省市联动title>
head>
<body>
<select id="province">
<option>--请选择省份--option>
select>
<select id="city">
<option>--请选择城市--option>
select>
body>
<script>
// 省份数据
var provinces= ["广东省","湖南省","广西省"];
// 城市数据,数据是一个二维数组,一维中每个元素是一个数组
var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];
/*
在页面加载完毕以后读取所有的省份,并且填充到#province中
分析:动态创建option对象,并且设置 这个value就是它对应的城市数组索引
*/
window.onload = function () {
//1.得到省份这个select对象
let selectProvince = document.getElementById("province");
//遍历省份这个数组
for (let i = 0; i < provinces.length; i++) {
let province = provinces[i]; //i=0 province=广东省
//2.创建option对象
let optionElement = document.createElement("option");
//3.设置value和文本
optionElement.value = i;
optionElement.innerText = province;
//4.添加到select的最后一个子元素: 父元素.appendChild(子元素)
selectProvince.appendChild(optionElement);
}
}
/**
* 省份下拉列表的改变事件
*/
document.getElementById("province").onchange = function () {
//alert(this.value); //value就是它的索引
var arr = cities[this.value]; //得到相应城市的数组
//得到城市下拉select对象
let city = document.getElementById("city"); //city下拉列表对象
//修改city中innerHTML
city.innerHTML = ""; //覆盖原来的HTML子元素
//向城市下拉列表添加option
//1. 遍历城市数组
for (let i = 0; i < arr.length; i++) {
let arrElement = arr[i]; //每个城市字符串
//2. 创建option对象
let optionElement = document.createElement("option");
//3. 设置文本
optionElement.innerText = arrElement;
//4. 添加到select的最后一个子元素: 父元素.appendChild(子元素)
city.appendChild(optionElement);
}
}
script>
html>
了解正则表达式的规则
提问:如果要验证一个手机号码,我们以前应该如何写代码?
符号 | 作用 |
---|---|
[a-z] | 中括号表示1个字符,a-z中任意一个字符 |
[xyz] | x或y或z,三个字符一个 |
[^xyz] | 除了xyz之外的任意字符 |
\d | 数字 |
\w | 单词,相当于[a-zA-Z0-9_] |
. | 任意字符,如果要匹配点号需要转义 \. |
() | 分组 |
{n} | 前面的字符出现n次 |
{n,} | 前面的字符出现大于等于n次 |
{n,m} | 前面的字符出现n次到m之间的次数,包头包尾 |
+ | 前面的字符出现1~n次 |
* | 前面的字符出现0~n次 |
? | 前面的字符出现0~1次 |
| | 多组字符串选择1个 |
^ | 匹配开头 |
$ | 匹配结尾 |
正则表达式主要有哪两个作用?
1. 判断字符串是否匹配
2. 查找字符串
创建正则表达式有哪2种方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式title>
head>
<body>
<script type="text/javascript">
/**
* 创建正则表达式的2种方式:
* 1. new RegExp("正则表达式")
* 2. /正则表达式/
*
* 判断正则表达式是否匹配字符串的方法:
* boolean 正则表达式对象.test(字符串) 如果匹配返回true,否则返回false
* 与Java不同,Java默认是精确匹配。JS默认是模糊匹配,只要包含这个正则表达式的内容就可以
* 结论:如果要在JS中精确匹配,必须以^开头,以$结尾
*/
var reg = new RegExp("\\d{3}");
document.write(reg.test("123") + "
"); //true
document.write(reg.test("abc") + "
"); //false
document.write(reg.test("a123b") + "
"); //true
document.write("
");
var reg = new RegExp("^\\d{3}"); //匹配3个数字开头
document.write(reg.test("a123b") + "
"); //false
document.write(reg.test("123b") + "
"); //true
document.write("
");
var reg = new RegExp("\\d{3}$"); //匹配3个数字结尾
document.write(reg.test("a123") + "
"); //true
document.write("
");
var reg = new RegExp("^\\d{3}$"); //精确匹配,必须匹配3个数字
document.write(reg.test("123abc123") + "
"); //false
document.write(reg.test("456") + "
"); //true
/*
使用第2种写法
*/
var reg = /^\d{3}$/;
document.write(reg.test("456") + "
"); //true
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式匹配模式title>
head>
<body>
<script type="text/javascript">
/*
i 忽略大小写比较
1. new RegExp("正则表达式","匹配模式")
2. /正则表达式/匹配模式
*/
var reg = new RegExp("cat","i");
document.write(reg.test("cat") + "
"); //true
document.write(reg.test("CAT") + "
"); //true
document.write("
");
var reg = /cat/i;
document.write(reg.test("cat") + "
"); //true
document.write(reg.test("CAT") + "
"); //true
script>
body>
html>
判断正则表达式与字符串是否匹配的方法是?
boolean 正则表达式对象.test(字符串)
如果匹配返回true
onsubmit事件,如果return false就可以阻止表单提交
用户注册,需要进行如下验证,请在JS中使用正则表达式进行验证。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>验证注册页面title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
span {
color: red;
}
style>
<script type="text/javascript">
/**
* 校验所有的表单项
*/
function checkAll() {
return checkUser() && checkMobile();
}
/**
* 检查用户名是否正确
* 由英文字母和数字组成,长度为4~16个字符,并且以英文字母开头
*/
function checkUser() {
//1.得到文本框的值
let value = document.getElementById("user").value;
//2.创建正则表达式
let reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
//3.比较正则表达式与文本框的值是否匹配
if (reg.test(value)) {
//4.如果匹配就通过,在后面显示打勾的图片,返回true
document.getElementById("userInfo").innerHTML = "";
return true;
} else {
//5.如果不匹配,在后面显示错误信息,返回false
document.getElementById("userInfo").innerHTML = "用户名格式有误";
return false;
}
}
/**
* 判断手机号
*/
function checkMobile() {
//1.得到文本框的值
let value = document.getElementById("mobile").value;
//2.创建正则表达式
let reg = /^1[3456789]\d{9}$/;
//3.比较正则表达式与文本框的值是否匹配
if (reg.test(value)) {
//4.如果匹配就通过,在后面显示打勾的图片,返回true
document.getElementById("mobileInfo").innerHTML = "";
return true;
} else {
//5.如果不匹配,在后面显示错误信息,返回false
document.getElementById("mobileInfo").innerHTML = "手机格式有误";
return false;
}
}
script>
head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/>td>
tr>
<tr>
<td class="hr_1">新用户注册td>
tr>
<tr>
<td style="height:10px;">td>
tr>
<tr>
<td>
<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" onblur="checkUser()"/>
<span id="userInfo">span>
td>
tr>
<tr>
<td class="left">密码:td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in"/>
td>
tr>
<tr>
<td class="left">确认密码:td>
<td class="center">
<input id="repwd" name="repwd" type="password" 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" onblur="checkMobile()"/>
<span id="mobileInfo">span>
td>
tr>
<tr>
<td class="left">生日:td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
td>
tr>
<tr>
<td class="left"> td>
<td class="center">
<input name="" type="image" src="img/register.jpg"/>
td>
tr>
table>
td>
tr>
table>
form>
body>
html>
类型 | 语法 |
---|---|
对象类型 | {键:值} |
数组/集合类型 | [元素,元素] |
混合类型 | [{},{}] {键:[元素,元素]} |
语法 | 功能 |
---|---|
JSON.parse(字符串) | 字符串->JSON对象 |
JSON.stringify(JSON对象) | JSON对象->字符串 |
window中的方法 | 说明 |
---|---|
setInterval()/setTimeout() | 每过一段时间调用1次/过一段时间只调用1次 |
clearTimeout() / clearInterval() | 清除上面的计时器,上面的返回值就是计时器 |
alert()/prompt()/confirm() | 信息/输入/确认 |
属性 | 功能 |
---|---|
href | 跳转页面 |
search | 获得到参数字符串 |
location的方法 | 描述 |
---|---|
reload() | 刷新 |
方法 | 作用 |
---|---|
forward() | 前进 |
back() | 后退 |
go() | 前进/后退 |
获取元素的方法 | 作用 |
---|---|
document.getElementById(“id”) | 通过id得到一个元素 |
document.getElementsByTagName (“标签名”) | 通过标签名得到一组元素 |
document.getElementsByName(“name”) | 通过name属性得到一组元素 |
document.getElementsByClassName(“类名”) | 通过类名得到一组元素 |
根据CSS选择器获取元素 | 作用 |
---|---|
document.querySelector(CSS选择器) | 通过CSS选择器得到一个元素 |
document.querySelectorAll(CSS选择器) | 通过CSS选择器得到一组元素 |
创建元素的方法 | 作用 |
---|---|
document.createElement(“标签名”) | 创建一个元素 |
将元素挂到DOM树上的方法 | 作用 |
---|---|
父元素.appendChild(子元素) | 追加成最后一个子元素 |
父元素.removeChild(子元素) | 删除子元素 |
元素.remove() | 删除自己 |
创建正则表达式格式:
new RegExp("正则表达式","匹配模式")
/正则表达式/匹配模式
正则表达式的判断方法:
boolean 正则表达式.test(字符串)
type=“text” class=“in” οnblur=“checkMobile()”/>
生日:
### 小结
2. 表单提交的时候会激活哪个事件?onsubmit
# 学习总结
- 能够掌握 json 的三种数据格式
| 类型 | 语法 |
| ------------- | ------------------------- |
| 对象类型 | {键:值} |
| 数组/集合类型 | [元素,元素] |
| 混合类型 | [{},{}] {键:[元素,元素]} |
| 语法 | 功能 |
| ------------------------ | ---------------- |
| JSON.parse(字符串) | 字符串->JSON对象 |
| JSON.stringify(JSON对象) | JSON对象->字符串 |
- 能够使用window对象常用的方法
| window中的方法 | 说明 |
| -------------------------------- | ---------------------------------------- |
| setInterval()/setTimeout() | 每过一段时间调用1次/过一段时间只调用1次 |
| clearTimeout() / clearInterval() | 清除上面的计时器,上面的返回值就是计时器 |
| alert()/prompt()/confirm() | 信息/输入/确认 |
- 能够使用location对象常用的方法和属性
| 属性 | 功能 |
| ------ | ---------------- |
| href | 跳转页面 |
| search | 获得到参数字符串 |
| location的方法 | 描述 |
| -------------- | ---- |
| reload() | 刷新 |
- 能够使用history对象常用的方法
| 方法 | 作用 |
| --------- | --------- |
| forward() | 前进 |
| back() | 后退 |
| go() | 前进/后退 |
- 能够使用DOM中来查找节点
| 获取元素的方法 | 作用 |
| ---------------------------------------- | ------------------------ |
| document.getElementById("id") | 通过id得到一个元素 |
| document.getElementsByTagName ("标签名") | 通过标签名得到一组元素 |
| document.getElementsByName("name") | 通过name属性得到一组元素 |
| document.getElementsByClassName("类名") | 通过类名得到一组元素 |
| 根据CSS选择器获取元素 | 作用 |
| ------------------------------------ | ------------------------- |
| document.querySelector(CSS选择器) | 通过CSS选择器得到一个元素 |
| document.querySelectorAll(CSS选择器) | 通过CSS选择器得到一组元素 |
- 能够使用DOM来增删改节点
| 创建元素的方法 | 作用 |
| -------------------------------- | ------------ |
| document.createElement("标签名") | 创建一个元素 |
| 将元素挂到DOM树上的方法 | 作用 |
| -------------------------- | -------------------- |
| 父元素.appendChild(子元素) | 追加成最后一个子元素 |
| 父元素.removeChild(子元素) | 删除子元素 |
| 元素.remove() | 删除自己 |
- 能够使用正则表达式进行表单的验证
创建正则表达式格式:
new RegExp(“正则表达式”,“匹配模式”)
/正则表达式/匹配模式
正则表达式的判断方法:
boolean 正则表达式.test(字符串)