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

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • 变量名区分大小写,如:A与a是两个不同变量。

    查看全部
  • 如果我们想知道数组的大小,只需引用数组的一个属性length。Length属性表示数组的长度,即数组中元素的个数。

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


    查看全部
  • <!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 n=document.createElement("a");

      n.setAttribute("href",url);

      n.innerHTML=text;

      n.style.color="red"

      main.appendChild(n);

    }

    // 调用函数创建链接

    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>

    <script type="text/javascript">

    var int=setInterval(clock,100);

      var attime;

      function clock(){

        var time=new Date();          

        attime=time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;

        document.getElementById("clock").value = attime;

      }

      

    </script>

    </head>

    <body>

    <form>

    <input type="text" id="clock" size="50"  />

    </form>

    </body>

    </html>


    查看全部
  • arrayObject.sort(function)
    function可以是一个排序函数:
    升序:function sortNum(a,b) {
      return a - b;
     //升序,如降序,把“a - b”该成“b - a”
    }


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

    2018-09-14

  • arrayObject.slice(start,end)

    start必需,规定从何处开始选取(包括)

    end可选,何处结束选取。(不包含)

    方法并不会修改数组,而是返回一个子数组。

    查看全部
    0 采集 收起 来源:选定元素slice()

    2018-09-14

  • arrayObject.reverse()

    该方法会改变原来的数组,不会创建新的数组

    查看全部
  • arrayObject.concat(array1,array2,...,arrayN)

    可以存在N个参数,使用一个数组.concat()

    查看全部
  • 表达式;表达式是指具有一定的值,用操作符把常数和变量链接起来的代数式。一个表达式可以包含常数和变量



    查看全部
  • var:声明变量(找盒子的动作),并为变量准备内存位置。

    注意:声明变量可以同时声明多个变量,变量之间用“,”隔开。

    查看全部
  • 区别getElementByID,getElementsByName,getElementsByTagName

    以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

    1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。

    2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

    3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")。

    把上面的例子转换到HTML中,如下:

    <input type="checkbox" name="hobby" id="hobby1">  音乐

    input标签就像人的类别。

    name属性就像人的姓名。

    id属性就像人的身份证。

    方法总结如下:

    注意:方法区分大小写

    通过下面的例子(6个name="hobby"的复选项,两个按钮)来区分三种方法的不同:

      <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">  跑步    <input type="button" value = "全选" id="button1">   <input type="button" value = "全不选" id="button1">

    1. document.getElementsByTagName("input"),结果为获取所有标签为input的元素,共8个。

    2. document.getElementsByName("hobby"),结果为获取属性name="hobby"的元素,共6个。

    3. document.getElementById("hobby6"),结果为获取属性id="hobby6"的元素,只有一个,"跑步"这个复选项。


    查看全部
  • getElementsByTagName()方法

    返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

    语法:

    document.getElementsByTagName(Tagname)

    说明:

    1. Tagname是标签的名称,如p、a、img等标签名。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

    看看下面代码,通过getElementsByTagName()获取节点。


    查看全部
  • getElementsByName()方法

    返回带有指定名称的节点对象的集合。

    语法:

    document.getElementsByName(name)

    与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。

    注意:

    1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

    看看下面的代码:

    运行结果:


    查看全部
  • 认识DOM

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

    先来看看下面代码:

    将HTML代码分解为DOM节点层次图:

    HTML文档可以说由节点构成的集合,DOM节点有:

    1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

    2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

    3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

    节点属性:

    遍历节点树:

    以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

    DOM操作:

    注意:前两个是document方法。


    查看全部
    0 采集 收起 来源:认识DOM

    2018-09-13

  • var aa = document.createElement("input");

    设置aa的属性方法:

    •     aa.setAttribute('type','text');

    •      aa.type = 'text';

    查看全部

举报

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

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