• 回顾


    前端部分(JavaScript)

    一、123 + ”789” 的值是______?解释为什么? 
    值为”123789+可代数字运算符,可代表字符串连接符。
    此时的+两侧一个是数字,一个是字符串,+就是字符串连接符,进行拼接。 
    二、给定一个字符串例如:”abaasdffggghhjjkkgfddsssss3444343” ;问题如下: 
    1、    字符串的字节长度  
    var s = “abaasdffggghhjjkkgfddsssss3444343”
    s.length
    s["length"]
    2、    取出指定位置的字符,如:0,3,5,9等
    s[0] s[3] s[5] s[9]
    s.charAt(0)    s.charAt(3)    s.charAt(5)    s.charAt(9)
    3、    查找指定字符是否在以上字符串中存在,如:i,c ,b等 
    s.indexOf('i')         s.indexOf('c')         s.indexOf('b')
    a.includes("i")        a.includes("c")        a.includes("b")
    s.search(“i”)
    s.match(‘i’)
    var r1=/[i]/g;        console.log(r1.test(s1))
    4、    替换指定的字符,如:g替换为22,ss替换为b等操作方法
    s.replace('g','22')        s.replace('ss','b')
    s.replace(/g/g,"22")    s.replace(/ss/g,"b")
    5、    截取指定开始位置到结束位置的字符串,如:取得1-5的字符串 
    s.substring(1,5)
    s.slice(1,5)

    实现一个进度条(计时器)

    <!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>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    
    </head>
    <body>
    <div class="container">
        <div class="progress">
            <div id="i1" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1%" aria-valuemin="0"
                 aria-valuemax="100" style=" 0%;">
                <span class="sr-only">60% Complete</span>
                0%
            </div>
    
        </div>
    </div>
    
    <script src="jquery-3.2.1.min.js"></script>
    <script>
    
        var $d1Ele = $("#i1");
        var width = 0;
        var id = setInterval(setValue, 200);
    
        function setValue() {
            width++;
            if (width > 100) {
                clearInterval(id);
            } else {
                $d1Ele.css("width", width + "%");
                $d1Ele.text(width + "%");
            }
        }
    </script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    
    </body>
    </html>
    请写出以下代码的执行结果,并解释原因。
    <script>
        var age;
    
        function bar(age) {
    
            console.log(age);            # 1
            var age = 99;
            var sex = "male";
            console.log(age);            # 2
    
            function age() {
                alert(123);
            }
            console.log(age);            # 3
            return 100;
        }
    
        result = bar(5);
        console.log(result)                # 4
    
        function func() {
            console.log(age)            # 5
        }
    
        func()
    </script> 
    
    答案:
    # 1 ƒ age() {
                alert(123);
            }
    # 2 99
    # 3 99
    # 4 100
    # 5 undefined
    
    Js代码分为两个阶段:词法分析阶段和执行阶段;
    Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容;
    包括变量声明(var a)和函数声明(function a(){})在内的所有声明都会在代码被执行前的编译阶段首先被处理,
    过程就好像变量声明和函数声明从他们代码中出现的位置被移动到执行环境的顶部,这个过程就叫做提升
    
    只有声明操作会被提升,赋值和逻辑操作会被留在原地等待执行
    
    函数优先
    提升操作会优先进行函数的声明
    函数会首先被提升然后才是变量,重复的变量声明会被忽略,只剩下赋值操作,多个函数声明可以进行覆盖
    声明的顺序是这样的:
    1. 找到所有的函数声明,初始化函数体,如有同名的函数则会进行覆盖
    2. 查找变量声明,初始化为undefined,如果已经存在同名的变量,就什么也不做直接略过
    指出下面thist指代的是什么?并解释一下this和$ ( this )的区别。
    <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button id="btn">click</button>
    
    <script>
        $('#btn').on('click',function () {
            console.log(this);                # 1
            $('li').each(function () {
                console.log(this);            # 2
            })
        })
    </script>
    $表示一个jquery对象,这个$(this)是在on方法里面的,克隆属性只能是父类

    读书的人,要甘于寂寞。寂寞能安定,定则心静,静则心清,清则心明,明则明白一切事理。

  • 相关阅读:
    记录一些博客很不错的~
    Linux软件安装,RPM与YUM
    左递归左递归消除
    LC振荡电路L和C 参数越小 频率越高
    oracle 好书( 09 对象管理 )
    head设计模式 01
    Java中注解(非注释^_^) 转载
    面向接口设计和编程——(面向对象、面向接口、面向过程、面向实现) 转载
    uml 关系(转载 )
    head first 设计模式 02 观察者模式
  • 原文地址:https://www.cnblogs.com/jassin-du/p/8322456.html
Copyright © 2020-2023  润新知