原生JavaScript复习

原生JavaScript复习

目录:

常用的简单函数

1.1 一些调试常用的基本函数

JS常用的基础内置对象

2.1 String对象
2.2 Number对象
2.3 Math对象
2.4 Date对象
2.5 RegExp正则对象
2.6 JSON对象
2.7 Array对象

BOM浏览器模型常用方法

DOM文档模型常用函数

4.1 基本示例模型准备(必看)
4.2 元素节点操作(简单易懂的元素节点进行演示)
4.3 元素属性的增删查改
4.4 元素的增加和删除
4.5 事件

JS高级

5.1 Class对象的定义


常用的简单函数



1. 一些调试常用的基本函数


<!-- 常用方法 -->
<script>
    /**
     * string
     * Hello
     * undefined
     */
    var str = "Hello";
    console.log("Hello");
    console.log(typeof "Hello");
    delete str;
    console.log(str);
</script>

JS常用的基础内置对象



1. String对象


<!--String-->
<script>

    var str = "01234";
    /**
     * 匹配替换
     */
    // 通过正则表达式进行匹配
    console.log(str.match(/\d/i));
    // 字符串替换,但是仅仅替换一处
    console.log(str.replace(/\d/i,"m"));
    console.log(str.replace("1","m"));
    // 通过传入返回字符串的方法进行字符串替换
    console.log(str.replace("1",function () {
        return "hello";
    }));

    /**
     * 搜索、判断
     */
    // 搜索字符串第一个匹配的字符串的下标(如果有多个字符,以开头第一个匹配到的字符的下标为准)
    // 0
    console.log(str.search(/\d/));
    // 1
    console.log(str.search("12"));
    // -1 没有搜索到目标
    console.log(str.search("9"));

    // 通过char搜索
    console.log(str.indexOf('1'));
    console.log(str.lastIndexOf('1'));

    // 判断两个字符串是否相等,相等返回 0 ,不相等返回 -1
    console.log(str.localeCompare("01234"));
    console.log(str.localeCompare("0124"));

    /**
     * 获取
     */
    // 获取子串,等价于 substring
    // 12 不包括下标3的字符
    console.log(str.slice(1,3));
    console.log(str.substring(1,3));

    // 获取字符
    console.log(str.charAt(2));
    // 获取指定字符ASCLL码
    console.log(str.charCodeAt(0));
    // 拼接字符串
    console.log(str.concat(str, str));

    // 大小写转化
    console.log(str.toLowerCase());
    console.log(str.toUpperCase());

    // 直接通过下标获取
    console.log(str[2]);

    // 返回删除不可见字符的字符串
    console.log(str.trim());

</script>

2. Number对象


<!--Number-->
<script>
    console.log(Number.NaN);
    console.log(Number.MAX_VALUE);
    console.log(Number.MIN_VALUE);
</script>

3. Math对象


<!--Math-->
<script>
    console.log(Math.abs(-1));
    console.log(Math.max(1,2,3));
    console.log(Math.min(1,2,3));
    console.log(Math.pow(2,3));
    console.log(Math.random()*10);
</script>

4. Date对象


<!--Date-->
<script>
    var date = new Date();
    // 1593579815844
    console.log(date);
    // Wed Jul 01 2020 13:03:35 GMT+0800 (中国标准时间)
    console.log(Date.now());
    // 2020
    console.log(date.getFullYear());
    // 1593579815844
    console.log(date.getTime());
    // 6
    console.log(date.getUTCMonth());
    console.log(date.getMonth());

    // 2020/7/1 下午1:03:35
    console.log(date.toLocaleString());
    // Wed Jul 01 2020
    console.log(date.toDateString());
    // 13:03:35 GMT+0800 (中国标准时间)
    console.log(date.toTimeString());
</script>

5. RegExp正则对象


<!--RegExp-->
<script>
    // 两种定义方式
    var regExp = /\d/i;
    // var regExp = new RegExp("\d","i");
    console.log(regExp.exec("01234"));
    console.log(regExp.test("01234"));
</script>

6. JSON对象


<!--JSON-->
<script>
    // 将JSON字符串转化为JS对象
    var parse = JSON.parse('{"name":"zhangsan","age":27}');
    // {"name":"zhangsan","age":27}
    console.log(parse);
    // Object
    console.log(typeof parse);
    // zhangsan
    console.log(parse.name);
    // 27
    console.log(parse.age);

    // 将JS对象转化为JSON字符串
    var s = JSON.stringify(parse);
    // String
    console.log(typeof s);
    // {"name":"zhangsan","age":27}
    console.log(s);
</script>

7. Array对象


<!--Array-->
<script>
    var array = new Array();
    // 存入元素
    array.push(1, 2, 3, 4);
    // 遍历元素
    array.forEach(function (value, index, array) {
        console.log("数组下标: "+index+"  下标对应的值: "+value +" array: "+array);
    });


    /**
     * 数组下标: 0  下标对应的值: 2 array: 2,4,6,8
     * 数组下标: 1  下标对应的值: 4 array: 2,4,6,8
     * 数组下标: 2  下标对应的值: 6 array: 2,4,6,8
     * 数组下标: 3  下标对应的值: 8 array: 2,4,6,8
     *
     */
    // 对数组中的元素进行处理并且返回一个改变之后的数组
    var mapResult = array.map(function (value, index, array) {
            console.log("数组下标: "+index+"  下标对应的值: "+value +" array: "+array);
            return value*2;
        });
    mapResult.forEach(function (value, index, array) {
        console.log("数组下标: "+index+"  下标对应的值: "+value +" array: "+array);
    });


    /**
     * 数组下标: 0  下标对应的值: 3 array: 3,4
     * 数组下标: 1  下标对应的值: 4 array: 3,4
     */
    var filterArray = array.filter(function (value, index, array) {
        console.log("数组下标: "+index+"  下标对应的值: "+value +" array: "+array);
        return value > 2;
    });
    filterArray.forEach(function (value, index, array) {
        console.log("数组下标: "+index+"  下标对应的值: "+value +" array: "+array);
    });


    /**
     * 从下标 1 开始,然后进行自定义运算
     *
     * 数组下标: 0  下标对应的值: 1 array: 1,2,3,4
     * 数组下标: 1  下标对应的值: 2 array: 1,2,3,4
     * 数组下标: 2  下标对应的值: 3 array: 1,2,3,4
     * 数组下标: 3  下标对应的值: 4 array: 1,2,3,4
     */
    var reduceResult = array.reduce(function (previousValue,currentValue,index,array) {
        console.log(" previousValue: "+previousValue+" currentValue: "+currentValue+" index: "+index+" array: "+array);
        return previousValue+currentValue;
    });
    console.log(reduceResult);
</script>

BOM浏览器模型常用方法


<!--BOM(Windows\Location\History)-->
<script>
    // 警告框
    alert("Hello");
    // 输入框
    var resutl = prompt("Please input ","default string");
    // 选择框
    var result = confirm("Please choose");

    location.href;
    location.search;
    location.reload();

    history.back();
    history.forward();
    history.go(1);
</script>

DOM文档模型常用函数



1. 基本示例模型准备(必看)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的测试类</title>
</head>
<body>
    <nav>导航栏</nav>
    <aside id="myaside" class="val01 val02">侧边栏</aside>
    <article>文章</article>
    <footer>结尾</footer>
</body>
<script>
    // 基本元素的获取
    var html = document.getElementsByTagName("html")[0];
    var head = html.firstChild;
    var nav = document.getElementsByTagName("nav")[0];
    var aside = document.getElementsByTagName("aside")[0];
</script>
</html>

2. 元素节点操作(简单易懂的元素节点进行演示)


/**
 * 元素节点操作(针对最简单易懂的元素节点进行演示)
 */
// 节点的向上操作(找父母)
nav.parentElement;
// 节点的向下操作(找儿子)
nav.firstElementChild;
nav.lastElementChild;
// 节点的左右操作,同一等级的操作(找兄弟)
nav.nextElementSibling;
nav.previousElementSibling;

/**
 * 节点操作补充(包括了文本节点和属性节点)
 */
nav.previousSibling;
nav.nextSibling;
nav.parentNode;
nav.childNodes;

3. 元素属性的增删查改


/**
 * 元素属性的增删查改
 */
aside.id;
aside.id='1';
aside.className;
aside.className='cla';
aside.innerHTML;
aside.innerHTML = "innerContent";
aside.value;
aside.value = 'val';
aside.style.color;
aside.style.color='red';
// 查看所有属性
aside.attributes;

4. 元素的增加和删除


/**
 * 元素的增加和删除
 */
var div = document.createElement('div');
aside.appendChild(div);
aside.removeChild(div);

5. 事件


/**
 * 事件
 */
nav.onclick = function () {
    alert("nav is clicked !")
};

JS高级


1. Class对象的定义


function Person(name,age) {
    this.name = name
    this.age = age
    this.sayName =function () {
        console.log(this.name);
    }
}
var person = new Person("Lisi", 20);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值