为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 JavaScript进阶篇 笔记

JavaScript进阶篇

慕课官方号 页面重构设计
查看讲师更多课程 慕课官方号讲师的其他课程
难度入门
时长 8小时55分
学习人数
综合评分9.47
2557人评价 查看评价
9.7 内容实用
9.4 简洁易懂
9.3 逻辑清晰
最热 最新
  • qq_爱偷猫的鱼_0

    var w=document.documentElement.scrollWidth
      || document.body.scrollWidth;
    var h=document.documentElement.scrollHeight
      || document.body.scrollHeight;

    查看全部
    0 采集 收起 来源：网页尺寸scrollHeight

    2022-09-29

  • qq_爱偷猫的鱼_0

    var w= document.documentElement.clientWidth

          || document.body.clientWidth;

    var h= document.documentElement.clientHeight

          || document.body.clientHeight;

    查看全部
    0 采集 收起 来源：浏览器窗口可视区域大小

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
 var a = document.createElement("a");
 a.setAttribute("href",url);
 a.innerHTML = text;
 a.setAttribute("style","color:red;");
    return a;
}
// 调用函数创建链接
var aitem = createa("http://www.imooc.com","慕课网");
main.appendChild(aitem);

</script>
    查看全部
    0 采集 收起 来源：创建元素节点createElement

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <script type="text/javascript">
      function replaceMessage(){
          
		   var oldnode = document.getElementById("oldnode");
		   var text = oldnode.innerText;
		   var newnode = document.createElement("i");
		   newnode.innerText = text;
		   oldnode.parentNode.replaceChild(newnode,oldnode);
       }    
       
       replaceMessage();
  </script>
    查看全部
    0 采集 收起 来源：替换元素节点replaceChild()

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nextSibling</title>
</head>
<body>
<ul id="u1">   
            <li id="a">javascript</li>   
            <li id="b">jquery</li>   
            <li id="c">html</li>   
        </ul>   
        <ul id="u2">   
            <li id="d">css3</li>   
            <li id="e">php</li>   
            <li id="f">java</li>   
        </ul>   
<script type="text/javascript">
    function get_nextSibling(n){
        var x=n.nextSibling;
        while (x && x.nodeType!=1){
            x=x.nextSibling;
        }
        return x;
    }
function get_previousSibling (n){
        var p=n.previousSibling;
        while (p && p.nodeType!=1){
            p=p.previousSibling;
        }
        return p;
    }
    var x=document.getElementsByTagName("li")[1];
    document.write(x.nodeName);
    document.write(" = ");
    document.write(x.innerHTML);
    
    var y=get_nextSibling(x);
    
    if(y!=null){
        document.write("<br />nextsibling: ");
        document.write(y.nodeName);
        document.write(" = ");
        document.write(y.innerHTML);
    }else{
      document.write("<br>已经是最后一个节点");      
    }
    
    var z=get_previousSibling(x);
    
    if(z!=null){
        document.write("<br />previousSibling: ");
        document.write(z.nodeName);
        document.write(" = ");
        document.write(z.innerHTML);
    }else{
      document.write("<br>已经是第一个节点");      
    }

</script>
</body>
</html>
    查看全部
    0 采集 收起 来源：访问兄弟节点

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <script  type="text/javascript">    
   var mylist = document.getElementById("tcon"); 
   var item = mylist.parentNode.parentNode.parentNode.lastChild;
   document.write(item.firstChild.nodeValue);
</script>
    查看全部
    0 采集 收起 来源：访问父节点parentNode

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <script type="text/javascript">
  var Lists=document.getElementsByTagName("li");
  for (var i=0; i<Lists.length;i++)
  {
    var text = Lists[i].getAttribute("title");
    document.write(text +"<br>");
    if(text=="")
    {
        var shortText =Lists[i].innerHTML.replace(/[a-z]/g,'');
        console.log(shortText);
    Lists[i].setAttribute("title",shortText);
    document.write(Lists[i].getAttribute("title")+"<br>");
    }
  }
</script>
    查看全部
    0 采集 收起 来源：setAttribute()方法

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE HTML>
<html>
  <meta charset="utf-8"/>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>无标题文档</title>
    </head>
   
    <body>
        <form>
          请选择你爱好:<br>
          <input type="checkbox" name="hobby" id="hobby1">  音乐
          <input type="checkbox" name="hobby" id="hobby2">  登山
          <input type="checkbox" name="hobby" id="hobby3">  游泳
          <input type="checkbox" name="hobby" id="hobby4">  阅读
          <input type="checkbox" name="hobby" id="hobby5">  打球
          <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
          <input type="button" value = "全选" onclick = "checkall();">
          <input type="button" value = "全不选" onclick = "clearall();">
          <p>请输入您要选择爱好的序号，序号为1-6:</p>
          <input id="wb" name="wb" type="text" >
          <input name="ok" type="button" value="确定" onclick = "checkone();">
        </form>
        <script type="text/javascript">
        function checkall(){
            var hobby = document.getElementsByTagName("input");
            for(var i = 0;i<hobby.length;i++){
              var element = hobby[i];
              element.checked = true;
            }
           
          // 任务1 
           
        }
        function clearall(){
            var hobby = document.getElementsByName("hobby");
            for(var i = 0;i<hobby.length;i++){
              var element = hobby[i];
              element.checked = false;
            }
         // 任务2    
           
        }
       
        function checkone(){
            var j=document.getElementById("wb").value;
            if(j >= 1 && j <= 6){
              var element = document.getElementById("hobby" + j);
              if(element!= null){
                element.checked = true;
              }else{
              alert("请在文本框输入整数1-6序号");
            }

            }else{
              alert("请在文本框输入整数1-6序号");
            }
       
         // 任务3
       
        }
       
        </script>
    </body>
</html>
    查看全部
    0 采集 收起 来源：区别getElementByID,getElementsByName,getElementsByTagName

    2022-09-29

  • qq_爱偷猫的鱼_0 
     function getValue()
          {
              var myH = document.getElementById("myHead");
              alert(myH.innerHTML)
          }
          function getElements()
          {
              var myS = document.getElementsByName("sex");
              alert(myS.length);
          }

          function getTagElements()
          {
              var myI = document.getElementsByTagName("input");
              alert(myI.length);
          }
    查看全部
    0 采集 收起 来源：getElementsByTagName()方法

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!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>
  <script type="text/javascript">
   
 var h2 = document.getElementById("con");
 h2.style.color = 'red';
 h2.style.backgroundColor = '#CCC';
 h2.style.display = 'none';
 //h2.setAttribute("style","color:red;background-color: #ccc;");
 //h2.setAttribute("style","display:none;");

  </script>
</body>
</html>
    查看全部
    0 采集 收起 来源：认识DOM

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>  
 </head>
 <body>
  <!--先编写好网页布局-->
  <h4>操作成功</h4>
  <span id = "time">5</span>后返回主页
  <a href="https://www.imooc.com/">返回</a>
 
 
  <script type="text/javascript">  
  var time =5;
   //获取显示秒数的元素，通过定时器来更改秒数。
   var int = setInterval(setBackTime,1000);
   function setBackTime(){
       time--;
       document.getElementById("time").innerHTML = time;
       if(time == 0){
           clearInterval(int);
           window.location.href="https://www.imooc.com/";
       }
   }
   //通过window的location和history对象来控制网页的跳转。
   
 </script> 
</body>
</html>
    查看全部
    0 采集 收起 来源：编程练习

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
        function GoBack() {
            window.history.go(-1);
        }
       
</script>
</head>
 

<body>
点击下面的锚点链接，添加历史列表项:
    
    <br />
    <a href="#target1">第一个锚点</a>
    <a name="target1"></a>
    <br />
    <a href="#target2">第二个锚点</a>
    <a name="target2"></a>
    <br /><br />
    使用下面按钮，实现返回前一个页面:
    <form>
       <input type="button"  value="返回前一个页面" onclick="GoBack();" />        
    </form>
</body>
</html>
    查看全部
    0 采集 收起 来源：返回前一个浏览的页面

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>

<script type="text/javascript">
  var num=0;
  var i;
  function startCount(){
    document.getElementById('count').value=num;
    num=num+1;
    i=setTimeout("startCount()",1000);
  }
  function stopCount(){
      clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="count" />
    <input type="button" value="Start"  onclick="startCount()"/>
    <input type="button" value="Stop"   onclick="stopCount()"/>
  </form>
</body>
</html>
    查看全部
    0 采集 收起 来源：取消计时器clearTimeout()

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>

</head>
<body>
<form>
<input type="text" id="count" />
</form>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout(startCount,1000)
  }
  startCount();
</script>
</body>
</html>
    查看全部
    0 采集 收起 来源：计时器setTimeout()

    2022-09-29

  • qq_爱偷猫的鱼_0 
    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>

</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="stopClock()" />
  </form>
 
  <script type="text/javascript">
   function clock(){
      var time=new Date();  
      document.getElementById("clock").value = time;
   }
   
   function stopClock(){
       clearInterval(int);
   }
   var int;
   int = setInterval(clock,100);
   clock();
   
     
</script>
</body>
</html>
    查看全部
    0 采集 收起 来源： 取消计时器clearInterval()

    2022-09-29

首页上一页14151617181920下一页尾页

举报

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

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

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

查看已购买的课程