ECMAScript前端开发之JavaScript篇

一、JavaScript介绍 

前者三杀手之JavaScript,简称js,只怕是那多少个里面最难的3个了。很早从前,市面上流通着三种js版本,为了统一,ECMA(欧洲总结机成立组织)定义了正式的本子,即EcmaScript。

实质上ECMAScript只是JavaScript的一片段,完整的JavaScript是由以下八个部分组成的:

  核心(ECMAScript)

  文书档案对象模型(DOM)Document object model

  浏览器对象模型(BOM)Broswer object model

 

与html和css比较,js是一门成熟的编制程序语言,而且是前者唯一的一门编制程序语言。js的广大代码结构和Java相似,不过在语法上又不曾很强制的渴求,在选取中你会渐渐发现,那一个事物很难会报错。既然是一门编制程序语言,就要从变量,数据类型,运算符,流程序控制制语句,函数(并不是有所的语言都有函数的定义),类和指标(js没有“类”)那几个地点来动手学习。

二、ECMAScript(核心)

第壹,js的笺注和Java一样

  //单行注释

  /*多行注释*/

js的代码段是用大括号分割的,语句与话语之间用分号隔绝,没有分号的话私下认可以换行符为分隔符。

1.变量

(1)证明变量时有var关键字,不用var关键字的话是全局变量,除非有亟待,不然不建议用全局变量,会拖慢效能;

(2)变量要先注解,再定义,

  var i;

  i=10;

  只怕简写成var i=10;(一般都如此处理)

(3)js还帮忙一行评释四个变量,并且能够是分裂档次

  var i=10,j=”zhang”;

(4)若是申明一(Wissu)个变量x,却不给他赋值,打字与印刷的时候居然也不报错,而是打字与印刷undefined

(5)变量的命名规范,那并不是某一种语言特有的,只借使变量,就会涉及那个题材,推荐一个匈牙利(Hungary)品种标记法:在变量名前加一个小写字母说明该变量的档次,前面包车型地铁名字用驼峰命名法。

(6)变量命名:首字母必须是字母、下划线大概$多在那之中的1个,别的的能够是下划线、日元符号只怕其它字母,数字。要避开主要字:

ECMAScript 1

2.数据类型

js中绝非print,大家得以用alert(弹窗)可能console.log()(在浏览器的控制台打印)打印咱们想要的结果

查看数据类型用typeof命令

var x=10;
console.log(typeof(x));

(1)js中某个数据类型有:

    基本数据类型:Number(数值),String(字符串),Boolean(布尔值),Null,Undefined

    引用数据类型:object

    js中并没有列表,元组,字典那种数据类型,列表和元组是以数组对象完结的

(2)Number(数字类型)

不区分整型和浮点型;

(3)String(字符串类型)

由unicode字符、数字和标点符号组成的行列,特殊字符要加上反斜杠转义。

(4)Boolean(布尔类型)

布尔类型仅有多少个值,true和false,在事实上运算中,true=1,false=0

这么些用在if判断语句前边,事实上if语句前边能够是轻易数据类型,只要有布尔值就行了,这或多或少js和python一样,然而任何语言中,if后边总得是表明式

(5)null和undefined类型

undefined类型唯有一个值,就是undefined,当函数没有掌握再次回到值,可能评释的变量没有初识化的时候,就会生出这一个值。

而null常并发在找不到指标的时候。        

3.运算符

js中的运算符和python中基本相同,说一说不雷同的多少个:

(1)i++和++i

那一个学过c++的一定驾驭,没什么可说的,应该是为了试验才出的那种事物吧

  i++是先赋值再计算

  ++i是先计算再赋值

(2)”===”

先是在python中,要是那样一条语句

print(2=="2")

打字与印刷的结果肯定是false,那是因为Python是一门强类型语言,不会活动转换变量的品类,然则,js是一种弱类型语言,在js中打字与印刷那一个讲话,结果会是true,因为js自动把数值类型的2转换到字符串类型的“2”,那么难点就来了,要是在js中,就是判断项目是不是相同,不要自行转换,就用到了这一个运算符“===”

在js的number类型中,还要一种数据类型是NaN类型,那是当境遇字符串转换到数字无效时收获的结果。比如:

var s="hello";
var ret2=+s;
console.log(ret2)

诸如此类就会得到叁个NaN

4.流程序控制制

(1)if条件语句

与Python不一致的是,js中从不elif那种写法,多分支只好用else if

if (表达式){
    执行语句
}
else if(表达式){
    执行语句
}
else{
    执行语句
}

(2)switch-case语句

switch (表达式){
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

留神:值1,值2。。。。那一个是鲜明的值,default是上述值都不是表明式的值的时候实施的口舌;

  这么些break是必需的,即便没有break,这个话语将都会实施

(3)while循环和for循环

while循环和Python一样,有多个因素:早先变量,测量圭表,变量自加。就不多说了

说一下for循环

for循环情势一:规范循环(最常用)

for(var i=0;i<10;i++){
    console.log("i")
}

for循环境情形势二:遍历循环

var arr=["a","b","c"];
for (var i in arr){
    console.log(i)
}

本条结果打字与印刷的是索引值0,1,2

想取到数组里的值,可以用arr[i],关于数组对象,一会儿会专门说

那是数组,js中尚无字典这种数据类型,可是有一种恍若的写法和用法

var info={"a":123,"b":234,"c":345};
for (var i in info){
    console.log(i)
}

那种情景下,得到的i正是“字典”中的“key”:a,b,c,取值同样是info[i]

5.对象

在我们上学了面向对象之后,应该有那种思维,见到“对象”那四个字,就霎时想到对象有总体性和格局。

(1)字符串对象

  成立格局有二种:        

        变量=“字符串”;  var str1=”hello world”

        字符串对象名称=new String(字符串) var str1=new
String(“hello world”)

  字符串对象就八性情质,length属性

艺术:s为字符串对象

s.toLowerCase()    —–转成小写

s.toUpperCase()    —–转成大写

s.trim()         ——去除字符串两边空格

 

s.charAt()       ——获取钦命地点字符,括号里为要获取的字符索引

s.indexOf()      
 ——-查询内定字符的目录地方,括号里为要寻找的字符

s.lastIndexOf()     ——-跟上面那条效益雷同,可是是反着找

s.match()        ——-重回匹配字符串的数组,没有匹配到重临null

s.seach()       
——-重返匹配到的字符串首字符的岗位索引,匹配不到重回-1

 

s.substr(start,length)    截取内定长度字符串,start是发端地方的索引值,length代表长度

s.substring(start,end)    截取字符串,start是开始地方索引,end是终止地方索引,取中间的字符串

s.slice(start,end)      切片字符串

s.replace(oldstr,newstr)    替换字符串,(旧的,新的)

s.split()          分割字符串,结果放到三个数组中

s.concat(addstr)       拼接字符串,括号里为要拼接的字符串

演示:

s="hello";
    console.log(s.toLowerCase());       //hello
    console.log(s.toUpperCase());       //HELLO
    console.log(s.charAt(2));           //l
    console.log(s.indexOf("o"));        //4
    console.log(s.lastIndexOf("o"));    //4
    console.log(s.match("lo"));         //[object Array]["lo"]
    console.log(s.match("lol"));        //null
    console.log(s.search("lo"));        //3
    console.log(s.search("lol"));       //-1
    console.log(s.substr(1,3));         //ell
    console.log(s.substring(1,3));      //el
    console.log(s.slice(1,3)) ;         //el
    console.log(s.replace("ell","o")) ; //hoo
    console.log(s.split("e")) ;         //[object Array]["h", "llo"]
    console.log(s.concat("world")) ;    //helloworld

 

(2)数组对象(array对象)

制造数组的二种格局:  

  •   var  arr=[1,2,3];
  •         var arr=new Array[1,2,3];
  •         var arr=new Array(3);

      arr[0]=1;

      arr[1]=2;

      arr[2]=3;

还足以成立二维数组,类似三个列表,arr[ ] [
],第2个目录为行,第一个目录为列

join方法:

  在Python中的join方法的用法是那般的:    

s1="hello"
s2="world"
s3="-".join([s1,s2])
print(s3)           #hello-world

  在js的数组中正好反过来,

console.log(["hello","world"].join("-"))    //hello-world

reverse方法和sort方法:

  都以对数组进行排序的,reverse是雀巢鸠占顺序,sort是按首字母的ascii码表地点排序

slice方法:

  对数组实行切开操作,参数为起首地方和得了地点的索引值

splice方法:

  删除子数组,有多少个参数

  arr.splice(start,deleteCount,value)

  start代表开头地点(从伊始地方前边开首删),deleteCount
表示删除数组成分的个数,value 代表在剔除地方插入的数组成分(可粗略)

push和pop方法:

  在数组的最后添加和删除成分

unshift和shift方法:

  在数组起来地方添加和删除成分

(3)时间对象

  创立时间对象:var timer = new Date()

  

ECMAScript 2ECMAScript 3

获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月(0-11)
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)


//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)

var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒

时间对象

(4)math对象,正是把停放函数封装到math对象中,使用时必要用Math来调用方法

abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数(底为e)。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

(5)函数对象(重点)

    //定义一个函数
    function 函数名(参数) {
        函数体
    }

    //调用函数
    函数名()

留神:js中等学校函授数的调用能够在概念之前,这一点和Python区别,Python是单排一行的执行,而js是先编写翻译一次,再去实践

关于函数的参数:

  在函数内部有三个arguments对象,这一个指标里含有了函数调用时传的参数

  

    function add() {
        console.log(arguments);
        var sum=0;
        for (var i=0;i<arguments.length;i++){
           sum+=arguments[i] ;
        }
        console.log(sum);
    }

    add(1,2,3,5,7);
    //[object Arguments]{0: 1, 1: 2, 2: 3, 3: 5, 4: 7, length: 5}
    //18

js中也有匿名函数,在后头事件绑定的时候会不时应用

③ 、BOM对象(浏览器对象)

1.windows对象

  在浏览器中,各类打开的网页是2个窗口,有三种艺术完结弹出框:

  (1)alert(123)       在窗口中弹出“123”,点击分明没有

  (2)var  ret=confirm(‘zhang’);

      console.log(ret);    在窗口中弹出“zhang“,有明确和注销多个按钮,点击分明,会在后台重返二个true,点击撤除,会回来1个false

  (3)var ret=prompt(“input a
number”)  在窗口弹出一个输入框,同样能够透过3个变量来收纳用户输入的内容

 

2.setInterval() 和 clearInterval()

setInterval()是依照钦定的光阴周期(阿秒为单位)来一而再调用函数或然总计表达式,第一个参数为函数,第二个参数为时间间隔

clearInterval()是吊销由setInterval()设置的操作,那个的参数为setInterval()的再次来到值

演示:在贰个input框右面有三个按钮,点击先导就在框中每隔1秒中打字与印刷二遍当前时光,点击甘休就告一段落刷新

ECMAScript 4ECMAScript 5

<body>
    <input type="text">
    <button class="start">开始</button>
    <button class="end">停止</button>
<script>
    ele_start=document.getElementsByClassName("start")[0];//开始按钮
    ele_end=document.getElementsByClassName("end")[0];    //停止按钮
    function foo() {
        var timer=new Date().toString();
        var ele=document.getElementsByTagName("input")[0];
        ele.value=timer.slice(4,25);//是框内显示最适合查看代码效果的部分
    }

    var ID;//定义一个全局变量,用于接收返回值
    ele_start.onclick=function () {
        if (ID==undefined){             //为了解决第二次点击开始的时候,代码不执行的bug
            foo();                      //为了实现一点击开始,马上就能出现时间的效果
        ID=setInterval(foo,1000);
        }

    }
    ele_end.onclick = function () {
        clearInterval(ID);
        ID=undefined;   //清除定时器后再给id重新赋值
    }
</script>
</body>

View Code

3.setTimeout() 和 clearTimeout()

以此是在内定的时日后调用函数或总括表明式,用法和方面那八个相同。差异是其一头会实行一次。

四、DOM对象    那才是最大的最重要

 在DOM中,全数目的都以节点指标,当中

  document对象是:整个html文档

  element对象是指:html中的任何一个标签都以一个element对象

  想要对标签执行操作必要两步:查找标签和操作标签

1.查找标签

  (1)间接搜索

    document.getElementsByClassName("classname");//根据class查找标签
    document.getElementsByTagName("elementname");//根据标签名查找标签
    document.getElementById("idname");           //根据ID名查找标签
    document.getElementsByName("name");          //根据name属性查找标签

那二种艺术中,唯有 document.getElementById(“idname”)是找到一个标签,别的三种都以找到多个,将结果放到八个数组中,能够经过索引分别取到

  (2)通过节点属性查找

var ele=document.getElementsByClassName("start")[0];
    ele.parentElement;//    查找父节点
    ele.children;     //    查找所有子标签
    ele.firstElementChild;  //查找第一个子标签元素
    ele.lastElementChild;   //查找最后一个子标签元素
    ele.nextElementSibling; //查找下一个兄弟标签
    ele.previousElementSibling;//查找上一个兄弟标签

急需注意的是,没有直接的属性能够查找到具备的男士儿标签,倘若想在DOM中找到全体子标签,能够透过遍历
 
 操作标签的父标签的全体子标签,然后用if条件判断排除当前操作标签的点子。

2.风浪绑定的章程

方式一:

<body>
    <div>
        <button onclick="foo()">点击</button>
    </div>
<script>
    function foo() {
        alert(123)
    }
</script>
</body>

那种措施,js代码和html代码杂糅在同步,耦合性太强了

方式二:

<body>
    <div>
        <button>点击</button>
    </div>
<script>
    ele_button=document.getElementsByTagName("button")[0];
    ele_button.onclick=function () {
        alert(123)
    }
</script>
</body>

唯独那种措施会有贰个难题:js代码会在页面出现的时候就已经加载完了,假如前边有新加上的价签,就无法绑定那么些事件了,因为js代码已经加载过3次,有几个绑定事件的标签就已经规定了,这一个标题在jQuery中能够很有益于消除,在DOM对象中,有两种消除办法可供参考:

    1.把标签绑定的风云写到函数中,即首先种绑定事件的主意

    2.在充裕标签的代码中,再写三回事件绑定函数

设若地方这一点没看理解的话,大概你对查找到的标签是个数组那件事还不太通晓,再写2个例子:

<body>
    <div>
        <button>添加</button>
        <button>删除</button>
        <button>编辑</button>
    </div>
<script>
    eles_button=document.getElementsByTagName("button");
    //此时eles_button并不是一个标签了,而是有三个标签的集合
    //给每个标签绑定事件就要通过循环遍历这个数组来拿到每个标签
    for(var i=0;i<eles_button.length;i++){
        eles_button[i].onclick=function () {
        alert(123)
        }
    }
</script>
</body>

由此那个事例再作证方面包车型客车题材,在绑定事件的时候,找标签的长河就早已成功了,只找到了多少个标签,不过大家新添加一个button后,代码不会再也重新刷新,所以新增进的那几个button并从未绑定事件。

3.对标签操作

  (1)对class操作    

   ele.classList.add("hide")       //为标签添加class
    ele.classList.remove("hide")    //为标签移除class

练习:左边菜单

ECMAScript 6ECMAScript 7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .left{
            width: 20%;
            height: 800px;
            background: grey;
            float: left;
        }
        .right{
            width:80%;
            height:800px;
            background: navajowhite;
            float: left;
        }
        .title{
            background: purple;
            margin-top: 10px;
        }
        ul{
            background: green;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
            <div class="menu">
                <div class="title">菜单一</div>
                    <ul>
                        <li>111</li>
                        <li>111</li>
                        <li>111</li>
                    </ul>
            </div>

            <div class="menu">
            <div class="title">菜单二</div>
            <ul class="hide">
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
            </div>

        <div class="menu ">
            <div class="title">菜单三</div>
            <ul class="hide">
                <li>333</li>
                <li>333</li>
                <li>333</li>
            </ul>
        </div>
    </div>

    <div class="right"></div>

    <script>
//        查找标签
        var eles_title=document.getElementsByClassName("title");
        for (var i=0;i<eles_title.length;i++){
            eles_title[i].onclick=function () {
                this.nextElementSibling.classList.remove("hide");   //this就是触发事件的标签
                var eles_child=this.parentElement.parentElement.children;
                for (var j=0;j<eles_child.length;j++){
                    if(eles_child[j].firstElementChild!=this) {
                        eles_child[j].lastElementChild.classList.add("hide")//添加hide属性,就把这个标签隐藏了
                    }
                }
            }
        }
    </script>
</body>
</html>

View Code

4.节点操作

  ele.createElement()         //创建一个节点,括号里是标签名
    ele.removeChild()           //父标签删除一个子节点,括号里是标签对象
    ele.replaceChild()          //替换标签,ele是父标签,括号里依次是旧的标签对象,新的标签对象
    ele.appendChild()           //父标签添加子标签

那里单独说一下复制标签:cloneNode

<script>
    var ele_copy=document.getElementsByTagName("div")[0].cloneNode();//这种只是拷贝最外层的节点
    var ele_copy=document.getElementsByTagName("div")[0].cloneNode(true);//这种才是完整的拷贝
    这里有一个bug,如果被拷贝的对象有id属性,仍然可以拷贝,而且拷贝出来的对象也有这个id
    还有一个问题,源标签的绑定事件不会被拷贝

</script>

 

5.得到标签中的文本

ele.innerText 和 ele.innerHTML

这是取值,赋值正是

ele.innerText="<a href='#'>click</a>"
ele.innerHTML="<a href='#'>click</a>"

innerText就是纯文本,可是innerHTML
会把获得的成分当时叁个标签(要是这么些成分是2个标签)

6.属性值操作 attribute

我们一直取属性值的时候就一向用的  标签.属性

    给属性赋值便是平昔用的   标签.属性=“  ”

而是事实上,是有个attribute方法的

特性取值:ele.getAttribute(属性名)

品质赋值:ele.setAttribute(属性名)

删除属性:ele.removeAttribute(属性名)

7.DOM事件

    onclick             //点击标签
    ondbclick           //双击标签
    onfocus             //元素获得焦点
    onblur              //元素失去焦点
    onchange            //域的内容发生改变,常用于表单元素
    onkeydown           //键盘按键被按下
    onkeypress          //某个键盘按键被按下并松开。
    onkeyup             //某个键盘按键被松开。


    onload              //一张页面或一幅图像完成加载。

    onmousedown         //鼠标按钮被按下。
    onmousemove         //鼠标被移动。
    onmouseout          //鼠标从某元素移开。
    onmouseover         //鼠标移到某元素之上。
    onmouseleave        //鼠标从元素离开

    onselect            //文本被选中。
    onsubmit            //确认按钮被点击。

(1)onchange事件

一般说来用于表单标签,一个表格里的始末被更改时(大家选拔一个增选时),触发事件

勤学苦练:省市二级联合浮动

ECMAScript 8ECMAScript 9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<!--需求:两个表单,左边是省份,右边是城市,左边选择省份后,右边内容是对应的城市-->
<body>
<select name="" id="province">
    <option value="">请选择省份</option>
    <option value="">河北</option>
    <option value="">山东</option>
</select>
<select name="" id="city">
    <option value="" id="select_city">请选择城市</option>
</select>
</body>

<script>
    var info={
        "河北":["北京","衡水"],
        "山东":["青岛","潍坊"]
    };
//    js中虽然没有字典的说法,但是有类似的用法。
    var ele_pvn=document.getElementById("province");
    var ele_city=document.getElementById("city");
    var ele_select; //定义一个全局变量
    ele_pvn.onchange=function () {
        ele_city.options.length=1;      //保留一项,后面的内容全部清除
        for (var i in info){
            if (i==(this.children[this.selectedIndex]).innerText){  //判断
//                this.selectedIndex是取到选择内容的索引值
                for(var j in info[i]){
                    //思路是每选择一个省份,就把后面城市里的内容全部清空,然后从“字典”中根据选择的省份,重新新建一个后面城市的标签
                    var city_option=document.createElement("option");   
                    city_option.id="selected";                          
                    ele_select=document.getElementById("selected");

                    city_option.innerText=info[i][j];
                    ele_city.appendChild(city_option);          
                }
            }
        }
    }
</script>
</html>

View Code

(2)onkeydown事件,用于input输入框

以此事件是按键盘上恣意按键都会触发,那实在意义十分小。如若想要钦命按键,该咋办?

此处用到1个event对象,event对象是保存事件触发状态的靶子,由操作系统一发布送

    ele.onkeydown=function (e) {
        e=e||window.event;   //这句代码是为了避免出现某些浏览器的不兼容问题
        console.log(e.keyCode);//这样会打印按键的ascii码
        console.log(String.fromCharCode(e.keyCode))//这句代码可以把ascii码转换成字符
    }

(3)onload事件

script中涉及到找寻标签时,js代码必须写在html代码上面,不然会因为找不到标签而报错

可是一旦正是想让js代码在上头,就用到onload事件

抑或再说一个采取场景:浏览器加载图片实际上是和加载别的文件标签分开的,是新开了一个线程。有事网速不给力的时候,就会出错。这时就足以用到这一个事件,让别的标签等待图片加载完才能操作

用法如下:

<script>
    window.onload=function () {
        var ele=document.getElementsByTagName("div")
        ele.style.color="green";

    }
</script>

(4)onsubmit事件

以此事件是给form表单用到,是在表单提交的时候接触。表单标签里面包车型客车百般submit标签,点击之后会刷新页面,同时把数量提交给后台服务器(若是action钦命了地址),那是submit自身私下认可的轩然大波,大家用onsubmit事件的含义正是要阻拦submit的私下认可事件。比如在用户登录输入用户名密码的时候,前端能够先判断一下格式是或不是正确,若是格式都不正确,就没要求发送给后端了。

onsubmit事件一定是在submit事件在此之前接触的,不然就没意义了。

截留submit暗中同意事件的办法有三个:

  1.return false

  2.e.preventDefault()

演练:用户登录验证

ECMAScript 10ECMAScript 11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div{
            margin-top: 30px;
        }
    </style>
</head>
<body>
<form action="" class="form">
    <div id="abd" ><input type="text" placeholder="用户名" class="text"></div>
    <div><input type="password" placeholder="密码" ></div>
    <div id="abc"></div>
    <div><input type="submit" value="提交" class="submit"></div>
</form>

</body>

<script>
     var ele_text=document.getElementsByClassName("text")[0];
     var ele_submit=document.getElementsByClassName("form")[0];
     var ele_abd=document.getElementById("abd");

     ele_submit.onsubmit=function () {
         if (ele_text.value.length>5){
             var ele_warm=document.createElement("h5");
             ele_warm.innerText="用户名超出规定长度!";
             ele_warm.style.color="red";
             ele_warm.style.display="inline";
             ele_abd.appendChild(ele_warm);

             return false;//阻止submit默认事件
         }
     }

</script>
</html>

View Code

(5)onmouseout和onmouseleave事件

那七个事件都是鼠标移开时触发的风云,区别的是:

  •   不论鼠标指针离开被选成分依然别的子成分,都会触发onmouseout事件
  •         唯有在鼠标指针离开准备成分时,才会触发onmouseleave事件

能够经过1个左手菜单的案例来搞精晓那七个的分别

ECMAScript 12ECMAScript 13

    <style>
        .container{
            width: 300px;
        }
        .title{
            background:green;
            line-height: 44px;
            text-align: center;

        }
        .list{
            display: none;
        }
        .list div{
            line-height: 40px;
        }
        .item1{
            background: purple;
        }
        .item2{
            background: orange;
        }
        .item3{
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">text</div>
        <div class="list">
            <div class="item1">111</div>
            <div class="item2">222</div>
            <div class="item3">333</div>
        </div>
    </div>

    <script>
        var ele=document.getElementsByClassName("title")[0];
        var ele_list=document.getElementsByClassName("list")[0];
        var ele_box=document.getElementsByClassName("container")[0];
        ele.onmouseover =function () {
            ele_list.style.display="block";
        };
//        ele.onmouseleave =function () {
//            ele_list.style.display="none";
//        }这样是有问题的,鼠标往下走也隐藏了,应该给盒子绑定
        ele_box.onmouseleave =function () {
            ele_list.style.display="none";
        };
</script>

View Code

 

8.轩然大波传播

父标签绑定事件a,子标签绑定事件b,那么触发事件b的时候,肯定事件a也会接触,这就叫事件绑定

小编们须求精通的是怎么化解事件绑定,方法是在子标签中添加e.stopPropagation

<script>
    ele_inner.onclick =function (e) {
        alert(123);
        e.stopPropagation()
    }
</script>

写3个跑马灯的例证,感觉还挺好玩的,下起了雨,降水天留客天留作者不留

ECMAScript 14ECMAScript 15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <h4>下雨天留客天留我不留</h4>

</body>

<script>
    function foo() {
        var ele=document.getElementsByTagName("h4")[0];
        var first_str= ele.innerText.charAt(0);
        var second_str=ele.innerText.slice(1,ele.innerText.length);
        var new_str=second_str + first_str;
        ele.innerText=new_str
    }
        setInterval(foo,500)

</script>
</html>

留是不留

9.标签与标签之间绑定

设想贰个必要:京东下边包车型大巴货品详情,评论,售后那么些内容,是通过点击“商品详情”,“评论”,“售后”这一个按钮,就足以来得相应的始末,那个相应关系是怎么落到实处的啊,那用到了自定义属性

<body>
<ul>
    <li gname="c1">商品详情</li>
</ul>
<div id="c1">商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍</div>
</body>

那样就能够完结多个标签的绑定

前方说了,取属性值一般都用点属性的方式,可是在那里取这些自定义属性,就只好用getAttribute方法了。