JavaScript基础

概述

JavaScript基础_第1张图片

入门案例:循环输出HelloWorld


<script>
    //js代码
    for (var i = 0; i < 5; i++) {
        document.write("hello World" + i + "
"
) }
script>

js编写位置

第一种行内位置JavaScript基础_第2张图片


<input type="button" value="按钮" onclick="alert('Hello World')">

第二种内部位置编写 JavaScript基础_第3张图片

外部位置编写

JavaScript基础_第4张图片
JavaScript基础_第5张图片
注意:
如果引入了外部IS文件,这个标签中的IS代码是无效的

java Script 快速入门

介绍

JavaScript基础_第6张图片

js基础语法-变量的定义

es5和es6变量区别

JavaScript基础_第7张图片

设置idea的es6模式

JavaScript基础_第8张图片

变量的定义

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script>
    //ES5定义变量
    var a = 10;
    document.write(a + "
"
); //ES6定义变量 let b = 30; document.write(b + "
"
); //常量(不能修改) const c=50; document.write(c + "
"
); //JS是弱类型语言:一个变量可以赋值为不同的数据类型(可以乱来) let m=10; m=true; m="我就是要乱来"; document.write(m + "
"
); //ES6中反引号字符串(模板字符串)`` //目的是要输出10+20=30; let x=10; let y=20; document.write(x+"+"+y+"="+(x+y) + "
"
); document.write(`${x}+${y}=${x+y}` + "
"
);
script> body> html>

五种基本数据类型

JavaScript基础_第9张图片

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 + "
"
); let n2 = 6.66; document.write(typeof (n2) + ":" + n2 + "
"
); //boolean:true/false let a = true; document.write(typeof (a) + ":" + a + "
"
); //string:字符串 在is中""包裹的内容和’’包裹的内容都是字符串, let b1 = "今天学js好轻松啊!"; document.write(typeof (b1) + ":" + b1 + "
"
); let b2 = '今天学js好轻松啊!'; document.write(typeof (b2) + ":" + b2 + "
"
); //object:对象类型 // Js内置的对象Array let obj1 = new Array(2, 3, 4); document.write(typeof (obj1) + ":" + obj1 + "
"
); // 自定义JS对象:{键1:值1,键2:值2} let obj2 = {"name": "张三", "age": 18}; document.write(typeof (obj2) + ":" + obj2 + "
"
); //null表示对象类型,null是obiect类型的默认值, let obj3 = null; document.write(typeof (obj3) + ":" + obj3 + "
"
); // undefine:未定义 没有给变量赋值 let x; document.write(typeof (x) + ":" + x + "
"
);
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 + "
"
); // 56 //将字符串转成整数"5"->5 Java使用Integer.parseInt("5")-> 5; // parseInt():将字符串转成数字 document.write(parseInt(a) + parseInt(b) + "
"
); //parseInt能转多少算多少 document.write(parseInt("123gvhbgf") + "
"
); //如果一个都转不了,得到NaN(Not aNumber不是一个数字) document.write(parseInt("sdgdrs") + "
"
);
script> body> html>

浏览器调试JavaScript代码

JavaScript基础_第10张图片

常用运算符

算术运算符JavaScript基础_第11张图片

赋值运算符

JavaScript基础_第12张图片

比较运算符

JavaScript基础_第13张图片

  • 字符串和数字比较,会先把字符串转化为数字在进行比较.
  • 既比较值又比较类型(js中为了严谨建议使用===)

逻辑运算符

JavaScript基础_第14张图片

三目运算符(三元运算符)

JavaScript基础_第15张图片

流程控制语句

if语句

JavaScript基础_第16张图片

if语句条件表达式

JavaScript基础_第17张图片

switch语句

JavaScript基础_第18张图片

案例

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 + "
"
); var score = parseInt(score); document.write(typeof (score) + ":" + score + "
"
); // var score = prompt("请输入您的分数", 60); // document.write(typeof (parseInt(score)) + ":" + score + "
");
// 通过prompt输入的分数,如果90~100之间,输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出不及格 switch (true){ 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<100: document.write("不及格" + "
"
); break; default: document.write("分数输入有误" + "
"
); }
script> body> html>

while/do-while循环语句

JavaScript基础_第19张图片

for循环

JavaScript基础_第20张图片

小结

JavaScript基础_第21张图片

函数

命名函数

JavaScript基础_第22张图片

匿名函数

JavaScript基础_第23张图片

参数传递原理

JavaScript基础_第24张图片
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() + "
");
// }
script> body> html>

总结

语法规则

JavaScript基础_第25张图片

基本选择器

JavaScript基础_第26张图片

常见的css样式

JavaScript基础_第27张图片

基础语法

JavaScript基础_第28张图片

五种数据类型

JavaScript基础_第29张图片

函数语法

JavaScript基础_第30张图片

定时器

JavaScript基础_第31张图片

JS处理事件(*)

事件介绍

用户可以对网页的元素有各种不同的操作:如 单击,双击,鼠标移动等这些操作就成为事件,事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行

常用事件

JavaScript基础_第32张图片
JavaScript基础_第33张图片

两种方式设置事件

单击事件

设置事件的两种方式:
命名函数

通过标签中的事件属性进行绑定

匿名函数

通过DOM元素属性绑定
document.getElementById("btn").onclick = function(){
}

事件案例

命名函数设置事件-通过双击复制上一个输入框内容

JavaScript基础_第34张图片

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/>
    
    <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>

命名函数设置事件-根据焦点得到或失去提示内容

JavaScript基础_第35张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>得到失去焦点事件title>
head>
<style>
    #msg {
        color: red;
    }
style>
<body>



用户名:<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>

将输入的内容转换为大写

JavaScript基础_第36张图片

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>

网页加载完成时事件

JavaScript基础_第37张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页加载完显示事件title>

    <script>
        //window.onload:网页加载完成时调用
        window.onload = function () {
            alert("网页加载完...")
        }
    script>
head>
<body>
<h3>我是h3h3>
<h3>我是h3h3>
<h3>我是h3h3>
<h3>我是h3h3>
body>
html>

JS内置对象

数组对象

创建数组的四种方式

JavaScript基础_第38张图片
JavaScript基础_第39张图片

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 + "
"
); // 方式二:创建一个长度为5的数组,没有数据 let arr2 = new Array(5); document.write(arr2 + "
"
); //,,,, //方式三:创建数组,保存指定的数据 (多个数字表示数组的内容) let arr3 = new Array(11, 22, 33); //11,22,33 document.write(arr3 + "
"
); // 方式四:创建数组,保存指定的数据***** let arr4 = [44, 55, 66, 77]; //44,55,66,77 document.write(arr4 + "
"
); //修改数组数据:数组名[索引] arr4[1] = 666; document.write(arr4 + "
"
); //44,666,66,77 //获取数组数据:数组名[索引] document.write(arr4[3] + "
"
); //77 //1.数组中元素的类型可以不同(了解) let arr5 = [10, true, "随便", 6.66] //数据类型可以不同:10,true,随便,6.66 document.write("数据类型可以不同:" + arr5 + "
"
); //2.长度可以动态变化//数组添加数据// 数组删除元素 arr5.push("新增数据"); //新增数据:10,true,随便,6.66,新增数据 document.write("新增数据:" + arr5 + "
"
); arr5.pop() //删除数据:10,true,随便,6.66 document.write("删除数据:" + arr5 + "
"
); //3.数组中还有方法 //reverse:将数组内容反转 arr5.reverse(); //翻转后的数组:6.66,随便,true,10 document.write("翻转后的数组:" + arr5 + "
"
); // 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 + "
"
); //join:将数组中的元素根据参数拼接成字符串 let str = arr6.join("+"); //拼接字符串:5+6+7+8 document.write("拼接字符串:" + str + "
"
); // sort排序 //数组中是字符串,排序规则:根据字符串的首字母ASCTT码值排序,如果首字母相同,根据下一个字母的ASCTT码值来排序 var arr10 = ['z', 'ac', 'ab', 'x', 'AB', "B"]; var str1 = arr10.sort(); //排序后:AB,B,ab,ac,x,z document.write("排序后:" + str1 + "
"
); var arr11 = [100, 9, 46, 20]; //数字排序后:100,20,46,9 //数组中是数字,将数字转成字符串,然后按照字符串的规则排序 document.write("数字排序后:" + arr11.sort() + "
"
); //自定义排序,按照数字从小到大排序 arr11.sort(function (a, b) { return a - b; }) //自定义排序后:9,20,46,100 document.write("自定义排序后:" + arr11 + "
"
);
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 + "
"
); //Sat Apr 23 2022 21:18:08 GMT+0800 (中国标准时间) //得到年份 document.write("当前的年份:" + date.getFullYear() + "
"
); //得到星期 //得到星期:0表示周日,1^6表示周一到周六 document.write("当前的星期:" + date.getDay() + "
"
); //得到毫秒值 document.write("当前的毫秒值:" + date.getTime() + "
"
); //得到本地格式的时间(根据我的操作系统语言,转成对应国建的通用时间格式) document.write("当前的本地系统时间:" + date.toLocaleString() + "
"
);
script> body> html>

使用js修改css样式

JavaScript基础_第40张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作csstitle>
head>
<body>
<style>
    .more{
        color: red;
        font-size: 90px;
        font-family: 新蒂黑板报底字;
    }
style>
<h1 id="first"> 我是一个h1 h1>
<h1 id="second">我是一个h1h1>
<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介绍

JavaScript基础_第41张图片

location对象

JavaScript基础_第42张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象title>
head>
<body>

<input type="button" value="点我刷新" onclick="location.reload()"/><br/>

<script>
    //location的href属性:获取地址栏的所有内容
    document.write(location.href + "
"
); //location的href属性:修改地址栏的所有内容(可以跳转网页) //location.href="http://www.jd.com"; //location的search属性:获取地址栏中?及以后的数据 document.write(location.search + "
"
); //location是window的属性可以省略window // location的href属性可以省略 document.write(window.location.href + "
"
); document.write(location.href + "
"
); document.write(location + "
"
);
script> body> html>

location面试题

JavaScript基础_第43张图片
都可以!!

history对象

JavaScript基础_第44张图片

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对象

三个对话框

JavaScript基础_第45张图片

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 + "
"
); //确认框:(只有确定和取消按钮),点击确定得到true,点击取消得到false let b = window.confirm("是真的么?") document.write(b + "
"
);
script> body> html>

计时器的有关方法

JavaScript基础_第46张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时跳转页面title>
head>
<body>

<span id="time">5span>秒后进行跳转
<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概念

JavaScript基础_第47张图片

DOM查找元素的四个方法

JavaScript基础_第48张图片

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>分类IDth>
        <th>分类名称th>
        <th>分类描述th>
        <th>操作th>
    tr>

    <tr>
        <td align="center"><input type="checkbox" name="chekbox">td>
        <td>1td>
        <td>手机数码td>
        <td>手机数码类商品td>
        <td><a href="">修改a>|<a href="">删除a>td>
    tr>
    <tr>
        <td align="center"><input type="checkbox" name="chekbox">td>
        <td>2td>
        <td>电脑办公td>
        <td>电脑办公类商品td>
        <td><a href="">修改a>|<a href="">删除a>td>
    tr>
    <tr>
        <td align="center"><input type="checkbox" name="chekbox">td>
        <td>3td>
        <td>鞋靴箱包td>
        <td>鞋靴箱包类商品td>
        <td><a href="">修改a>|<a href="">删除a>td>
    tr>
    <tr>
        <td align="center"><input type="checkbox" name="chekbox">td>
        <td>4td>
        <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树的添加方法

JavaScript基础_第49张图片

案例:学生信息管理(重点)

JavaScript基础_第50张图片

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>

<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>001td>
        <td>潘金莲td>
        <td>
            
            <input type="button" value="删除" onclick="deleteStudent(this)">
        td>
    tr>
    <tr>
        <td>
            <input class="xiaoDi" type="checkbox" >
        td>
        <td>002td>
        <td>鲁智深td>
        <td>
            
            <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");//相当于生成
        //将这行内容使用innerHTML直接设置到tr内部
        tr.innerHTML = "\n" +
            "            \n" +
            "        \n" +
            "        " + number + "\n" +
            "        " + name + "\n" +
            "        \n" +
            "            \n" +
            "            \n" +
            "        "
        //浏览器会自动给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使用正则表达式

JavaScript基础_第51张图片

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>


<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>
                
            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 = ""
        } else {
            //如果匹配,在后面的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 = ""
        } else {
            //如果不匹配,在后面的span中显示错误信息
            document.getElementById("mobile_is").innerText = "手机号格式不对";
        }
        return b;
    }

    function isbirth() {

    }

    //检测所有
    function checkAll() {
//只有用户名验证为true && 手机号为true,结果才为true
        return isUser() && ismobile();
    }

script>
body>
html>

JavaScript基础_第52张图片

js创建正则表达式

JavaScript基础_第53张图片

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事件绑定的方法

JavaScript基础_第54张图片

js的定时器对象

JavaScript基础_第55张图片

dom获取元素对象

JavaScript基础_第56张图片

dom对象操作元素

JavaScript基础_第57张图片

dom对象操作css样式

JavaScript基础_第58张图片

js弹出框的使用

JavaScript基础_第59张图片

js的location对象

JavaScript基础_第60张图片

你可能感兴趣的:(基础知识,java,javascript)