美文网首页我爱编程
<JavaScript>总结:知识点

<JavaScript>总结:知识点

作者: 玉圣 | 来源:发表于2018-05-22 22:02 被阅读26次

一、网页中的相关属性和参数使用:

  • 1、获取的当前网页的路径:
   window.location.pathname;  //形如:/{根目录}/../{当前文件目录}/{文件名.html}
  • 2、获取网页的域名:
   document.domain;   //形如:localhost
  • 3、hash:
    需求:如果页面中有分页的数据,需要将指定第x页的数据发送给其他人,其他人点击链接的时候,还能跳转到指定的第x页,这可以通过hash来处理:
   window.location.hash = 3;  //设置hash,地址栏显示为http://ip地址/aaa.html#3
   console.log(window.location.hash);  //结果为#3

二、函数:

1、arguments对象:
  • 1、说明:
    arguments对象是包含了传入函数中的所有参赛,它并不是一个数组(伪数组),只是与数组相似,出了拥有length属性,不具备数组其他的所有属性和方法。

  • 2、属性:
    length :返回参数的长度
    callee :一个指针,指向拥有这个arguments对象的函数

  • 3、示例:
    例子1:求和

<script>

    function sum() {
        console.log(arguments);
        var vals = 0;
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
            vals += (Number(arguments[i]) || 0);  //为了过滤含有非数字的字符串
        }
        return vals;
    }

    var n = sum("44", 2, 3);
    console.log(n);

</script>

例子2:动态设置CSS属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arguments对象及动态设置CSS属性</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
<button id="btn1">改变颜色</button>
<button id="btn2">改变长度</button>

<div id="box"></div>

<script>
    function setCssStyle(obj) {
        var length = arguments.length;
        if (arguments.length%2===0) {
            length = arguments.length - 1;
        }
        for (var i = 1; i < length; i+=2) {
            obj.style[arguments[i]] = arguments[i+1];
        }
    }

    var box = document.getElementById("box");
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.onclick = function() {
        setCssStyle(box, "background-color", "blue");
    };

    btn2.onclick = function() {
        setCssStyle(box, "width", "200px");
    };

</script>
</body>
</html>
4、apply和call方法作用:
  • 1、专门用于修改方法内部的this
    1.1、通过window.test2找到test方法
    1.2、通过apply(obj)将找到的test方法内部的this修改为自定义的对象

示例:

        //修改之前:
        function test1() {
            //谁调用,this则是谁
            console.log(this);
        }
        test1();  //打印结果为window对象

        //修改之后:
        function test2() {
            console.log(this);

        }

        var obj = {"name": "zhangsan"};
        window.test2.apply(obj);  //打印结果为修改的对象obj
        window.test2.call(obj);  //打印结果为修改的对象obj
  • 2、格式
    2.1、call(对象, 参数1, 参数2, ...):可接收多个参数
    2.2、apply(对象, [数组]):只接收两个参数,第二个参数为数组
  • apply方法中,会将数组中的值依次传递给方法中的形参

示例:

        function sum(a, b) {
            console.log(this, a + b);
        }

        window.sum.call(obj, 1, 2); //结果为 obj对象 3,1传给了a,2传给了b
        window.sum.apply(obj, [2, 5]); //结果为 obj对象 7,2传给了a,5传给了b

2.3、真数组转换为伪数组

        // 将真数组转换为伪数组
        var arr = [1, 2, 3, 4, 5];
        var obj = {};
        [].push.apply(obj, arr);
        console.log(obj);   //{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5}

注意: [] 表示数组
1)通过[].push找到数组中的push方法
2)通过apply(obj)将找到的push方法内部的this修改为自定义的obj对象
3)将传入数组中的元素依次取出,传递给push的形参
则数组中的属性全部赋给了obj对象,完成了转换

真数组转换为伪数组

2.4、伪数组转换为真数组
使用apply(或call)可以将真数组转换为伪数组,那么同理,将apply中的参数互换,就可以达到将伪数组转换为真数组了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>真伪数组的转换</title>

    <script>
        window.onload = function () {
            //系统自带的伪数组
            var divs = document.querySelectorAll("div");

            var arr = [];

            [].push.apply(arr, divs);
            console.log(arr);

            //自定义的伪数组
            var obj = {0 : "zhangsan", 1 : 8, length : 2};

            var arr2 = [];
            [].push.apply(arr2, obj);

            // var arr2 = [].slice.apply(obj);

            // var arr2 = [].slice.call(obj);

            console.log(arr2);
        };


    </script>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
</body>
</html>

注意:
在IE8的低版本中,使用[].push.apply(arr2, obj); 这种方式,会报错,因此,如果要将伪数组转换为真数组,通用的方式为:

var arr2 = [].slice.call(obj);
5、JSON的使用:
  • 1、将字符串解析为json对象
    1.1、方法:JSON.parse
    <script>
        var j = '{"name" : "zhangsan", "age" : 18}';
        var obj = JSON.parse(j);
        console.log(obj);

    </script>
打印结果
1.2、注意:
在低版本IE中,不可以使用原生的JSON.parse方法,但是可以使用第三方的框架json2.js ,使用的方法和原生的一样。

三、属性:

1、JS获取CSS中的样式:

在开发中,要想获得CSS的样式,有如下方式:

  • 1、获取 行内样式:点方式
    如: box.style.topbox.style.backgroundColor

  • 2、获取 页内样式或外部样式
    1)IE和Opera浏览器:
    obj.currentStyle
    2)其他W3C标准浏览器:
    注意:其中两个参数是必须的,没有伪类,使用null替代

window.getComputedStyle("元素", "伪类");

3)兼容写法:

    function getStyleAttr(obj, attr) {
        if (obj.currentStyle) { //IE 和 Opera
            return obj.currentStyle;
        } else {    //其他W3C标准浏览器
            return window.getComputedStyle(obj, null)[attr];
        }
    }
2、cookie:
  • 1、cookie和ssession:
    cookie:会话跟踪技术,用于客户端
    session:会话跟踪技术,用于服务端

  • 2、cookie的作用:
    将网页中的数据保存到浏览器中

  • 3、cookie的生命周期:
    默认情况下,cookie的生命周期是一次会话(即浏览器被关闭,就结束了)
    如果通过expires=xxx 设置了过期时间,并且过期时间没有过期,那么下次打开浏览器还是存在的。
    而如果设置的过期时间已经过期了,则浏览器会立即删除保存的cookie数据
    设置过期时间如下:

    <script>
        window.onload = function () {
            //默认情况
            console.log(document.cookie);   //结果未打印任何内容

            //设置数据后
            document.cookie = "age=333";
            console.log(document.cookie);   //结果为:age=333

            var date = new Date(); //今日为2018年06月04日
            date.setDate(date.getDate()+1); //设置过期时间为明天
            document.cookie = "name=zhangsan;expires=" + date.toGMTString() + ";"
        };
    </script>
设置过期时间
  • 4、cookie的作用范围:
    1)在同一个浏览器的同一个路径下,不同的文件中可以相互访问
    2)在同一浏览器中,默认情况下,下一级路径可以访问
    3)如果在同一浏览器中,想让上一级目录也能访问保存的cookie,那么需要添加一个path 属性才可以:document.cookie = "name=zs;path=/;"
    4)如果在www.aaa.com 下保存了一个cookie,那么在edu.aaa.com中是无法访问的,如果需要让edu.aaa.com也能访问,则需要在设置cookie的时候,需要添加如下代码:
document.cookie = "name=zahgnsan;domain=aaa.com";  //设置同一站点
  • 5、cookie的删除:
    要想删除cookie,直接将要删除的cookie的过期时间设置为前一天即可删除

默认情况下只能删除默认路径中保存的cookie,如果想删除指定路径下的cookie,那么必须在删除的时候指定路径才可以。

  • 6、cookie的使用注意点:
    cookie默认是不会保存任何数据的
    cookie不能一次性设置多条数据,要想保存多条数据,只能一条一条的设置
    cookie有大小(4KB左右)和个数(20~50个)的限制
    <script>
        window.onload = function () {
            //默认情况
            console.log(document.cookie);   //结果未打印任何内容

            //设置数据后
            document.cookie = "age=333";
            console.log(document.cookie);   //结果为:age=333

        };
    </script>
默认情况 设置数据

四、正则表达式:

注意:
1、要使用正则表达式进行匹配,需要在匹配表达式前后加上/
格式为:

  /表达式/

2、在js中,如果匹配成功一次,就不在继续匹配了,如果需要全部匹配,可以使用g

1、去除字符串前后空格:

其中的^ 表示匹配开头,$ 表示匹配结尾,g 为全局匹配

    <script>
        var s = "  aa bbccb  ";
        var ss = s.replace(/^\s+|\s+$/g, "");
        console.log(ss);

    </script>

相关文章

  • <JavaScript>总结:知识点

    一、网页中的相关属性和参数使用: 1、获取的当前网页的路径: 2、获取网页的域名: 3、hash:需求:如果页面中...

  • <JavaScript>总结:注意点

    一、事件 1、a标签中点击事件 1、描述示例: 2、现象需求:当点击了a标签之后,会跳转到相应的图片展示页面。 如...

  • <<你不知道的JavaScript>>之

    前奏 读完书中的“关于this”这一章,发现其实作者有点啰嗦的感觉了。他并没有直接讲this到底是什么,只是列举了...

  • <jQuery>总结:知识点

    一、jQuery基础和原理: 1、jQuery的本质是一个闭包: 闭包:一种立即执行的函数 说明:方式一和方式二的...

  • <Bootstrap>总结:知识点

    一、Bootstrap的基础 1、简介和集成使用 1.1、简介: Bootstrap是一个神奇的前端UI框架 是t...

  • <CSS>总结:知识点

    一、引入: 1、站点图标(logo)的引入 在HTML中的 标签中,通过link进行引入 快捷方式:link:f...

  • <Ajax>总结:知识点

    一、Ajax的基础: 1、使用步骤 1.1、步骤: 创建一个异步对象 设置请求方式和请求地址 发送请求 监听状态的...

  • iOS知识点总结<一>

    1、堆和栈的区别 (1)堆空间的内存是动态分配的,一般存放对象,并且需要手动释放内存(2)栈空间的内存有系统自动分...

  • iOS知识点总结<四>

    1、请简述什么是主键、什么是外键 主键: 一张表(关系)的一个列(睡醒)或多个列可以作为主键,但是前提是让这个列作...

  • iOS知识点总结<二>

    1、UITableView复用机制: UITableView通过重用单元格来达到节省内 存的目的:通过为每...

网友评论

    本文标题:<JavaScript>总结:知识点

    本文链接:https://www.haomeiwen.com/subject/ovnkjftx.html