zoukankan      html  css  js  c++  java
  • day04 JS

      很伤心,就在前天下午,本人的电脑突然挂了,电脑售后告知需要10个工作日才可修好.

      于是乎,昨天学的内容来不及整理,暂且跳过,改天再抽空补上,就当缓几天再复习吧.

      今天继续学习了JS的内容.

      

    1 js的内置对象

    1-1 Array对象

    1. 定义
    * Array对象是数组对象,跟java中的数组一个意思,但是使用语法上稍微有些区别。

    2. 使用
    a. 创建数组对象
    * 创建一个空数组:var arr = new Array();
    * 创建一个指定大小的数组:var arr = new Array(size);
    * 创建数组并填充元素:var arr = new Array(element0, element1, ..., elementn);
    * 直接创建元素数组:var arr = [element0, element1, ..., elementn];

    * 数组的特性:js没有集合,为了方便使用,数组可以自动扩容。

    b.数组中的元素获取
    * 跟java一样通过索引的方式获得数组中的元素:

    c. 数组的常用属性:length
    * 细节:不存在数组越界的问题

    d. 获得数组中的一个元素:arr[0]
    遍历获得数组中的所有元素:
    for(var i=0;i<arr.length;i++){
    alert(arr[i]);
    }

    3. 多维数组的操作
    a. js中的多维数组跟java中相似,也就是数组中的元素也是数组
    arr = [ [1,2,3], [4,5,6],[7,8,9] ];

    arr[1][0]

    获取数组中的8数字可以:arr[2][1]

    * 数组的成员,也是一个数组,就是多维数组.

    1-2 String对象

    1. 创建方式
    var str1=new String("abc");
    var str2="abc";

    * 细节:需要开点脑洞
    * str1是引用对象,指向一个字符串对象;str2是基本类型,指向一个字符串。
    * typeof str1:返回结果是:object(引用类型); typeof str2:返回结果是:string(基本类型)
    * 但是两者在使用上,没有任何区别。

    2. 常见方法
    * charAt(number):获取指定位置的字符
    * indexOf():查找某个字符的第一次出现的下标
    * lastIndexOf():查找某个字符最后一次出现的下标
    * split():切割字符串
    * substring(i,j):截取字符

    1-3 Date日期对象

    1. 创建方式
    * 创建当前日期时间:var date = new Date();
    * 创建指定日期时间:var date = new Date(毫秒值);
    * 其中毫秒值为1970-01-01至今的时间毫秒值

    2. 创建方法
    * getFullYear() 从 Date 对象以四位数字返回年份。
    * getMonth() 从 Date 对象返回月份 (0 ~ 11)。
    * getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
    * getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    * getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

    1-4 Math对象

    1. 介绍
    * Math对象是数学对象,是一个工具对象
    * Math对象不用使用new的方式创建,直接使用Math就可以调用对象内部的方法。

    2. 常用方法
    * abs(x) 返回数的绝对值。
    * ceil(x) 对数进行上舍入。 3.1 -->4
    * floor(x) 对数进行下舍入。 3.9 -->3
    * random() 返回 0 ~ 1 之间的随机数。 [0,1): 前闭后开区间
    * round(x) 把数四舍五入为最接近的整数。

    2 DOM 

    2-1 定义

    1. 定义
    * DOM(document object model),文档对象模型,DOM定义了操作HTML文档的接口,提供了访问HTML文档的途径和操作方法。

    document.getElementById(); //dom的一个接口

    2. 原理
    * html文档加载到浏览器的内存中后,我们认为形成了一颗DOM树(浏览器内存中),即html标签按照层级结构而形成了一颗“家谱树”,而任何一个html标签、标签属性和文本都是这个树上的节点元素。

    * 通过模型提供的接口,修改html文档的内容,即通过js动态的修改内存中的DOM树。

    3. 演示dom树的创建

        <html>
            <head>
                <title>标题</title>
            </head>
            <body>
                <h1>h1标题</h1>
                <a href="http://www.baidu.com">百度</a>
            </body>
        </html>

    2-2 标签的操作

    2-3-1 获取元素节点

    1. 方法
    * getElementByid("id值"):根据id获取元素
    <xxx id="id值"> ----整个html文档唯一

    * getElementsByTagName("html标签名"):根据html标签获取多个元素
    * <xxx> : xxx即标签名

    * getElementsByClassName("class属性的名字"):根据类名获取多个元素
    * <xxx class="class属性的名字">

    * getElementsByName("name属性的名字"):根据name属性获取多个元素
    * <xxx name="name的属性名字"> --整个html文档不唯一

    2. 难点
    * getElementsByTagName,getElementsByClassName,getElementsByName获取的是多个,返回的是一个html元素的数组,使用的时候,必须要遍历。

    2-3-2 获取和设置文本节点

    * innerHTML
    * innerText

    2-3-3 获取和设置属性节点

    1. 方法
    * getAttribute(属性的名字):获取属性的值
    * setAttribute(属性的名字,属性的值):设置属性的值
    * removeAttribute(name):删除某个属性

    2. 对比以前的方式如何使用
    * HTML元素,固有的属性,使用以前的获取和设置的方法;对于自定义属性,使用getAttribute,setAttribute

    1. 方法
    * getAttribute(属性的名字):获取属性的值
    * setAttribute(属性的名字,属性的值):设置属性的值
    * removeAttribute(name):删除某个属性

    2. 对比以前的方式如何使用
    * HTML元素,固有的属性,使用以前的获取和设置的方法;对于自定义属性,使用getAttribute,setAttribute

    1. 方法
    * 父节点.hasChildNodes():判断是否有子节点(细节:有看不见的子节点)
    * firstChild: 属性,第一个子节点信息
    * childNodes: 属性,返回所有节点


    * 父节点.removeChild(子节点):删除子节点
    * document.createElement(node):创建一个新元素
    * 父节点.replaceChild(newnode, oldnode):替换子节点
    * 父节点.appendChild(node):添加子节点
    * 父节点.insertBefore(newnode,brothernode); // 在指定兄弟节点之前,插入新节点

    2. 要点
    * 先找“孩子他爸”,后操作“孩子”

    3.难点
    document.createElement("参数")的使用:
    参数:你需要创建的html元素的标签名字

  • 相关阅读:
    整合Django的信息显示框架messages framework
    django使用session来保存用户登录状态
    为窗体添加防机器人的验证机制
    模拟窗口类ModelForm的应用
    django基础窗口类的使用
    django实现利用mailgun进行收发邮件
    django中使用mysql数据库
    ubuntu安装dockers和images:dvwa
    JVM-对象
    JVM-运行时数据区
  • 原文地址:https://www.cnblogs.com/sanmaotage/p/7929145.html
Copyright © 2011-2022 走看看