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

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>节点属性</title>

    </head>

    <body>

      <ul>

         <li>javascript</li>

         <li>HTML/CSS</li>

         <li>jQuery</li>     

      </ul>

      <script type="text/javascript">

       var Lists=document.getElementsByTagName("li");

       for(i=0;i<Lists.length;i++) {

        var a1=Lists[i].childNodes[0].nodeName;

        var b1=Lists[i].childNodes[0].nodeValue;

        var c1=Lists[i].childNodes[0].nodeType;

        document.write("nodeName:"+a1+";"+"nodeValue:"+b1+";"+"nodeType:"+c1+";"+"<br/>");

       }

      </script>

    </body>

    </html>

    输出li标签内文本的节点名称,节点值以及节点类型。

    查看全部
    0 采集 收起 来源:节点属性

    2019-03-22

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>style样式</title>

    </head>

    <body>

      <h2 id="con">I love JavaScript</H2>

      <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>

      <input type = "button" id="cha" value="hide" onclick = "change()">

      <script type="text/javascript">

       var cl =document.getElementById('con');

       var status = 0;

        cl.style.color = "#f00";

        cl.style.backgroundColor = "#CCC";

        function change()

        {

        if (status == 0) {

        cl.style.display = "none";

        document.getElementById('cha').value = "show";

        status = 1;

            }else if (status == 1){

                cl.style.display = "block";

                document.getElementById('cha').value = "hide";

                 status = 0;

            }

        }

      </script>

    </body>

    </html>


    查看全部
    1 采集 收起 来源:认识DOM

    2019-03-22

  • <!DOCTYPE html>

    <html>

     <head>

      <title>浏览器对象</title>  

      <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   

     </head>

     <body>

      <!--先编写好网页布局-->

     <h3>操作成功</h3>

     <p><span id="span">5</span>秒后回到主页<a href="javascript:Back();">返回</a></p>


      <script type="text/javascript">  

       //获取显示秒数的元素,通过定时器来更改秒数。


       //通过window的location和history对象来控制网页的跳转。

       

      var num=5

      function count1(){

          num=num-1;

          document.getElementById("span").innerHTML=num;

          if(num==0) {

              window.location.href="https://www.imooc.com/";

              clearInterval(a1);

          }

        }

      var a1=setInterval(count1,1000);

      function Back() {

          window.history.back();

      }

        

     </script> 

    </body>

    </html>


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

    2019-03-22

  • if(u_agent.indexOf("Firefox")>-1){ 

            B_name="Firefox"; 


    查看全部
    0 采集 收起 来源:userAgent

    2019-03-22

  • document.write(navigator.appVersion);

    查看全部
    0 采集 收起 来源:Navigator对象

    2019-03-22

  • document.write(location.href);   

    查看全部
    0 采集 收起 来源:Location对象

    2019-03-22

  • <!DOCTYPE  HTML>

    <html >

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>系好安全带,准备启航</title>


    <script type="text/javascript">


      //通过javascript的日期对象来得到当前的日期,并输出。

      var mydate=new Date();

      var weekday=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"];

      document.write(mydate+"&nbsp"+weekday[mydate.getDay()]+"<br/>");

      

      //成绩是一长窜的字符串不好处理,找规律后分割放到数组里更好操作哦

      //从数组中将成绩撮出来,然后求和取整,并输出。

      var scoreStr = "小明:87;小花:81;小红:97;小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";

      var a1=scoreStr.split(/;|:/);

      var sum=0;

      for(i=0;i<a1.length/2;i++){

          j=i*2+1;

          sum=sum+parseInt(a1[j]);

      }

      b1=sum/(a1.length/2);

      document.write("班级平均分为:"+b1);

    </script>

    </head>

    <body>

    </body>


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

    2019-03-22

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>

    <script type="text/javascript">

       function clock(){

          var time=new Date();                  

          document.getElementById("clock").value = time;

       }

         // var i = setInterval("clock()", 1000); 

         var i;

        function stopclo()

        {

        i = setInterval("clock()", 1000);

        }

    </script>

    </head>

    <body>

      <form>

        <input type="text" id="clock" size="50"  />

        <input type="button" value="Stop" onclick="clearInterval(i)" />

        <input type="button" value="Start" onclick="stopclo()" />

      </form>

    </body>

    </html>


    查看全部
  • <!DOCTYPE html>

    <html>

     <head>

      <title> 事件</title>  

      <script type="text/javascript">

       function count(){

           

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

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

    //获取选择框的值

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

        //设置结果输入框的值 

        var num1=parseFloat(document.getElementById("txt1").value);

        var num2=parseFloat(document.getElementById("txt2").value);

        var res;

        switch(document.getElementById("select").value){

            case "+":

                res=parseFloat(num1)+parseFloat(num2);

                break;

            case "-":

                res=num1-num2;

                break;

            case "*":

                res=num1*num2;

                break;

            case "/":

                res=num1/num2;

                break;

        }

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

        

       }

      </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' onclick="count()" value=' = ' /> <!--通过 = 按钮来调用创建的函数,得到结果--> 

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

     </body>

    </html>


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

    2019-03-21

  • <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>string对象 </title>

    <script type="text/javascript">

      var mystr="Hello World!"

      document.write(mystr.indexOf("o",mystr.indexOf("o")+1));

    </script>

    </head>

    <body>

    </body>

    </html>


    查看全部
  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>返回值函数</title>

    <script type="text/javascript">

      function app2(x,y)

      { var sum,x,y;

        sum = x * y;

        return sum;

      }

    var req1,req2,sumq;

    req1 = app2(5,6);

    req2 = app2(2,3);

    sumq = app2(req1,req2);

    document.write("req1的值:"+req1+"<br/>");

    document.write("req2的值:"+req2+"<br/>");

    document.write(req1+"与"+req2+"积:"+sumq);

    </script>

    </head>

    <body>

    </body>

    </html>


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

    2019-03-21

  • <!DOCTYPE  HTML>

    <html >

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>流程控制语句</title>

    <script type="text/javascript">


     //第一步把之前的数据写成一个数组的形式,定义变量为 infos

     var myarr=[['小A','女',21,'大一'],

                ['小B','男',23,'大三'],

                ['小C','男',24,'大四'],

                ['小D','女',21,'大一'],

                ['小E','女',22,'大四'],

                ['小F','男',21,'大一'],

                ['小G','女',22,'大二'],

                ['小H','女',20,'大三'],

                ['小I','女',20,'大一'],

                ['小J','男',20,'大三']];

     var j=0;

     var b1=new Array();

     for(i=0;i<myarr.length;i++){

        switch(myarr[i][3])

        {

            case "大一":

            document.write("大一学生的信息:"+myarr[i]+"<br/>");

            b1[j]=myarr[i];

            j++;

        }

     }

     //第一次筛选,找出都是大一的信息

     for(i=0;i<b1.length;i++){

        if(b1[i][1]=="女")

        {

            document.write("大一女生名字:"+b1[i][0]+"<br/>");

        }

     }

      

     //第二次筛选,找出都是女生的信息

     

     

      

    </script>

    </head>

    <body>

    </body>

    </html>


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

    2019-03-21

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>二维数组</title>

    <script type="text/javascript">

    var myarr= new Array();

    for(var i=0;i<3;i++){

        myarr[i]=new Array();

        for(var j=0;j<6;j++){

        myarr[i][j]=i*j;

        document.write(myarr[i][j]+"<br/>");

        }

    }

    </script>

    </head>


    <body>

    </body>

    </html>


    查看全部
    0 采集 收起 来源:二维数组

    2019-03-21

  • 9-3讲了如何用指定标签名来返回节点对象,以及表格的建立代码

    查看全部
  • 鼠标移开事件(onmouseout)

    该函数不局限于使用在bottom中,也可以直接用在别的标签里,比如<a>

    查看全部

举报

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

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