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

JavaScript进阶篇

难度入门
时长 8小时55分
学习人数
综合评分9.47
2557人评价 查看评价
9.7 内容实用
9.4 简洁易懂
9.3 逻辑清晰
  • 文本框内容改变事件(onchange)

    通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。


    查看全部
  • 内容选中事件(onselect)

    选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。


    查看全部
  • <script type="text/javascript">

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

      var mydate=new Date();

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

      var mynum = mydate.getDay();

    //  document.write(mydate.getFullYear()+"年"+mydate.getMonth()+"月"+mydate.getDay()+"日"+" "+weekday[mynum]+"</br>");

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

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

      var reg = /\d+/g;

      var sumArr = scoreStr.match(reg);

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

      var sum=0;

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

          sum+=parseInt(sumArr[i]);

      }

      var avg = parseInt(sum/(sumArr.length));

      document.write(mydate.getFullYear()+"年"+mydate.getMonth()+"月"+mydate.getDay()+"日"+" "+weekday[mynum]+"</br>班级总分为:"+sum+"</br>平均分为:"+avg);

    </script>


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

    2020-03-18

  • scrollHeight和scrollWidth,获取网页内容高度和宽度。

    一、针对IE、Opera:

    scrollHeight 是网页内容实际高度,可以小于 clientHeight。

    二、针对NS、FF:

    scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

    三、浏览器兼容性

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

    注意:区分大小写

    scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

    查看全部
  • <!DOCTYPE  HTML><html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>数组</title><script type="text/javascript"> 
    //创建数组 var arr=['*','##',"***","&&","****","##*"]; 
     arr[7] = "**"; 
     //显示数组长度 
     alert("数组的长度是:"+arr.length);  
     //将数组内容输出,完成达到的效果。
     document.write("听说这是我爱你的图形:"+"</br>"+arr[0]+"</br>"+arr[7]+"</br>"+arr[2]+"</br>"+arr[4]);
     </script>
     </head>
     <body></body>
     </html>


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

    2020-03-17

  • 事件类型.53e198540001b66404860353.jpg

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

    2020-03-16

  • 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

    一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:

    •  window.innerHeight - 浏览器窗口的内部高度

    •  window.innerWidth - 浏览器窗口的内部宽度

    二、对于 Internet Explorer 8、7、6、5:

    •  document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

    •  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

    或者

    Document对象的body属性对应HTML文档的<body>标签

    •  document.body.clientHeight

    •  document.body.clientWidth

    在不同浏览器都实用的 JavaScript 方案:

    var w= document.documentElement.clientWidth
          || document.body.clientWidth;
    var h= document.documentElement.clientHeight
          || document.body.clientHeight;
    查看全部
  • createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。

    语法:

    document.createTextNode(data)

    参数:

    data : 字符串值,可规定此节点的文本。

    我们来创建一个<div>元素并向其中添加一条消息,代码如下:

    运行结果:

    查看全部
  • createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

    语法:

    document.createElement(tagName)

    参数:

    tagName:字符串值,这个字符串用来指明创建元素的类型。

    注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。

    我们来创建一个按钮,代码如下:

    <script type="text/javascript">   var body = document.body;    var input = document.createElement("input");  
       input.type = "button";  
       input.value = "创建一个按钮";  
       body.appendChild(input);  
     </script>

    效果:在HTML文档中,创建一个按钮。

    我们也可以使用setAttribute来设置属性,代码如下:

    <script type="text/javascript">  
       var body= document.body;             
       var btn = document.createElement("input");  
       btn.setAttribute("type", "text");  
       btn.setAttribute("name", "q");  
       btn.setAttribute("value", "使用setAttribute");  
       btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
       body.appendChild(btn);  
    </script>

    效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。

    查看全部
  • replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 

    语法:

    node.replaceChild (newnode,oldnew )

    参数:

    newnode : 必需,用于替换 oldnew 的对象。 
    oldnew : 必需,被 newnode 替换的对象。

    我们来看看下面的代码:

     

    效果: 将文档中的 Java 改为 JavaScript。

    注意: 

    1. 当 oldnode 被替换时,所有与之相关的属性内容都将被移除。 

    2. newnode 必须先被建立。 

    查看全部
  • removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

    语法:

    nodeObject.removeChild(node)

    参数:

    node :必需,指定需要删除的节点。

    我们来看看下面代码,删除子点。

    运行结果:

    HTML删除节点的内容: javascript

    注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。

    如果要完全删除对象,给 x 赋 null 值,代码如下:

    查看全部
  • insertBefore() 方法可在已有的子节点前插入一个新的子节点。

    语法:

    insertBefore(newnode,node);

    参数:

    newnode: 要插入的新节点。

    node: 指定此节点前插入节点。

    我们在来看看下面代码,在指定节点前插入节点。

    运行结果:

    This is a new p
    JavaScript
    HTML

    注意: otest.insertBefore(newnode,node); 也可以改为:  otest.insertBefore(newnode,otest.childNodes[0]); 

    查看全部
  • 在指定节点的最后一个子节点列表之后添加一个新的子节点。

    语法:

    appendChild(newnode)

    参数:

    newnode:指定追加的节点。

    我们来看看,div标签内创建一个新的 P 标签,代码如下:

    运行结果:

    HTML
    JavaScript
    This is a new p
    查看全部
  • 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。

    语法:

    nodeObject.nextSibling

    说明:如果无此节点,则该属性返回 null。

    2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

    语法:

    nodeObject.previousSibling

    说明:如果无此节点,则该属性返回 null。

    注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

    解决问题方法:

    判断节点nodeType是否为1, 如是为元素节点,跳过。

    运行结果:

    LI = javascript
    nextsibling: LI = jquery
    查看全部
    0 采集 收起 来源:访问兄弟节点

    2020-03-16

  • 获取指定节点的父节点

    语法:

    elementNode.parentNode

    注意:父节点只能有一个。

    看看下面的例子,获取 P 节点的父节点,代码如下:

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

    运行结果:

    parentNode 获取指点节点的父节点
    DIV

    访问祖节点:

    elementNode.parentNode.parentNode

    看看下面的代码:

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

    运行结果:

    parentNode获取指点节点的父节点
    DIV

    注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

    查看全部

举报

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

微信扫码,参与3人拼团

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

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