JavaScript高级

首先更正一个小问题,昨天的JavaScript入门一文中,末尾的“网页换肤”这个小案例的代码插入的有问题,插入的是名片案例的代码,排版不严谨向您致歉,现在补发更正。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="pifu2.css" id="link">
    <script>
        window.onload = function(){
            // 按钮单击,换外观 -- 单击:换css而已 -- 找到link标签,href取值做更改
            var oBtn1 = document.getElementById('btn1')
            var oBtn2 = document.getElementById('btn2')
            var oLink = document.getElementById('link')
            oBtn1.onclick = function(){
                // 更改link标签的href属性值
                oLink.href = 'pifu1.css'
            }
            oBtn2.onclick = function(){
                oLink.href = 'pifu2.css'
            }
        }
    </script>
</head>
<body>
    <h1>网页换肤</h1>
    <button id="btn1">皮肤一</button>
    <button id="btn2">皮肤二</button>
</body>
</html>

下面是所需的css文件:

pifu1.css

body{
    /* #cc cc cc  #ff cc 00  fc0 */
    background:#ccc;
}
button{
    width: 200px;
    height: 50px;
    /* height: 200px; */
    background: pink;
    border: none;
    color: black;
    font-size: 20px;
    border-radius: 25px;
    /* border-radius: 50%; */
    /* border-radius: 75%; */
}

pifu2.css

body{
    background: gold;
}
button{
    width: 200px;
    height: 50px;
    background: green;
    border: none;
    color: white;
    font-size: 20px;
}

JavaScript高级

1、循环

作用:遍历和重复执行命令

1.1while

初始值 var 变量

while(条件){命令 增量}

1.2 for

for(初始值;条件;增量){重复执行的命令}

i += 1可以写为i++

i -=1可以写为i--

只有1的时候可以用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 初始值
        // while(条件){命令 增量}
        // var i = 0;
        // while(i<3)
        // {
        //     alert('while')
        //     i += 1
        // }

        // for(初始值; 条件; 增量){命令}
        for(var i=0;i<3;i++)
        {
            alert('for')
        }
    </script>
</head>
<body>

</body>
</html>

2、数组

数组就相当于python中的列表

作用:储存多个数据

2.1 声明数组

var xx = 数值(如果是一个数据就是变量,如果是多个数据就是数组)

工作中不常用的:

var array(或者arr相关的名字)= new Array(数据,数据,.....)

new 后面跟一个单词,要注意大写

工作中常用的:

var arr = [数据,数据,......]

2.2数组常用操作方法

arr[下标值] arr是列表的名,支持下标索引

arr.length 列表长度,length是属性

push() -----数组结尾添加数据

arr.push('xxx')

pop() -----结尾删除数据

arr.pop()

splice(位置下标,删除的数据个数,添加的数据) -----任意位置添加删除数据

arr.splice(2,1,'xxx')

reverse() ----反转排序

arr.reverse()

join('符号') -----将数组转换位字符串用

arr.join('-') 将数组中的数组用-连接,如果不想有链接符号,直接''

indexOf(数据) ------返回某个数据在数组中第一次出现的位置的下标

indexOf做数组去重的时候用

在工作中,后端程序猿将数据处理好,然后拿到前端利用,做数据显示,不需要做大量的数据处理,所以学的操作比较少一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    // var xx = zhi
    // var arr1 = new Array(1, 2, 3, 'abc')
    var arr = [10, 20, 30, 'abc']
    // alert(arr)
    // alert(arr[0])
    // alert(arr.length)

    // 1、push() -- 数组结尾添加数据
    // arr.push('jqk')

    // 2、pop() -- 结尾删除数据
    // arr.pop()

    // 3、splice(位置下标, 删除的数据个数, 添加的数据) -- 任意位置添加删除数据
    // arr.splice(2, 1, 'daqiu')  // 10, 20 daqiu  abc

    // 4、reverse()
    // arr.reverse()

    // alert(arr)

    // 5、join('符号') -- 将数组转换成字符串用
    // alert(arr.join('-'))
    // alert(arr.join(''))
    // alert(arr)

    // 6、indexOf(数据) -- 返回某个数据在数组中第一次出现的位置的下标
    var arr2 = [10, 20, 10, 30, 40, 20]
    // alert(arr2.indexOf(10))
    alert(arr2.indexOf(arr2[2]))
    </script>
</head>
<body>

</body>
</html>

2.3 将数据写入页面

1.根据数组里面数据的个数一次生成li标签,生成好li标签之后 统一放到ul里面即可

2.设置ul的内容

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <script>
       window.onload = function(){
           var oContent = document.getElementById('content')
           var arr = ['海王','小时代','悲伤逆流成河','毒液','无名之辈','无敌破坏王2','神奇动物在哪里2','憨豆特工3','你好,之华','中国蓝盔','地球最后的夜晚']
           var str = ''
                     // 根据数组里面数据的个数依次生成li标签,生成好li标签之后 统一放到ul里面即可
           for(var i=0;i<arr.length;i++){
               str += '<li>'+arr[i]+'</li>'
           }

                     // 设置ul的内容是 str
           oContent.innerHTML = str
       }
   </script>
</head>
<body>
   <ul id="content">
       <li>111111</li>
   </ul>
</body>
</html>

2.4 数组去重

定义一个新数组存储将来去重之后的数据

如果是没有重复的数据,追加到新的数组的结尾----追加数据用push

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var arr = [10, 20, 10, 30, 40, 20]
        var newArr = [] // 存储将来去重之后的数据
        // 如果是没有重复的数据,追加到newArr结尾 -- newArr结尾添加数据push
        for(var i=0;i<arr.length;i++)
        {
        //     i   indexOf()
        // 10  0   0
        // 20  1   1
        // 10  2   0
            if(i == arr.indexOf( arr[i] ))
            {
                newArr.push( arr[i] )
            }
        }
        alert(newArr)
    </script>
</head>
<body>

</body>
</html>

3、字符串常用操作方法

将数据转换为number型

parseInt() 去掉小数转换数据类型为数值型,不会四舍五入,直接显示的是整数位

parseFloat() 保留小数部分,转换为数据类型number

substring(开始位置的下标,结尾位置的下标) ----------截取字符串 切片

注意此处不包含结束,左闭右开

split('符号') ------把字符串转换成数组

字符串反转:需要先转换成数组,然后reverse,反转数组之后再用join转换为字符串

indexOf和数组的操作一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var str1 = '1'
        var str2 = '1.1'
        var str3 = '1.9'
        var num = 1
        // alert(num + str1)
        // parseInt()
        // alert(typeof(parseInt(str1)))
        // alert(parseInt(str3))

        // parseFloat()
        // alert(typeof(parseFloat(str1)))
        // alert(parseFloat(str3))

        // subtring(开始下标, 结尾下标)  -- 截取字符串 -- 不包含结束
        var str4 = 'abcdefg'
        // alert(str4.substring(3, 5))  //de  

        // split('符号') -- 把字符串转换成数组
        alert(str4.split('').reverse().join(''))
    </script>
</head>
<body>

</body>
</html>

4、变量作用域

全局:

局部:作用于某个函数体内容

1.函数体内部修改全局变量直接修改,不需要global。

2.js声明变量可以和python一样不加var,只不过这样的变量就是全局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // var num = 1
        // alert(num)
        function fn(){
            var str = 'aa'
            // alert(str)
            // alert(num)
            num = 10
            // alert(num)
        }
        // alert(num)
        fn()
        alert(num)
        // alert(str)  // 证明str是局部变量,函数体外面无法访问
    </script>
</head>
<body>

</body>
</html>

5、定时器

作用:用时间控制命令是否重复执行

在哪里使用:淘宝首页图片每隔一段时间,重复执行更换图片

种类:

不重复执行命令的定时器-----单次定时器

setTimeout(命令,延迟时间)

重复执行命令的定时器 ----多次循环定时器

setInterval(命令,延迟时间)

命令:

参数一:1、匿名函数 2、函数指向 --函数名

参数二:延迟时间用毫秒为单位 1000毫秒=1秒

停止定时器:

clearTimeout停止单次定时器

clearInterval停止多次定时器

匿名函数没有名字,工作中,会先定义一个变量储存定时器,定时器是对象型,命名的时候和time相关。

工作中在清除后,一般会在清除后面加一行代码,就是将原先的变量重新定义为null

单次定时器也要停止,虽然视觉上它停止了,但是实际上还没停止,启动之后,还是要停止。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oBtn1 = document.getElementById('btn1')
            var oBtn2 = document.getElementById('btn2')
            var oBtn3 = document.getElementById('btn3')
            var oTimer = null  // 将来这个变量存储的是定时器,定时器是对象型
            // 单次 setTimeout()
            // 多次 setInterval()
            // 都有两个参数:参数1是命令  参数2是延迟时间:以毫秒为单位 1000毫秒=1秒
            // 命令:1、匿名函数  2、函数指向 -- 函数名
            oBtn1.onclick = function(){
                // 单次
                setTimeout(function(){
                    alert('单次定时器')
                }, 2000)
            }
            oBtn2.onclick = function(){
                // 多次
                oTimer = setInterval(fnAlert, 2000)
                function fnAlert(){
                    alert('多次定时器')
                }
            }

            oBtn3.onclick = function(){
                // clearInterval(定时器的名字)
                clearInterval(oTimer)
                oTimer = null
            }
        }
    </script>
</head>
<body>
    <button id="btn1">单次定时器</button>
    <button id="btn2">多次定时器</button>
    <button id="btn3">停止多次定时器</button>
</body>
</html>

5.1无缝滚动案例

1.所有的产品默认左侧移动

2.箭头单击,改变运动方向

3.鼠标滑过,停止播放,鼠标离开,继续播放

有多少产品,宽度就要写多大

一个区域打开的和关闭的是一个定时器

动画移动原理:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>

</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>
        var oBox = document.getElementById('box')
        var num = 0  // 代替left取值
        var speed = 5
        setInterval(fnMove, 50)
        function fnMove(){
            // 改变定位的left取值
            num += speed
            // 如果num值大于800,左走 -- left减小
            if(num>600)
            {
                // num -= 5
                // num -= 10
                // num += -5
                speed = -5
            }
            // 如果num值<0. 右侧 -- left增大
            if(num<0)
            {
                speed = 5
            }
            oBox.style.left = num+'px'
        }
    </script>

无缝滚动:(html文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body,ul{
            margin:0;
            padding:0;
        }

        .list_con{

            width:1000px;
            height:200px;
            border:1px solid #000;
            margin:10px auto 0;
            background-color:#f0f0f0;
            position:relative;
            overflow:hidden;
        }

        .list_con ul{
            list-style:none;
            width:2000px;
            height:200px;
            position:absolute;
            left:0;
            top:0;
        }


        .list_con li{
            width:180px;
            height:180px;
            float:left;
            margin:10px;
        }

        .btns_con{
            width:1000px;
            height:30px;
            margin:50px auto 0;
            position:relative;
        }

        .left,.right{
            width:30px;
            height:30px;
            background-color:gold;
            position:absolute;
            left:-40px;
            top:124px;
            font-size:30px;
            line-height:30px;
            color:#000;
            font-family: 'Arial';
            text-align:center;
            cursor:pointer;
            border-radius:15px;
            opacity:0.5;
        }
        .right{
            left:1010px;            
            top:124px;          
        }
    </style>
    <script src="js/move.js"></script>
</head>
<body>
    <div class="btns_con">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div class="list_con" id="slide">
        <ul id="list">
        <li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
        </ul>

    </div>
</body>
</html>

js文件:

window.onload = function(){
    // alert(1)
    console.log(100)
    document.title = 'daqiu'
    // 1、所有产品默认左侧移动 -- ul定位的left取值不断变大变小 -- 多次循环
    var oList = document.getElementById('list');
    var num = 0  // left取值
    var speed = 5
    var oTimer = null;
    oList.innerHTML += oList.innerHTML  // 保证一份产品移动,另外一份做显示区域的填充
    // oList.innerHTML = oList.innerHTML+oList.innerHTML
    oTimer = setInterval(fnMove, 50)
    function fnMove(){
        // oList 的left取值变化
        num -= speed

        // 如果num《-1000 ,回到0
        if(num<-1000)
        {
            num = 0
        }

        // 如果num>0 num = -1000
        if(num>0)
        {
            num = -1000
        }
        oList.style.left = num +'px'
    }

    // 2、箭头单击,改变运动方向
    var oBtn01 = document.getElementById('btn01')
    var oBtn02 = document.getElementById('btn02')
    oBtn02.onclick = function(){
        speed = -5
    }
    oBtn01.onclick = function(){
        speed = 5
    }

    // 3、鼠标滑过,停止播放--停止定时器,鼠标离开继续播放 -- 打开定时器 -- 选择显示区域
    var oSlide = document.getElementById('slide')
    oSlide.onmouseover = function(){
        clearInterval(oTimer)
        oTimer = null
    }
    oSlide.onmouseout = function(){
        // setInterval(fnMove, 50) -- 速度越来越快 -- 定时器累加现象:一个区域保证停止和打开的是同一个定时器
        oTimer = setInterval(fnMove, 50)
    }
}

6、调试程序的方法

alert弹窗后,如果不点确定,不会执行下面的代码,使浏览器冻结。

console 控制台

console.log(想输出的内容)

不会打打断程序,但是会需要多操作一步。

控制台也会报错。

element元素、标签

断点调试用source,谷歌浏览器外链式的才可以断点调试。嵌入式和行内式没办法

document.title = "xxx"可以改网页顶部的tile

7、封闭函数、封闭空间

作用:如果同事之间配合工作,如果定义函数的时候,名字冲突了的解决方案。

封闭函数有三种写法:

1.已经冲突了的解决方案:一个或任意多个封号然后写个小括号,将函数放在一个匿名函数里,然后将匿名函数放到小括号里。最外面再写一对小括号用来调用。

2.没有冲突之前:先写一个!,然后写一个匿名函数

3.和2一样,前面写~

但是所有的封闭函数有弊端,就是做不到哪里用哪里调用,只能是整体复制过去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function fn(){
            alert(1)
        }
        fn()

        // 已经冲突的情况
        ;;;;;(function(){
            function fn(){
                alert(2)
            }
            fn()
        })()

        !function(){
            alert(3)
        }()

        ~function(){
            alert(4)
        }()

    </script>
</head>
<body>

</body>
</html>

JQuery

jq就是js封装的函数库而已------学习jq就是学习对应的函数的用法 只要调用某个函数就能完成对应的功能,但是不需要自己封装函数。

学习jq就是学习函数的调用,如果记不住的就根据想要的功能区查手册,只记住一些关键的。

jq是美国人John Resig 2006年

jq 广告语 :write less do more

支持链式编程和链式调用

js ---- 原生 原生js

1.0 2.0 3.0 国内用的都是1.0 因为2和3不再兼容低版本的浏览器

1.jq的使用方法

先导入函数库,再写自己的。

jQuery的入口函数就是jq的事件语法

发生事件的目标.事件属性(function(){命令})

$(fuction(){})

jq可以有多个入口函数。

onclick 在jq里面是click

目标------$(选择器) -----jq的选择函数----查找标签的作用

jQuery中的选择器和css里面的选择器一样。但是jQuery中的选择 器有和css中重叠的部分,也有不重叠的部分。

入口函数的作用:保证标签先执行,再执行命令。

bug

$is not defined 如果显示$找不到,百分之百是导入的代码错了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jQuery/jquery-1.12.4.min.js"></script>
    <script>
        // jq入口函数就是jq的事件语法  onclick  -- click
        // 目标.事件属性(function(){命令})
        // 目标 --  $(选择器) -- jq的选择函数 -- 查找标签的作用
        // 当网页文档准备好之后执行大括号里面的命令
        $(document).ready(function(){
            alert(1)
        })

        // $(匿名函数)
        $(function(){
            alert(2)
        })
    </script>
</head>
<body>

</body>
</html>

原文发布于微信公众号 - 小闫笔记(Pythonnote)

原文发表时间:2018-12-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券