前端三剑客之javascript

前端三剑客之javascript

给个小目录

 一、JavaScript介绍 

二、ECMAScript（核心）

三、BOM对象（浏览器对象）

四、DOM对象（文档对象模型）

总结：

JS的组成：

a)   ECMAScript 是什么：担当的是一个翻译的角色；是一个解释器；帮助计算机来读懂我们写的程序；实现+-*/, 定义变量；几乎没有兼容性问题；

b)   DOM： 文档对象模型；文档指的就是网页；把网页变成一个JS可以操作的对象；给了JS可以操作页面元素的能力；document;有一些兼容性问题；

c)   BOM：浏览器对象模型；给了JS操作浏览器的能力；window;几乎不兼容；

一、JavaScript介绍 

前端三剑客之javascript，简称js，

完整的JavaScript是由以下三个部分组成的：

　　核心（ECMAScript）这个是ECMA（欧洲计算机制造协会）规范的版本

　　文档对象模型（DOM）Document object model

　　浏览器对象模型（BOM）Broswer object model

既然是一门编程语言，就会含有（

变量

数据类型

运算符

流程控制语句

函数（并不是所有的语言都有函数的概念）

类和对象（js没有“类”）

）

二、ECMAScript（核心）

首先，js的注释和Java一样

　　//单行注释

　　/*多行注释*/　　记忆关键字：冒星*

1.变量（变量是一个杯子，它的类型是由它里面存放的东西决定的）

（1）声明变量时有var关键字，不用var关键字的话是全局变量，除非有需要，否则不建议用全局变量，会拖慢效率；

（2）变量要先声明，再定义，

　　var i;

　　i=10;

　　或者简写成var i=10;（一般都这样处理）

（3）js还支持一行声明多个变量，并且可以是不同类型

　　var i=10,j="zhang";

（4）如果声明一个变量x,却不给他赋值，打印的时候竟然也不报错，而是打印undefined

2.数据类型

js中没有print，我们可以用alert（弹窗）或者console.log()（在浏览器的控制台打印）打印我们想要的结果

查看数据类型用typeof命令

var x=10;

console.log(typeof(x));

（1）js中有的数据类型有：

　　　　基本数据类型：Number（数值），String（字符串），Boolean（布尔值），Null，Undefined（声明了但未赋值）

　　　　引用数据类型：object

　　　　动态类型：var

　　　　js中并没有列表，元组，字典这种数据类型，列表和元组是以数组对象实现的

（2）Number（数字类型）

（3）null和undefined类型

undefined类型只有一个值，就是undefined，当函数没有明确返回值，或者声明的变量没有初识化的时候，就会产生这个值。

而null常出现在找不到对象的时候。

3.运算符

js中的运算符特殊的几个：

（1）i++和++i

这个学过c++的一定知道，没什么可说的，应该是为了考试才出的这种东西吧

　　i++是先赋值再计算

　　++i是先计算再赋值

（2）=，+=，-=，*=，/=，%=

=，+=，-=，*=，/=，%= 
x=5 是 最基本的赋值运算符，即把右边的值，赋给左边的变量x。 
x+=y, 表示 x=x+y。 
其他都是一个道理。

（3）+

+ 具备多态特征 
当两边都是数字的时候 ，表现为算数运算符 
当任意一边是字符串的时候，表现为字符串连接符

4.流程控制

（1）if条件语句

与excel里的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循环

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)
}

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="hello";
    console.log(s.toLowerCase());       //hello
    console.log(s.toUpperCase());       //HELLO
    console.log(s.charAt(2));           //l
    console.log(s.indexOf("o"));        //
    console.log(s.lastIndexOf("o"));    //
    console.log(s.match("lo"));         //[object Array]["lo"]
    console.log(s.match("lol"));        //null
    console.log(s.search("lo"));        //
    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

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)　　　　　　-----拼接字符串，括号里为要拼接的字符串

（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[ ] [ ]，第一个索引为行，第二个索引为列

join方法：

在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()

获取日期和时间
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中函数的调用可以在定义之前，因为js是先编译一遍，再去执行

三、BOM对象（浏览器对象）

BOM即 浏览器对象模型(Brower Object Model)

1.windows对象

在浏览器中，每个打开的网页是一个窗口，有三种方法实现弹出框：

浏览器上常见的弹出框有 
警告框alert

确认框confirm

提示框prompt

　　（1）alert(123)   　　　　在窗口中弹出“123”，点击确定消失

　　（2）var  ret=confirm('zhang');

　　　　　　console.log(ret);　　　　在窗口中弹出“zhang“，有确定和取消两个按钮，点击确定，会在后台返回一个true，点击取消，会返回一个false

　　（3）var ret=prompt("input a number")　　在窗口弹出一个输入框，同样可以通过一个变量来接收用户输入的内容

2.setInterval() 和 clearInterval()

setInterval()是按照指定的时间周期（毫秒为单位）来连续调用函数或者计算表达式，第一个参数为函数，第二个参数为时间间隔

clearInterval()是取消由setInterval()设置的操作，这个的参数为setInterval()的返回值

示例：在一个input框右面有两个按钮，点击开始就在框中每隔1秒中打印一次当前时间，点击停止就停止刷新

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

演示

四、DOM对象（文档对象模型）

DOM 是Document Object Model( 文档对象模型 )的缩写。

DOM是把html里面的各种数据当作对象进行操作的一种思路。

在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代码已经加载过一遍，有几个绑定事件的标签就已经确定了，这个问题在jQuery中可以很方便解决，在DOM对象中，有两种解决办法可供参考：

　1.把标签绑定的事件写到函数中，即第一种绑定事件的方式

　　　　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

练习：左侧菜单

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

演示

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 会把拿到的元素当时一个标签（如果这个元素是一个标签）

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事件

通常用于表单标签，一个表格里的内容被改变时（我们选择一个选项时），触发事件

练习：省市二级联动

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

演示

（2）onkeydown事件，用于input输入框

这个事件是按键盘上任意按键都会触发，这其实意义不大。如果想要指定按键，该怎么做？

这里用到一个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()

练习：用户登录验证

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

演示

（5）onmouseout和onmouseleave事件

这两个事件都是鼠标移开时触发的事件，不同的是：

• 　　不论鼠标指针离开被选元素还是任何子元素，都会触发onmouseout事件
• 只有在鼠标指针离开备选元素时，才会触发onmouseleave事件

可以通过一个左侧菜单的案例来搞清楚这两个的区别

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

演示

8.事件传播

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

我们需要知道的是怎么解除事件绑定，方法是在子标签中添加e.stopPropagation

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

写一个跑马灯的例子，感觉还挺好玩的，下起了雨，下雨天留客天留我不留

<!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方法了。