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

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • window.history.back()返回前一个浏览的页面。

    相当于window.history.go(-1)

    查看全部
  • 主要事件表:53e198540001b66404860353.jpg

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

    2019-03-26

  • 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById(“id”).value = 1; 取值:var = document.getElementById(“id”).value;

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

    2019-03-25

  • 详细介绍:

    http://www.cnblogs.com/liuqiyun/p/6742344.html

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

    2019-03-25

  • window.open("index.aspx",'top'); 只是表示打开这个页面,并不是打开并刷新index.aspx

    window.location.href="index.aspx"; 表示重新定向到新页面,同时刷新打开的这个页面


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

    2019-03-25

  • 无穷循环?有点慌

    间歇调用,不就是无穷无尽的调用?

    要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数

    查看全部
  • <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>实践题 - 选项卡</title>

        <style type="text/css">

         /* CSS样式制作 */  

        *{padding: 0px; margin: 0px; font: 12px; normal "microsoft yahei"}

        #tabs {width: 300px; padding: 5px; height: 150px; margin: 20px;}

        #tabs ul{list-style: none; display: block; height: 30px; line-height: 30px; border-bottom: 2px saddlebrown solid;}

        #tabs ul li{background: #fff; cursor: pointer; float: left; list-style: none; height: 28px; line-height: 28px; margin: 0px 3px; border: 1px solid #aaa; border-bottom: none; display: inline; width: 60px; text-align: center;}

        #tabs ul li.on{border-top: 2px solid saddlebrown; border-bottom: 2px solid #fff;}

        #tabs div{height: 120px; line-height: 25px; border: 1px solid #336699; border-top: none; padding: 5px;}

        .hide{display: none;}

        </style>

        <script type="text/javascript">

             

        // JS实现选项卡切换

        window.onload=function() {

            var mytab=document.getElementById("tabs");

            var UL=mytab.getElementsByTagName("ul")[0];

            var LIs=UL.getElementsByTagName("li");

            var DIVs=mytab.getElementsByTagName("div");

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

                LIs[i].index=i;

                var li1=LIs[i];

                li1.onclick = function() {

                    for(var n=0;n<LIs.length;n++) {

                        LIs[n].className="";

                        DIVs[n].className="hide";

                    }

                this.className="on";

                DIVs[this.index].className="";

                document.write(this.index);

                }

            };

        }

        

        </script>

     

    </head>

    <body>

    <!-- HTML页面布局 -->

    <div id="tabs">

      <ul>

          <li class="on">房产</li>

          <li>家居</li>

          <li>二手房</li>

      </ul>

      <div>    

        275万购昌平邻铁三居 总价20万买一居<br>

        200万内购五环三居 140万安家东三环<br>

        北京首现零首付楼盘 53万购东5环50平<br>

        京楼盘直降5000 中信府 公园楼王现房<br>

      </div>

      <div class="hide">    

        40平出租屋大改造 美少女的混搭小窝<br>

        经典清新简欧爱家 90平老房焕发新生<br>

        新中式的酷色温情 66平撞色活泼家居<br>

        瓷砖就像选好老婆 卫生间烟道的设计<br>

      </div>

      <div class="hide">    

        通州豪华3居260万 二环稀缺2居250w甩<br>

        西3环通透2居290万 130万2居限量抢购<br>

        黄城根小学学区仅260万 121平70万抛!<br>

        独家别墅280万 苏州桥2居优惠价248万<br>

      </div>


    </div>

     

    </body>

    </html>


    查看全部
    1 采集 收起 来源:编程挑战

    2019-03-25

  • 循环二维数组不会。

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

    2019-03-25

  • 语法说明:

    Switch必须赋初始值,值与每个case值匹配。满足执行该 case 后的所有语句,并用break语句来阻止运行下一个case。如所有case值都不匹配,执行default后的语句。

    假设评价学生的考试成绩,10分满分制,我们按照每一分一个等级将成绩分等,并根据成绩的等级做出不同的评价。


    查看全部
  • 除了IE浏览器,其他主流浏览器中,nodeChild返回的不止是元素节点,还有文本节点、注释节点,所以该例子中第一个子元素与最后一个子元素都是空白节点。要想只返回元素节点,可以使用children替换nodeChild

    查看全部
  • <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>实践题 - 选项卡</title>

        <style type="text/css">

         /* CSS样式制作 */  

        *{padding: 0px; margin: 0px; font: 12px; normal "microsoft yahei"}

        #tabs {width: 300px; padding: 5px; height: 150px; margin: 20px;}

        #tabs ul{list-style: none; display: block; height: 30px; line-height: 30px; border-bottom: 2px saddlebrown solid;}

        #tabs ul li{background: #fff; cursor: pointer; float: left; list-style: none; height: 28px; line-height: 28px; margin: 0px 3px; border: 1px solid #aaa; border bottom: none; display: inline; width: 60px; text-align: center;}

        #tabs ul li.on{border-top: 2px solid saddlebrown; boder-buttom: 2px solid #fff;}

        #tabs div{height: 120px; line-height: 25px; border: 1px solid #336699; border-top: none; padding: 5px;}

        .hide{display: none;}

        </style>

        <script type="text/javascript">

             

        // JS实现选项卡切换

        window.onload=function() {

            var mytab=document.getElementById("tabs");

            var UL=mytab.getElementsByTagName("ul")[0];

            var LIs=UL.getElementsByTagName("li");

            var DIVs=mytab.getElementsByTagName("div");

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

                LIs[i].index=i;

                LIs[i].onclick = function() {

                    for(var n=0;n<Lis.length;n++) {

                        LIs[n].className="";

                        DIVs[n].className="hide";

                    }

                this.className="on";

                DIVs[this.index].className="";

                }

            };

        }

        

        </script>

     

    </head>

    <body>

    <!-- HTML页面布局 -->

    <div id="tabs">

      <ul>

          <li class="hide">房产</li>

          <li>家居</li>

          <li>二手房</li>

      </ul>

      <div>    

        275万购昌平邻铁三居 总价20万买一居<br>

        200万内购五环三居 140万安家东三环<br>

        北京首现零首付楼盘 53万购东5环50平<br>

        京楼盘直降5000 中信府 公园楼王现房<br>

      </div>

      <div class="hide">    

        40平出租屋大改造 美少女的混搭小窝<br>

        经典清新简欧爱家 90平老房焕发新生<br>

        新中式的酷色温情 66平撞色活泼家居<br>

        瓷砖就像选好老婆 卫生间烟道的设计<br>

      </div>

      <div class="hide">    

        通州豪华3居260万 二环稀缺2居250w甩<br>

        西3环通透2居290万 130万2居限量抢购<br>

        黄城根小学学区仅260万 121平70万抛!<br>

        独家别墅280万 苏州桥2居优惠价248万<br>

      </div>


    </div>

     

    </body>

    </html>


    查看全部
    0 采集 收起 来源:编程挑战

    2019-03-25

  • 语法:

    myarray.length; //获得数组myarray的长度


    查看全部
  • <!DOCTYPE html>

    <html>

     <head>

      <title> new document </title>  

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

      <script type="text/javascript"> 

      

          window.onload = function(){

                      

         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。


        var a1s=document.getElementsByTagName("tr");

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

         bgcolor(a1s[i]);

        }

          }

      function bgcolor(a) {

          a.onmouseover= function(){

                this.style.backgroundColor="#c2c2c2";

         }

         a.onmouseout= function(){

                this.style.backgroundColor="#fff";

         }  

          }

          // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;

         function addrow() {

             var tr1=document.createElement("tr");

             var td1=document.createElement("td");

             var num=document.getElementsByTagName("tr").length;

             td1.innerHTML="xh00"+num;

             var td2=document.createElement("td");

             td2.value="";

             var td3=document.createElement("td");

             td3.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";

             /*var a1=document.createElement("a");

             a1.href="'javascript:;' onclick='del(this)'";

             a1.innerHTML="删除";

             td3.appendChild(a1);

             用这个方法,添加行后,点击删除会把整个表格删除了,为什么?

             */

             tr1.appendChild(td1);

             tr1.appendChild(td2);

             tr1.appendChild(td3);

             var table1=document.getElementById("table");

             table1.appendChild(tr1);

             var trs=document.getElementsByTagName("tr");

             for(var j=0;j<trs.length;j++) {

                 bgcolor(trs[j]);

             }

         }

       

         

         // 创建删除函数

         function del(r) {

            var tr=r.parentNode.parentNode;

            tr.parentNode.removeChild(tr);

         }



      </script> 

     </head> 

     <body> 

       <table border="1" width="50%" id="table">

       <tr>

    <th>学号</th>

    <th>姓名</th>

    <th>操作</th>

       </tr>  


       <tr>

    <td>xh001</td>

    <td>王小明</td>

    <td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

       </tr>


       <tr>

    <td>xh002</td>

    <td>刘小芳</td>

    <td><a href="javascript:;" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

       </tr>  


       </table>

       <input type="button" value="添加一行" onclick="addrow()" />   <!--在添加按钮上添加点击事件  -->

     </body>

    </html>


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

    2019-03-25

  • 创建数组语法:

    var myarray=new Array();


    查看全部
  • 有点迷糊

    b-a >0 交换,之后小得在前

    查看全部
    0 采集 收起 来源: 数组排序sort()

    2019-03-25

举报

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

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