码迷,mamicode.com
首页 > 编程语言 > 详细

JavaWeb - JavaScript

时间:2020-07-04 13:44:12      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:监听器   右键   字典   alert   value   初始化   本地   弱类型   define   

1.JavaScript入门知识

  *概念:一门客户端脚本语言

    *运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

    *脚本语言:不需要编译,直接就可以被浏览器解析执行了

  *功能:

    *可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验

  *JavaScript发展史:

    1.1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为:C - -,后来更名为ScriptEase

    2.1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript

    3.1996年,微软抄袭JavaScript开发出JScript语言

    4.1997年,ECMA(欧洲计算机制造协会),ECMAScript,就是所有客户端脚本语言的标准

    *JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

2.ECMAScript:客户端脚本语言的标准

  1.基本语法:

 

    1.与html结合的方式

      1.内部JS

        *定义<script>标签,标签体内容就是js代码

      2.外部JS

        *定义<script>标签,通过src属性引入外部的js文件 

    2.注释

      1.单行注释://注释内容

      2.多行注释/*注释内容*/

    3.数据类型

      1.原始数据类型(基本数据类型):

        1.number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

        2.string:字符串

        3.boolean:true或false

        4.null:一个对象为空的占位符

        5.undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined

      2.引用数据类型:对象

    4.变量

      *变量:一小块存储数据的内存空间

      *Java语言是强类型语言,而JavaScript是弱类型语言

      *语法:

        * var 变量名 = 初始化值;

    5.运算符

      1.一元运算符:只有一个运算数的运算符

        ++ - -  , + (正号)

        注意:在js中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换

          *string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)

          *boolean转number:true为1,false为0

      2.算术运算符

        + - * /  %  。。。

      3.赋值运算符

        = += -= 。。。

      4.比较运算符

        > < >= <=  ==   ===(全等于)

        *类型相同:直接比较 

          *字符串:按照字典顺序比较,按位逐一比较,直到得出大小为止

        *类型不同:先进行类型转换,再比较

          *===,全等于,在比较之前,先判断类型,如果类型不一样,直接返回false

      5.逻辑运算符 

        &&  | |  !

        *对于 ! 非: 其他类型转boolean,之后进行if判断时,可以简化书写

          1.number:0或NaN为假,其他为真

          2.string:除了空字符串(" "),其他都是true

          3.null&undefined:都是false

          4.对象:所有对象都是true

      6.三元运算符

        ? :表达式  如: a >  b ? 1 : 3 ; 如果a大于b则取1,否则就是3

    6.流程控制语句

      1.if...else...

      2.switch

        *在java中,switch语句可以接受的数据类型:

          *switch(变量):byte int short char,枚举(1.5),String(1.7)

            case 值:

        *在JS中,switch语句可以接收任意的原始数据类型

      3.while

      4.do...while

      5.for

    7.JS特殊语法

      *如果一行只有一条语句,可以省略分号(不建议)

      *变量的定义使用var关键字,也可以不使用

        *用var定义的变量是局部变量

        *不用var定义的变量是全局变量

  2.基本对象

    1.Function:函数对象

      1.创建

        1. var fun = new Function(形参列表,方法体);

        2. function  方法名称(形参列表){ 方法体 }

        3. var  方法名称 = function(形参列表){ 方法体 }

      2.方法

      3.属性

        length:代表形参的个数

      4.特点

        1.方法定义时,形参的类型不用写,返回值类型也可以不写

        2.方法是一个对象,如果定义名称相同的方法,会覆盖

        3.在JS中,方法的调用只与方法的名称有关,和参数列表无关

        4.在方法声明中,有一个隐藏的内置对象(数组),arguments,封装所有的实际参数 

      5.调用

        方法名称(实参列表);

 

<script>

        function fun1(a,b) {
            alert(a);
        }
        fun1(3);
        
        var fun2 = function (a,b) {
            alert(b);
        }
        document.write(fun1.length);

        //求任意个数的和
        function add() {
            var sum = 0;
            for(var i = 0; i < arguments.length; i++){
                sum += arguments[i];
            }
            return sum;
        }

    </script>

 

     2.Array:数组对象

      1.创建

        1. var arr = new Array(元素列表);

        2. var arr = new Array(默认长度);

        3. var arr = 【元素列表】;

      2.方法

        join(参数):将数组中的元素按照指定的分隔符拼接为字符串

        push():向数组的尾部添加一个或更多元素,并返回新的长度

      3.属性

      4.特点

          1.JS中,数组元素的类型是可变的

        2.JS中,数组的长度是可变的

    

    3.Date:日期对象

      1.创建  var date = new Date();

      2.方法:

        toLocalString():返回当前date对象对应的本地字符串格式

        getTime():获取1970年1月1日零点至今的毫秒值   

    4.Math:数学对象

      1.创建:

        *特点:Math对象不用创建,直接使用。Math.方法名();

      2.方法:

        random():返回0-1之间的随机数。含0不含1

        ceil(x):对数进行向上取整

        floor(x):对数进行向下取整

        round(x):进行四舍五入

      3.属性:

        PI:圆周率

 

  <script>
        //取1-100之间的整数
        var number = Math.random();
        number = number * 100;
        var num = Math.floor(number);
        num += 1;
        document.write(num);
    </script>

 

    5.RegExp:正则表达式对象

      1.正则表达式:定义字符串的组成规则

        1.单个字符:【】

          如:【a】  【ab】 【a - z】 【a - z A - Z 0 - 9_】

          *特殊符号代表特殊含义的单个字符:

            \d : 单个数字字符【0-9】

            \w : 单个单词字符 【a - z A - Z 0 - 9_】

        2.量词符号:

          ? : 表示出现0次到1次

          *  : 表示0到无穷次 贪婪匹配

          + : 出现1到无穷次 贪婪匹配

          {m,n} : 表示大于等于m,小于等于n

            * m如果缺省: {,n}:最多n次

            * n如果缺省 :{m,}:最少m次

        3.开始结束符号

          *  ^ : 开始

          * $ : 结束

      2.正则对象

        1.创建

          1. var reg = new RegExp("正则表达式");

            2. var reg = /正则表达式/;

        2.方法

          test(参数):验证指定的字符串是否符合正则定义的规范          

 

    <script>
        var reg = new RegExp("\\w{6,12}");
        var reg2 = /\w{6,12}/;
        var username = "zhangsan";
        var flag = reg.test(username);
        // document.write(flag);
        alert(flag);
    </script>

 

    6.Global:全局对象

      1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用

      2.方法

        1.encodeURI():url编码

        2.decodeURI():url解码

        3.encodeURIComponent():url编码,编码的字符更多

        4.decodeURIComponent():url解码

        5.parseInt():将字符串转为数字

          *逐一判断每一个字符是否是数字,直到不是数字为止,将前面数字部分转为number

        6.isNaN():判断一个值是否是NaN

          *NaN六亲不认,连自己都不认。NaN参与的==比较全部为false

        7.eval():将JavaScript字符串,并把它做为脚本代码来执行

      3.URL编码 GBK:一个字符两个字节 UTF-8:一个字符三个字节 一个字节8个二进制位

 

2.DOM简单学习

  *功能:控制html文档的内容

  *代码:获取页面标签(元素)对象 Element

    * document.getElemetnById("id值"):通过元素的id获取元素对象

  *操作Element对象:

    1.修改其属性值:

      1.明确获取的对象是哪一个?

      2.查看API文档,找其中哪些属性可以设置

    2.修改标签体内容

      *属性:innerHTML,修改便签内的内容

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部JS
    外部JS-->

</head>
<body>
    <img src="../HTMLandCSS/img/logo.jpg" id="p1">
    <h1 id="title">悔创阿里杰克马</h1>
    <script>
        var e1 = document.getElementById("p1");
        var title = document.getElementById("title");
        alert("我要换内容了");
        title.innerHTML = "还是京东好";
    </script>
</body>
</html>

 

 

 

4.事件简单学习

  *功能:某些组件被执行了某些操作后,触发了某些代码的执行

 

  *如何绑定事件

    1.直接在html标签上,指定事件的属性(操作),属性值就是js代码

      1.事件:onclick  - - - 单击事件 <img src="../HTMLandCSS/img/logo.jpg" id="p1" onclick="f1();">

    2.通过js获取元素对象,指定事件属性,设置一个函数

案例:开关灯

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img src="img/off.gif" id="p1">
    <script>

        //1.获取图片对象
        var p1 = document.getElementById("p1");
        var flag = false; //代表灯是灭的
        function f1() {
            if(flag){ //如果灯开着就灭掉
                p1.src = "img/off.gif";
                flag = false;
            }else {
                p1.src = "img/on.gif";
                flag = true;
            }
                }
        p1.onclick = f1;

    </script>
</body>
</html>

 

5.BOM

  1.概念:Browser Object Model 浏览器对象模型

    *将浏览器的各个组成部分封装成对象

  2.组成:

    1.window:窗口对象

    2.Navigator:浏览器对象

    3.Screen:显示器屏幕对象

    4.History:历史记录对象

    5.Location:地址栏对象

技术图片

 

   3.window对象

    1.创建

    2.方法

      1.与弹出框有关的方法:

        alert()显示带有一段消息和一个确认按钮的警告框

        confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

          *如果用户点击确定按钮,则方法返回true,如果点击取消按钮,则方法返回false

        prompt()显示可提示用户输入的对话框

          *返回值,获取用户输入的值

      2.与打开关闭有关的方法

        open()打开一个新的浏览器窗口

          *返回一个新的window对象

        close()关闭浏览器窗口

          *谁调用我,我关谁

 

<body>
    <input type="button" value="前往网页" id="tag_id1">
    <input type="button" value="关闭网页" id="tag_id2">
    <script>
        var tag1 = document.getElementById("tag_id1");
        var tag2 = document.getElementById("tag_id2");
        var obj;
        tag1.onclick = function () {
            obj = open("https://www.baidu.com");
        };
        tag2.onclick = function () {
            obj.close();
        }


    </script>
</body>

 

       3.与定时器有关的方法

        setTimeout() 在指定的毫秒数后调用函数或计算表达式  一次性

          *参数:

            1.js代码或者方法  函数对象

            2.毫秒值

          *返回值:唯一标识,用于取消定时器

        clearTimeout() 取消由setTimeout()方法设置的Timeout

        setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 循环

          clearInterval()取消由setInterval()方法设置的Timeout

        var id = setInterval("alert(‘boom‘)",3000);
        clearInterval(id);    

 

 轮播图案例:

<body>

    <img src="../img/off.gif" id="pp">

    <script>
        var pid = document.getElementById("pp");
        var num = 1;
        function switchPicture() {
            num ++;
            if(num % 2==0){
                pid.src = "../img/off.gif";
            }else if(num % 2 == 1){
                pid.src = "../img/on.gif";
            }
        }
        setInterval(switchPicture,2000);

    </script>
</body>

 

    3.属性

      1.获取其他BOM对象

        History

        Location

        Navigator

        Screen

      2.获取DOM对象

        document

    4.特点

      *Window对象不需要创建可以直接使用 window使用。 window.方法名();

      *window引用可以省略。 方法名();

   4.Location:地址栏对象

    1.创建(获取):window.location 或 location

    2.方法

      *reload():重新加载当前文档

    3.属性

      *href:设置或返回完整的URL  Location.href = "https://www.baidu.com"

 

 自动跳转首页案例:

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }

    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒后跳转至首页
    </p>

    <script>
        //通过定时器实现倒计时
        var second = 5;
        var time = document.getElementById("time");
        function showtime() {
            //时间如果小于0,则跳转
            second --;
            if(second <= 0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second + "";
        }
        setInterval(showtime,1000);

    </script>
</body>
</html>
自动跳转首页案例

   5.History

    1.创建:window.history

    2.方法

      1.back() 加载history列表中的前一个URL 和网页箭头一样

      2.forward()加载history列表中的下一个URL

      3.go(参数)加载history列表中的某个具体页面

        *参数:

          正数:前进几个历史记录

          负数:后退几个历史记录

    3.属性:

      *length 返回当前窗口历史列表中的URL数量

 

6.DOM

  *概念:Document Object Model 文档对象模型

    *将标记语言文档的各个组成部分,封装成对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作  

  *W3C DOM 标准被分为3个不同的部分:

    *核心 DOM - 针对任何结构化文档的标准模型

      *Document:文档对象

      *Element:元素对象

      *Attribute:属性对象

      *Text:文本对象

      *Comment:注释对象

      *Node:节点对象,其他5个的父对象

    *XML DOM - 针对 XML 文档的标准模型

    *HTML DOM - 针对 HTML 文档的标准模型

  

  *核心 DOM - 针对任何结构化文档的标准模型

 

      *Document:文档对象

 

        1.创建(获取):在html dom模型中可以使用window对象来获取

        2.方法:

          1.获取Element对象

            1.getElementById(): 根据ID属性值获取元素对象。ID属性值一般唯一

            2.getElementsByTagName():根据元素的名称获取元素对象们。返回值是一个数组  如a,p,div等标签

            3.getElementsByClassNmae(): 根据Class的属性值来获取元素对象们。返回值是一个数组  如相同的class值

            4.getElementsByName():根据Name属性值获取元素对象们。返回值是一个数组  如name值

          2.创建其他的DOM对象 

            createAttribute(name)

            createComment()

            createElement()

            createTextNode()

 

      *Element:元素对象

          1.获取:通过document对象来获取和创建

          2.方法:

            1.removeAttribute():删除属性

            2.setAttribute():设置属性

 

<body>
    <a>点我试试</a>
    <input type="button" id="tag_button" value="给超链接设置网页">

    <script>
        //获取这个a标签元素
        var ele_a = document.getElementsByTagName("a")[0];
        //拿到按钮
        var ele_button = document.getElementById("tag_button");
        //给按钮绑定事件
        ele_button.onclick = function () {
            ele_a.setAttribute("href","https://www.baidu.com");
        };

    </script>
</body>

 

      *Node:节点对象,其他5个的父对象

        *特点:所有DOM对象都可以被认为是一个节点

        *方法:

          *CRUD dom树:

            *appendChild():向节点的子节点列表的结尾添加新的子节点

            *removeChild():删除(并返回)当前节点的指定子节点

            *replaceChild():用新节点替换一个子节点

            注意:

              超链接功能:
                1.可以被点击;有样式
                2.点击后跳转到href指定的url
              需求:保留功能1,去掉功能2
              实现:href="javascript:void(0);"

案例:删除子节点

 

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            height: 200px;
            width: 200px;
        }
        #div2{
            height: 100px;
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
        超链接功能:
            1.可以被点击;有样式
            2.点击后跳转到href指定的url
        需求:保留功能1,去掉功能2
        实现:href="javascript:void(0);"
    <a href="javascript:void(0);">删除子节点</a>
    <script>
        var ele_a = document.getElementsByTagName("a")[0];
        //给超链接对象绑定点击事件
        ele_a.onclick = function () {
            //获取div1这个父节点对象
            var ele_div1 = document.getElementById("div1");
            var ele_div2 = document.getElementById("div2");
            ele_div1.removeChild(ele_div2);
        }

    </script>
</body>
</html>

删除子节

        *属性:

          *parentNode:返回节点的父节点

 案例:动态增删表格

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加:
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td,去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table,将tr添加到table 中
        删除:
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //创建td,赋值td的标签体
        var td_id = document.createElement("td");
        //文本节点才能放入
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var a = document.createElement("a");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this);");
        td_a.appendChild(a);


        //创建tr
        var tr = document.createElement("tr");

        //添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
        
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>
动态增删表格

 

  *HTML DOM

    1.标签体的设置和获取:innerHTML

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加:
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td,去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table,将tr添加到table 中
        删除:
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        var ele_table = document.getElementsByTagName("table")[0];
        //向table里添加
        ele_table.innerHTML += "<tr>\n" +
            "            <td>"+id+"</td>\n" +
            "            <td>"+name+"</td>\n" +
            "            <td>"+gender+"</td>\n" +
            "            <td><a href=\"javascript:void (0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>";
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>

使用HTMLDOM实现动态表格案例

    2.使用html元素对象的属性

    3.控制样式

      1.使用元素的style属性来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"> div </div>

<script>
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function () {
        ele_div1.style.border = "1px solid red";
        //font-size --> fontSize
    }
</script>
</body>
</html>

style来控制

      2.提前定义好类选择器的样式,通过元素的className属性来设置其class属性值

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div1"> div </div>

<script>
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function () {
        ele_div1.className = "d1";
    }
</script>
</body>
</html>
class来控制

 

 7.事件

   概念:某些组件被执行了某些操作后,触发了某些代码的执行

    *事件:某些操作,如单击、双击、键盘按下了,鼠标移动

    *事件源:组件。如:按钮、文本输入框。。。

    *监听器:代码

    *注册监听:将事件、事件源、监听器结合在一起。当事件源上发生了某个事件,则触发执行某个监听器代码

  常见的事件:

    1. 点击事件:

      1.onclick :单击事件

      2.ondbclick :双击事件

    2. 焦点事件:

      1.onblur : 元素失去焦点

        *一般用于表单校验

      2.onfocus :元素获得焦点

    3. 加载事件:

      1.onload :一张页面或一幅图像完成加载

    4. 鼠标事件:

      1.onmousedown :鼠标按钮被按下

        *定义方法时,定义一个形参,接收event对象

        *event对象的button属性可以获取鼠标那个键被点击了  左键 0 中键 1 右键 2

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function(){
            var ele_1 = document.getElementById("tag1");
            ele_1.onmousedown = function (event) {
                if(event.button==0){
                alert("左键被按下了");
            }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="tag1">
</body>
</html>
左键属性

 

      2.onmouseup :鼠标按键被松开

      3.onmousemove : 鼠标被移动

      4.onmouseover : 鼠标被移到某元素之上

      5.onmouseout : 鼠标从某元素移开

    5. 键盘事件:

      1.onkeydown :某个键盘按键被按下

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function(){
            var ele_1 = document.getElementById("tag1");
            ele_1.onkeydown = function (event) {
                if(event.keyCode == 13){
                alert("提交表单 、");
            }
            }
        }
    </script>
</head>
<body>
    <input type="text" id="tag1">
</body>
</html>
回车提交表单

      2.onkeyup : 某个键盘按键被松开

      3.onkeypress : 某个键盘按键被按下并松开

    6. 选中和改变

      1. onchange : 域的内容被改变

        *三级联动时使用,比如省市选择时

      2. onselect : 文本被选中

    7.表单事件:

      1. onsubmit : 确认按钮被点击

        *可以阻止表单的提交

          *方法返回false则表单被阻止提交

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            //校验用户名格式是否正确
            var flag = true;
            return flag;
        }
    </script>
</head>
<body>
<form action="#" onsubmit="return checkForm();">
    <input type="text" id="tag1" name="username">
    <input type="submit" value="提交">
</form>
</body>
</html>
阻止表单提交

      2. onreset : 重置按钮被点击

 

案例:全选表格

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .over{
            background-color: deeppink;
        }
        .out{
            background-color: white;
        }
    </style>
    <script>
        /*
            分析:
                1.全选:
                    *获取所有的checkbox
                    *遍历cb,设置每一个cb的状态为选中 checked属性

        */
        //1.在页面加载完后绑定事件
        window.onload = function () {
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选功能,获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    //设置每一个checked属性为true
                    cbs[i].checked = true;
                }
            }

            //3.给给不选按钮绑定单击事件
            document.getElementById("unSelectAll").onclick = function () {
                //全不选功能,获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    //设置每一个checked属性为false
                    cbs[i].checked = false;
                }
            }

            //反选事件
            document.getElementById("selectRev").onclick = function () {
                //全选功能,获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            //第一个cb点击
            document.getElementById("first_cb").onclick = function () {
                //获取所有checkbox
                var cbs = document.getElementsByName("cb");
                //遍历
                for(var i = 0;1 < cbs.length; i++){
                    //设置每一个的状态和第一个的一样,this是onclick绑定的第一个cb
                    cbs[i].checked = this.checked;
                }
            }

            //给所有的tr绑定一个移到元素之上和移除事件
            var trs = document.getElementsByTagName("tr");
            //遍历
            for(var i = 0; i < trs.length; i++ ){
                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                };
                //移出元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }
        }

    </script>
</head>
<body>
    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cb" id="first_cb"></th>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>操作</td>
        </tr>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
            <th><input type="checkbox" name="cb"></th>
            <td>3</td>
            <td>岳不群</td>
            <td>?</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>
</body>
</html>
全选表格

 

 案例:表格校验

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>

        body{
            background: url("../../HTMLandCSS/img/register_bg.png") no-repeat center;
        }
        /*让所有元素都挨近 上下两行字*/
        *{
            margin: 0px;
            padding: 0px;

        }
        /*给最外层框框定义*/
        .register_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中*/
            margin: auto;
            margin-top: 25px;
        }
        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 450px;
            margin-top: 20px;
            margin-left: 30px;
        }
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 10px;
        }
        /*选择左边div下的第一个p标签*/
        .rg_left > p:first-child{
            color:#FFD026;
            font-size:20px;
        }
        /*选择左边div下的最后一个p标签*/
        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;
        }
        .rg_right p a {
            color: palevioletred;
        }
        /*表格中所有左侧的元素*/
        .td_left{
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#tel,#checkcode,#birthday{
            width: 160px;
            height: 26px;
            border: 1px solid #A6A6A6;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 100px;
        }
        #img_check{
            height: 32px;
            /*设置垂直居中*/
            vertical-align: middle;
        }
        #sub{
            width: 120px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid  #FFD026;
            margin-left: 80px;
        }
        .error{
            color: red;
        }
        #td_sub{
            padding-left: 130px;
        }
    </style>
    <script>
        /*
            分析:
                1.给表单绑定onsubmit事件,监听器中判断每一个方法的校验结果
                    如果都为true,则监听器方法返回true
                    如果有一个为false,则监听器方法方法返回false
                2.定义一些方法,分别校验各个表单项
                3.给各个表单项绑定onblur离焦事件

        */

        window.onload = function () {
            //1.给表单绑定onsubmit事件
            document.getElementById("form").onsubmit = function () {
                //调用用户名校验方法、密码校验方法 checkUserName checkPassword
                return checkUserName() && checkPassword();
            }
            //给用户名和密码框分别绑定离焦事件  注意:只要函数对象!!!不要方法执行
            document.getElementById("username").onblur = checkUserName;
            document.getElementById("password").onblur = checkPassword;
        };

        //校验用户名
        function checkUserName() {

            //1.获取用户名的值
            var username = document.getElementById("username").value;

            //2.定义正则表达式
            var reg_username = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_username.test(username);
            //4.提示信息
            //通过span标签来添加后面的图片或者文字提示
            var s_username = document.getElementById("s_username");

            if(flag){
                //提示绿色对勾

                s_username.innerHTML = "<img width=‘35px‘ height=‘25px‘ src=‘../img/on.gif‘/>"
            }else {
                //提示红色的用户名有误
                s_username.innerHTML = "用户名格式有误";
            }
        }

        //校验密码
        function checkPassword() {

            //1.获取用户名的值
            var password = document.getElementById("password").value;

            //2.定义正则表达式
            var reg_password = /^\w{6,12}$/;
            //3.判断值是否符合正则的规则
            var flag = reg_password.test(password);
            //4.提示信息
            //通过span标签来添加后面的图片或者文字提示
            var s_password = document.getElementById("s_password");

            if(flag){
                //提示绿色对勾

                s_password.innerHTML = "<img width=‘35px‘ height=‘25px‘ src=‘../img/off.gif‘/>"
            }else {
                //提示红色的用户名有误
                s_password.innerHTML = "密码格式有误";
            }
        }

    </script>
</head>
<body>
<div class="register_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <!--中间的表格-->
            <form action="#" method="get" id="form">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入email"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入生日"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img src="../../HTMLandCSS/img/verify_code.jpg" id="img_check"></td>
                    </tr>
                    <tr>
                        <td colspan="2" id="td_sub"><input type="submit" value="注册" id="sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>
</div>
</body>
</html>
表格检验

 

JavaWeb - JavaScript

标签:监听器   右键   字典   alert   value   初始化   本地   弱类型   define   

原文地址:https://www.cnblogs.com/caixiaowu/p/13156338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!