JS的对象(day03)

1)js的String对象

创建String对象    var  str = "abc";

属性和方法(文档)
        属性:length    表示字符串长度

        方法:
            I. 与html相关的方法
                - bold()    加粗
                - fontcolor()    设置字符串的颜色
                - fontsize()    设置字体的大小
                - link()    将字符串显示成超链接
                        例如:document.write(str4.link("hello.html"));
                - sub()/sup()    设置一个下标/上标

运行效果图

            II. 与java相似的方法
                - concat()    连接字符串
                - charAt()    返回指定位置的字符串
                - indexOf()    返回字符串位置
                - split()    切分字符串,成数组
                - replace()    替换字符串
                - substr() 和 substring()

运行效果图

2)js的Array对象

创建数组(三种)
        - var arr1 = [1,2,3]; // 数组元素为数字可以不加引号,为字符或者字符串必须加引号
        - var arr2 = new Array(3); // 长度是3
        - var arr3 = new Array(3,4,5); // 数组中的元素是3,4,5

        【var arr = []; // 创建一个空数组】

属性:length:查看数组的长度

方法:
    - concat()        连接数组
    - join()        根指定的字符分割数组
    - push()        向数组末尾添加元素,返回数组的新的长度值
    - pop()        删除最后一个元素,并放回该元素的值
    - reverse()        反转数组中的元素的顺序

3)js的Date对象

Date对象中的常用方法
运行效果图

4)js的Math对象

里面的都是静态方法,使用可以直接通过Math.方法()

方法:
    - ceil(x)        向上舍入
    - floor(x)        向下舍入
    - round(x)        四舍五入
    - random()        获取随机数(伪随机数)
    - pow(x,y)        x的y次幂

5)js的全局函数

由于不属于任何一个对象,直接写名称使用

    I. eval()    执行js代码(如果字符串是一个js代码,使用方法直接执行)
        例如:var  str = "alert('123');";
                    eval(str);

    II. encodeURI()        对字符进行编码

    III. decodeURI()        对字符进行解码

    IV. isNaN()        判断当前的字符串是否是数字

    V. parseInt()        类型转换

6)js的函数的重载

        什么是重载? 方法名相同,参数列表不同

        js的重载是否存在? 不存在
            调用最后一个方法
            把传递的参数保存到    arguments数组里面

    面试题:js里面是否存在重载?
            js不存在重载,但是可以通过其他方式模拟重载效果

7)js的bom对象

BOM:broswer object model    浏览器对象模型

有哪些对象?
    I.  navigator : 获取客户机的信息(浏览器的信息)
        - navigator.appName

    II. screen : 获取屏幕的信息

    III. location : 请求url地址
            href属性
                获取到请求的url地址    - document.write(location.href);

            设置url地址
                页面上安置一个按钮,按钮上绑定一个事件,当我点击这个按钮,页面可以跳转到另外一个页面

安置按钮
绑定事件

    IV. history : 请求的url的历史纪录
        - 创建三个页面
        (1)创建第一个页面 a.html 写一个超链接到 b.html
        (2)创建b.html 写一个超链接到 c.html
        (3)创建c.html

        - 到访问的上一个页面
            history.back();
            history.go(-1);

        - 到访问的下一个页面
            history.forward();
            history.go(1);
            // 必须配合超链接,超链接点后,才会有记录,才能实现跳转

a.html
b.html
c.html

    V. window(★★★★★)    窗口对象/顶层对象

        方法:
            - window.alert()        页面弹出一个框,显示内容
                简写为:alert()

            - confirm()        确认提示框
                var  flag = window.confirm("显示的内容");

            - prompt()        输入对话框
                window.prompt("在显示的内容","输入框里面的默认值");

            - open()        打开一个新的窗口
                open("打开新窗口的地址url","","窗口特征,比如窗口宽度和高度")
                创建一个按钮,点击这个按钮,打开一个新窗口

            - close() 关闭窗口(浏览器兼容性比较差)
                window.close();

            - 做定时器
            I. setInterval("js的代码",毫秒数)
                    - 每当到达相应的毫秒数,就执行一次js的代码             
                        window.setInterval("alert('123');",3000);

            II. setTimeout("js的代码",毫秒数)
                    - 当到达相应的毫秒数时执行js的代码,但只执行一次
                        window.setTimeout("alert('123');",3000);

            III. clearInterval()  清除setInterval()设置的定时器
                  // 通过setInterval会有一个返回值
                var id1 = setInterval("alert('123');",7000);                    clearInterval(id1);

            IV. clearTimeout()  清除setTimeout()设置的定时器   
                    var id2 = setTimeout("alert('abc');",3000);
                    clearTimeout(id2);

8)js的dom对象

DOM:document object model    文档对象模型

    文档:超文本文档(超文本标记文档) html、xml
    对象:提供了属性和方法
    模型:使用属性和方法操作超文本标记型文档

    可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作

    想要对标记型文档进行操作,首先需要 对标记型文档里面的所有内容封装成对象(需要把html里面的标签、属性、文本内容都封装成对象)

使用dom解析html

    解析过程:
        根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成对象
        - document对象:整个文档
        - element对象:标签对象
        - 属性对象
        - 文本对象

        —— Node节点对象:这个对象是这些对象的父对象
            如果在对象里面找不到想要的方法,就去Node对象里面去找

    DHTML:是很多技术综合体的简称
        ** html:封装数据
        ** css:使用属性和属性值设置样式
        ** dom:操作html文档(标记型文档)
        ** javascript:专门指的是js的语法语句(ECMAScript)

9)documnet对象

表示整个文档

常用的方法
        I. write()        向页面输出变量/html代码

        II. getElementById();        通过id得到元素(标签)

        III. getElementsByName();        通过标签的name的属性值得到标签,返回的是一个集合(数组)

        IV. getElementsByTagName("标签名称")        通过标签名得到元素

10)案例:window弹窗案例

实现过程:
    1)创建一个页面
            有两个输入项和一个按钮
            按钮上面有一个事件:弹出一个新窗口 open

    2)创建弹出页面
            表格
            每一个有一个按钮和编号和姓名
            按钮上有一个事件:把当前的编号和姓名,赋值到第一个页面相应的位置

            opener属性        获取创建当前窗口的窗口

推荐阅读更多精彩内容