JavaScript进阶篇_学习笔记

首页免费课 JavaScript进阶篇笔记

JavaScript进阶篇

                
                慕课官方号
            页面重构设计

                    查看讲师更多课程 
                    慕课官方号讲师的其他课程
                
帝堵抢车位动画制作
初级·36954
免费课程
                                
JavaScript入门篇 
入门·739828
免费课程
                                
                难度入门
            
                时长 8小时55分
            
                学习人数
            
综合评分9.47
                            2557人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.3
                                逻辑清晰

最热最新

qq_慕神4299395

substr（提取的开始位置，提取的字符长度）
substring [提取的开始位置，提取的结束位置-1）

查看全部

0 采集收起来源：提取指定数目的字符substr()
2020-08-25
一只小雄

注意每个case后，一定要加：break；
default，就相当于else

查看全部

0 采集收起来源：多种选择（Switch语句)
2020-08-23
qq_慕神4299395

var mystr="Hello World!"
document.write(mystr.indexOf("v",8));
从下标为9开始寻找字符串"v"(下标从开始从0)
找不到则返回-1

查看全部

0 采集收起来源：返回指定的字符串首次出现的位置
2020-08-22
weixin_慕运维0201071

有点丑，仅供参考
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<script type="text/javascript">

      window.onload = function(){
          changeColor();
      }

     function changeColor(){
         var trs=document.getElementsByTagName("tr");
         var len=trs.length;
         var i;
         for(i=0;i<len;i++){
             trs[i].setAttribute("onmouseover","Color1(this)");
             trs[i].setAttribute("onmouseout","Color2(this)");
         }
     }

     function Color1(n){
         n.style.backgroundColor="#f2f2f2";
     }

     function Color2(n){
         n.style.backgroundColor="#fff";
     }


      function addNode(){
          var newNode=document.createElement("tr");
          var td_id=document.createElement("td");
          var id=document.createElement("input");
          id.type="text";
          td_id.appendChild(id);
          newNode.appendChild(td_id);
          var td_name=document.createElement("td");
          var name=document.createElement("input");
          name.type="text";
          td_name.appendChild(name);
          newNode.appendChild(td_name);
          var td_opt=document.createElement("td");
          var del=document.createElement("a");
          del.innerHTML="删除";
          del.setAttribute("href","javascript:;");
          del.setAttribute("onclick","delNode(this)");
          td_opt.appendChild(del);
          newNode.appendChild(td_opt);
          document.getElementById("table").appendChild(newNode);
          changeColor();
      }



      function delNode(n){
         n.parentNode.parentNode.parentNode.removeChild(n.parentNode.parentNode);
     }


</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="delNode(this)" >删除</a></td>   
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="delNode(this)" >删除</a></td>   
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="addNode()" />   
</body>
</html>

查看全部

0 采集收起来源：编程练习
2020-08-21
weixin_慕运维0201071

需要的同学可参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
document.write(w," ",h);
</script>
</body>
</html>

查看全部

0 采集收起来源：网页尺寸scrollHeight
2020-08-21
weixin_慕运维0201071

需要的同学可参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
var w=document.documentElement.cilentWidth||document.body.clientWidth;
var h=document.documentElement.clientHeight||document.body.client.Height;
document.write(w," ",h)
</script>
</body>
</html>

查看全部

0 采集收起来源：浏览器窗口可视区域大小
2020-08-21
weixin_慕运维0201071

需要的同学可以参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

.message{
   width:200px;
   height:100px;
   background-color:#CCC;}

</style>
</head>
<body>
<script type="text/javascript">
var p=document.createElement("p");
p.className="pTag";
var pText=document.createTextNode("I love JavaScript");
p.appendChild(pText);
document.body.appendChild(p);
</script>

</body>
</html>

查看全部

0 采集收起来源：创建文本节点createTextNode
2020-08-21
weixin_慕运维0201071

需要的同学可以参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
function createa(url,text)
{
    var body=document.body;
    var href=document.createElement("a");
    href.href=url;
    href.text=text;
    body.appendChild(href);
}
createa("http://www.imooc.com","慕课网");
</script>
</body>
</html>

查看全部

0 采集收起来源：创建元素节点createElement
2020-08-21

Stanley_张

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

查看全部

0 采集收起来源：访问父节点parentNode

2020-08-21

weixin_慕运维0201071

有需要的同学可参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>

<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

    <script type="text/javascript">
      function replaceMessage(){
        var newnode=document.createElement("i");
       newnode.innerHTML="replaceNode";
       var oldnode=document.getElementById("oldnode");
       oldnode.parentNode.replaceChild(newnode,oldnode);
       }
       replaceMessage();
</script>

</body>
</html>

查看全部

0 采集收起来源：替换元素节点replaceChild()
2020-08-21
weixin_慕运维0201071

需要的同学可以参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
var len=content.childNodes.length;
document.write(len+"<br/>");
for(i=0;i<len;i++){
content.removeChild(content.childNodes[i]);
document.write(content.childNodes[i].nodeValue+"<br/>");
}

}
</script>

<button onclick="clearText()">清除节点内容</button>

</body>
</html>

查看全部

0 采集收起来源：删除节点removeChild()
2020-08-21
weixin_慕运维0201071

需要的同学可参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>

<ul id="test"><li>JavaScript</li><li id="x1">HTML</li></ul>

<script type="text/javascript">

var otest = document.getElementById("test");
var node=document.getElementById("x1");
var php=document.createElement("li");
php.innerHTML="php";
otest.insertBefore(php,node);
</script>

</body>
</html>

查看全部

0 采集收起来源：插入节点insertBefore()
2020-08-21
weixin_慕运维0201071

需要的同学可参考
<!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 x=n.previousSibling;
        while(x&&x.nodeType!=1){
            x=x.previousSibling
        }
        return x;
    }

    var x=document.getElementsByTagName("li")[0];
    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 采集收起来源：访问兄弟节点
2020-08-21
weixin_慕运维0201071

需要的同学可参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
      <li id="tcon"> 基础语法</li>
      <li>流程控制语句</li>
      <li>函数</li>
      <li>事件</li>
      <li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
    <li>文字</li>
    <li>段落</li>
    <li>表单</li>
    <li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
   var mylist = document.getElementById("tcon");
   document.write(mylist.parentNode.parentNode.parentNode.childNodes[7].childNodes[0].nodeValue);

</script>

</body>
</html>

查看全部

0 采集收起来源：访问父节点parentNode
2020-08-21
weixin_慕运维0201071

需要的同学可参考
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild+"<br/>");
document.write(x.lastChild);

</script>
</body>
</html>

查看全部

0 采集收起来源：访问子节点的第一和最后项
2020-08-21

首页上一页 102 103 104 105 106 107 108 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

微信扫码，参与3人拼团

热搜

最近搜索清空

JavaScript进阶篇