zoukankan      html  css  js  c++  java
  • 前端三剑客之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"));        //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

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

  • 相关阅读:
    pipelinewise 学习二 创建一个简单的pipeline
    pipelinewise 学习一 docker方式安装
    Supercharging your ETL with Airflow and Singer
    ubuntu中使用 alien安装rpm包
    PipelineWise illustrates the power of Singer
    pipelinewise 基于singer 指南的的数据pipeline 工具
    关于singer elt 的几篇很不错的文章
    npkill 一个方便的npm 包清理工具
    kuma docker-compose 环境试用
    kuma 学习四 策略
  • 原文地址:https://www.cnblogs.com/hewasdrunk/p/7361451.html
Copyright © 2011-2022 走看看