为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript进阶篇

难度入门
时长 8小时55分
学习人数
综合评分9.47
2557人评价 查看评价
9.7 内容实用
9.4 简洁易懂
9.3 逻辑清晰
  • 算术操作符除了(+、-、*、/)外,还有两个非常常用的操作符,自加一“++”;自减一“--”。首先来看一个例子:

    mynum = 10;
    mynum++; //mynum的值变为11mynum--; //mynum的值又变回10

    上面的例子中,mynum++使mynum值在原基础上增加1,mynum--使mynum在原基础上减去1,其实也可以写成:

    mynum = mynum + 1;//等同于mynum++mynum = mynum - 1;//等同于mynum--

     


    查看全部
  • (1)操作符

    看下面这段JavaScript代码。

    sum = numa + numb;

    其中的"=""+"都是操作符。

    JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(<、>、>=、<=等),逻辑操作符(&&、||、!)。

    注意: “=” 操作符是赋值,不是等于。

    (2) "+"操作符

    算术运算符主要用来完成类似加减乘除的工作,在JavaScript中,“+”不只代表加法,还可以连接两个字符串,例如:

    mystring = "Java" + "Script"; // mystring的值“JavaScript”这个字符串

     


    查看全部
  • 一个表达式可以包含常数和变量




    查看全部
  • 我们使用"="号给变量存储内容,看下面的语句:

    var mynum = 5 ; //声明变量mynum并赋值。

    这个语句怎么读呢? 给变量mynum赋值,值为5。我们也可以这样写:

    var mynum; //声明变量mynummynum = 5 ; //给变量mynum赋值

    注:这里 "="号的作用是给变量赋值,不是等于号。


    查看全部
  • 声明变量语法: var 变量名;

    可以一次声明多个变量,变量之间用","逗号隔开。

    var num1,mun2 ; //声明一个变量num1

    注意:变量也可以不声明,直接使用,但为了规范,需要先声明,后使用。

    查看全部
  • 变量名字可以任意取

    1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。

    2.变量名区分大小写,如:A与a是两个不同变量。

    3.不允许使用JavaScript关键字和保留字做变量名。



    查看全部
  • 主要事件表:

    http://img1.sycdn.imooc.com//60129390000159ff04780349.jpg

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

    2021-01-28

  • //浏览器载入时,调用函数


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

    2021-01-28

  • <!DOCTYPE html>
    <html>
     <head>
      <title> new document </title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
      <script type="text/javascript"> 
      
          window.onload = function(){
                      
         // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         // 1. 获取表格的行,getElementsByTagName 。
         //2. 使用for进行循环,为每行添加事件及背景颜色设置。
           function highlight() {
               // body...
               var tbody = document.getElementById('table').lastChild;
               var trs = document.getElementsByTagName('tr');
               for (var i = 0; i < trs.length; i++) {
                 trs[i].onmouseover=function() {
                   this.style.backgroundColor="#ccc"; 
                   //鼠标经过的tr那一行时候,背景颜色为:#ccc
                 }
                 trs[i].onmouseout =function() {
                   this.style.backgroundColor="#fff"; 
                   //鼠标移出的tr那一行时候,背景颜色为:#ccc  
                 }
               }
             }  
          highlight();//调用函数
         
       
       }
         
          // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
          // 首先 创建tr--td 元素(标签)
          // 然后 可以在元素(标签)里写内容
          // 再然后 用appendChild() 把它们插入,
         function addone(obj) {
           // body...
            var tbody = document.getElementById('table').lastChild;
            var tr = document.createElement("tr");  
             // 第一列
             var td = document.createElement("td");  
                 td.innerHTML="<input type='text' value='' size='15' />";
                 tr.appendChild(td);  //在tr里插入td和td的内容
            // 第二列    
            var td = document.createElement("td");  
                 td.innerHTML="<input type='text' value='' size='15' />";
                 tr.appendChild(td);  //在tr里插入td和td的内容
            // 第三列
            var td = document.createElement("td");  
                 td.innerHTML="<a href='javascript:;' onclick='remove(this)'>删除</a>";
                 tr.appendChild(td);  //在tr里插入td和td的内容
            tbody.appendChild(tr);//在tbody 里把整个tr插入
            highlight();//调用函数
         }
            
         
         // 创建删除函数
         // 找到 tr 标签,把它删除
         function remove(obj){
             var tbody = document.getElementById('table').lastChild; // tbody是 table的子节点
             var tr = obj.parentNode.parentNode;
                //即a(本身)-->td-->tr
               tbody.removeChild(tr);
          
         }
     //  document.write();
      </script> 
     </head> 
     <body> 
         <table border="1" width="50%" id="table">
         <tr>11
          <th>学号</th>
          <th>姓名</th>
          <th>操作</th>
         </tr>  
         <tr>22
          <td>xh001</td>
          <td>王小明</td>
          <td><a href="javascript:;" onclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
         </tr>
         <tr>33
          <td>xh002</td>
          <td>刘小芳</td>
          <td><a href="javascript:;" onclick="remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
         </tr>  
         </table>
         <input type="button" value="添加一行" onclick="addone(this)" />   <!--在添加按钮上添加点击事件  -->
     </body>
    </html>


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

    2021-01-28

  • <!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">
    //创建p标签
    var element=document.createElement("p");
    //p标签的class="message"
    element.className="message";
    //创建文本
    var newnode=document.createTextNode("I love Javascript!");
    //把p标签插入到body上
    document.body.appendChild(element);
    //把文本插入到p标签里
    element.appendChild(newnode);
    </script> 
    </body>
    </html>


    查看全部
  • <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    <!--   
      任务:
      <a href="http://www.imooc.com"  target="_blank">慕课网</a>
     -->
    <script type="text/javascript">
    var main = document.body;
    //创建链接
    function createa(url,text)
    {            
       var a= document.createElement("a"); 
       a.href=url;
       a.innerHTML=text; 
       a.setAttribute("style", "color:red"); //也可以使用setAttribute来设置属性
       a.setAttribute("target", "_blank");
       main.appendChild(a); 
        
    }
    // 调用函数创建链接
    createa("http://www.imooc.com","慕课网");
    </script> 
    </body>
    </html>


    查看全部
  • <!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 h = document.getElementsByTagName('h1');
      // 在此完成该函数
      for (var i = 0; i < h.length; i++) {
        var x = content.removeChild(h[0]);
        //document.write("清除的内容是:"+x.innerHTML);
      }
      
    }
    //同学的代码1
    /*
    function clearText() {
      var content=document.getElementById("content");
      // 在此完成该函数
      
      //法一:一次性清除节点内容
      // for(var i=0;i<content.childNodes.length;i++){
      //     if(content.childNodes[i].nodeType!=1){   
      //        continue;  
      //     }else{
      //        content.removeChild(content.childNodes[i]);    
      //     }
             
      //     }
      //法二:一次性清除节点内容
       
       // for(var i=content.childNodes.length-1;i>=0;i--){
       //    var chnode=content.childNodes[i];
       //    content.removeChild(chnode);  
       // }
     
      //法三:多次方清除节点内容
      //  for(var i=0;i<content.childNodes.length;i++){
      //   var chnode=content.childNodes[i];
      //   content.removeChild(chnode);  
      // }
    */
    //同学的代码2
    /*
     function clearText() {
      var content=document.getElementById("content");
      // 在此完成该函数
      var conCN = content.childNodes;
      while ( (conCN.length > 0) && (conCN[0].nodeType != 1) )
      {
           content.removeChild(conCN[0]);
      }
      //回显已删除
      var newDiv = document.createElement("div");
      if (conCN.length >0)
      {
          var rmNode = content.removeChild(conCN[0]);
          newDiv.innerHTML = "clear \"" + rmNode.innerHTML + "\" done!";
      }
      else
      {
          newDiv.innerHTML = "there is no node!"
      }
      content.parentNode.appendChild(newDiv);
    }
    */
    </script>
    <button onclick="clearText()">清除节点内容</button>
    </body>
    </html>


    查看全部
  • <!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 h = document.getElementsByTagName('h1');
      // 在此完成该函数
      for (var i = 0; i < h.length; i++) {
        var x = content.removeChild(h[i]);
        //document.write("清除的内容是:"+x.innerHTML);
      }
      
    }
    </script>
    <button onclick="clearText()">清除节点内容</button>
    </body>
    </html>


    查看全部
  • <!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>HTML</li>
    </ul> 
     
    <script type="text/javascript">
      var otest = document.getElementById("test"); 
      var wli = document.getElementsByTagName("li")[1];
      var newli = document.createElement("li");
      newli.innerHTML="就不 PHP";
      otest.insertBefore(newli,wli);
    </script> 
    </body>
    </html>


    查看全部
  • <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    </head>
    <body>
    <div>
      javascript  
      <p>javascript</p>
      <div>jQuery</div>
      <h5>PHP</h5>
    </div>
    <script type="text/javascript">
     var node=document.getElementsByTagName("div")[0].childNodes;
     document.write("<h3>第一个DIV的子节点数:"+ node.length+"</h3>");
     document.write("<h3>相应节点的属性:</h3>");
     for (var i = 0; i < node.length; i++) {
         document.write("第"+[i+1]+"个节点名:"+node[i].nodeName+"<br/>");
          document.write("第"+[i+1]+"个节点值:"+node[i].nodeValue+"<br/>");
          document.write("第"+[i+1]+"个节点类型:"+node[i].nodeType+"<br/><br/>");
     }
     
    </script>
    </body>
    </html>


    查看全部

举报

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

微信扫码,参与3人拼团

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

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