为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript进阶篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • stringObject.substr(startPos,length)

    注意:如果参数startPos是负数,从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。

    如果startPos为负数且绝对值大于字符串长度,startPos为0。


    查看全部
  •  var mydate=new Date();//定义日期对象
      var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];//定义数组对象,给每个数组项赋值
      var mynum=mydate.getDay();//返回值存储在变量mynum中  document.write(mydate.getDay());//输出getDay()获取值
      document.write("今天是:"+ weekday[mynum]);//输出星期几</script>


    查看全部
    0 采集 收起 来源:返回星期方法

    2019-10-29

  • 6-11代码

    <!DOCTYPE html>
    <html>
     <head>
      <title> 事件</title>  
      <script type="text/javascript">
       function count(){
           
        //获取第一个输入框的值
        var a=parseInt(document.getElementById('txt1').value);
        
        //获取第二个输入框的值
        var b=parseInt(document.getElementById('txt2').value);
        //获取选择框的值1
        var x=document.getElementById('select').value;
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        switch(x){
            case '+':
                var fruit=a+b;
                break;
            case "-":
                var fruit=a-b;
                break;
            case "*":
                var fruit=a*b;
                break;
            case "/":
                var fruit=a/b;
                break;
                default:
        }
        //设置结果输入框的值
         document.getElementById('fruit').value=fruit
       }
      </script>
     </head>
     <body>
       <input type='text' id='txt1' />
       <select id='select'>
            <option value='+'>+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
       </select>
       <input type='text' id='txt2' />
       <input type='button' value=' = ' onclick="count()" /> <!--通过 = 按钮来调用创建的函数,得到结果-->
       <input type='text' id='fruit' />   
     </body>
    </html>



    查看全部
    0 采集 收起 来源:编程练习

    2019-10-29

  • 注意:函数中参数和返回值不只是数字,还可以是字符串等其它类型。

    return x

    查看全部
    0 采集 收起 来源:返回值的函数

    2019-10-29

  • 主要事件表:

    53e198540001b66404860353.jpg

    查看全部
    0 采集 收起 来源:什么是事件

    2019-10-29

  • <!DOCTYPE html>

    <html>


    <head>

        <title> 事件</title>

        <script type="text/javascript">

            function count() {


                //获取第一个输入框的值

                var txt1 = +document.getElementById("txt1").value;

                //获取第二个输入框的值

                var txt2 = +document.getElementById("txt2").value;

                //获取选择框的值

                var select = document.getElementById("select").value;

                //获取通过下拉框来选择的值来改变加减乘除的运算法则

                var count;

                if (select == '+') {

                    count = txt1 + txt2;

                } else if (select == '-') {

                    count = txt1 - txt2;

                } else if (select == '*') {

                    count = txt1 * txt2;

                } else {

                    count = txt1 / txt2;

                }


                //设置结果输入框的值 

                document.getElementById("fruit").value = count;

            }

            //重置按钮

            function reset() {

                document.getElementById("txt1").value = '';

                document.getElementById("txt2").value = '';

                document.getElementById("fruit").value = '';

                document.getElementById("select").value = '+';


            }

        </script>

    </head>


    <body>

        计算器:<input type='text' id='txt1' />

        <select id='select'>

            <option value='+'>+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

        </select>

        <input type='text' id='txt2' />

        <input type='button' value=' = ' onclick="count()" />

        <!--通过 = 按钮来调用创建的函数,得到结果-->

        <input type='text' id='fruit' />

        <input type='button' value='重置' onclick="reset()" />

    </body>


    </html>


    查看全部
    1 采集 收起 来源:编程练习

    2019-10-29

  • 操作符之间的优先级(高到低):

    算术操作


    符 → 比较操作符 → 逻辑操作符 → "="赋值符号


    查看全部
  • scrollTop 滚动条滚动出去的top值

    scrollLeft 滚动条滚动出去的left值

    offsetTop 指指定对象相对于版面顶部或指定父坐标的距离(如这里是body)


    查看全部
  • 获取网页内容的宽高:offsetWidth/Height

    offsetHeight = clientHeight(浏览器高度) + 滚动条 + 边框 (会随着滚动条的改变而改变)


    查看全部
  • 获取网页窗口宽高:scrollWidth/Height 兼容写法同获取浏览器窗口一致

    查看全部
  • 多种浏览器都适用的获取浏览器窗口可视区域大小的写法:

    var w = document.documentElement.clientWidth || document.body.clientWidth;
        var h = document.documentElement.clientHeight || document.body.clientHeight;


    查看全部
  • 向元素节点里面添加文本节点需先创建一个文本节点,即createTextNode()

    查看全部
  • 遍历子节点,需先将空白文本节点排除,例如如下做法(直接跳过非元素节点):

    if(lis[i].nodeType!=1){
              continue;
          }


    查看全部
  • removeChild移除节点,虽然已经移除出DOM输,但仍存在在内存中,想彻底删除,可将其赋予一个不再该DOM 树的变量再将其赋null值即可

    查看全部
  • 获取上一个兄弟节点:previousSibling

    获取下一个兄弟节点:nextSibling

    两个属性获取的是节点,ie浏览器会忽略节点间生成的空白文本节点,而其他浏览器不会忽略。

    所以 我们需要判断nodeType是否为1,如果是1即元素节点,跳过。

    function get_nextSibling(n){
            var x=n.nextSibling;
            while (x && x.nodeType!=1){
                x=x.nextSibling;
            }
            return x;
        }

    查看全部
    0 采集 收起 来源:访问兄弟节点

    2019-10-28

举报

0/150
提交
取消
课程须知
你需要具备HTML、css基础知识,建议同学们也可以想学习下js入门篇,快速认识js,熟悉js基本语法,更加快速入手进阶篇!
老师告诉你能学到什么?
通过JavaScript学习,掌握基本语法,制作简单交互式页面
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!