添加一个节点


<body>
    <div id="parent">
        <div id="node"></div>
        <button onclick="clickHandle()">点击</button>
        <button onclick="clickHandle2()">添加</button>
    </div>
</body>
<script>
    //在node里添加一个p节点
    function clickHandle(){
        var node = document.getElementById("node");
        var p = document.createElement("p");
        var content = document.createTextNode("hello world");
        p.appendChild(content);
        node.appendChild(p);
    }
    //在parent里但在node前添加节点
    function clickHandle2(){
        var parent = document.getElementById("parent");
        var node = document.getElementById("node");
        var p = document.createElement("p");
        var content = document.createTextNode("在parent里node前添加内容");
        p.appendChild(content);
        parent.insertBefore(p,node);
    }
</script>

运行结果：

删除一个节点


xxxxxxxxxx
<body>
    <button onclick="clickHandle()">点击</button>
    <div id="parent">
        <div id="node">
            <p>hello world</p>
        </div>
    </div>
</body>
<script>
    //删除一个p节点
    function clickHandle(){
        var parent = document.getElementById("parent");
        var node = document.getElementById("node");
        parent.removeChild(node);
    }
</script>

删除前

删除后

操作节点样式


xxxxxxxxxx
<body>
    <button onclick="clickHandle()">点击</button>
    <div id="parent">
        <div id="node">
            <p>hello world</p>
        </div>
    </div>
</body>
<script>
    //操作节点样式
    function clickHandle(){
        var node = document.getElementById("node");
        node.style.color = "red";
        node.style.backgroundColor = "blue";
        node.style.fontSize = "20px";
        node.style.border = "1px solid red";
        node.style.borderRadius = "5px";
        node.style.padding = "10px";
        node.style.margin = "10px";
        node.style.textAlign = "center";
        node.style.lineHeight = "30px";
        node.style.textDecoration = "none";
        node.style.textTransform = "capitalize";
    }
</script>

运行结果：

对象动态添加删除方法和属性


x
<script>
    function speak(msg){
        alert(msg);
    }
    //动态添加方法和属性
    var a = new Object();
    a.name = "张三";
    a.function = speak;
    a.function("hello world, my name is " + a.name);

    //动态删除方法和属性
    //方式一 给属性和方法赋值为null或者undefined
    // a.name = null;
    // a.function = null;
    // a.function("hello world, my name is " + a.name);

    //方式二 使用delete
    delete a.name;
    delete a.function;
    a.function("hello world, my name is " + a.name);
</script>

运行效果：

动态添加：

动态删除后不在显示。

创建对象

第一种方法


xxxxxxxxxx
<script>
    var people = {
        name: "张三",
        age: 18,
        sex: "男",
        speak: function(msg){
            document.write(msg + "<br/>");
        }
    }
    document.write(people.name + "<br/>");
    document.write(people.age + "<br/>");
    people.speak("hello world");
</script>

运行结果:

第二种使用new Object()创建对象


xxxxxxxxxx
<script>
    var people2 = new Object();
    people2.name = "李四";
    people2.age = 20;
    people2.sex = "男";
    people2.speak = function(msg){
        document.write(msg + "<br/>");
    }
    document.write(people2.name + "<br/>");
    document.write(people2.age + "<br/>");
    people2.speak("hello world");
</script>

运行结果：

第三种使用构造方法创建对象可以解决上面两种创建对象方法每次只能创建一个对象的缺点


xxxxxxxxxx
<script>
    function Person(name,age){
        this.name = name;
        this.age = age;

        //还可以写内置方法
        this.speak = function(msg){
            return msg;
        }
    }
    var zhangsan = new Person("张三",18);
    alert(zhangsan.name + "-" + zhangsan.age + '-' + zhangsan.function("hello world"));
</script>

运行结果：

String字符串对象的操作


xxxxxxxxxx
<script>
    var str1 = "实例化字符串方式一";
    var str2 = new String("实例化字符串abc方式二");
    document.write(str1 + "<br>");
    document.write(str2 + "<br>");
    document.write(str2 + "的长度是：" + str2.length + "<br>");
    document.write(str2.indexOf("abc",0) + "<br>");
    document.write(str2.replace("abc","java1010") + "<br>");
</script>

运行结果：

统计字符串每个字符出现的次数


xxxxxxxxxx
<script>
    //统计字符串中每个字符出现的次数
    str = "abcoefoxyozzopp";
    obj = {};
    for(var i=0; i<str.length;i++){
        if(obj[str[i]]){
            obj[str[i]]++;
        }else{
            obj[str[i]] = 1;
        }
    }
    console.log(obj);
</script>

运行结果：

统计字符串中o出现的次数和位置


xxxxxxxxxx
<script>
    //统计字符串中o出现的次数和位置
    str = "abcoefoxyozzopp";
    var strCount = 0;
    var i = str.indexOf("o");
    while(i != -1){
        document.write(i + "<br>");
        strCount++;
        i = str.indexOf("o",i+1);
        
    }
    document.write("o的个数为：" + strCount + "<br/>");
</script>

Date日期对象的操作


xxxxxxxxxx
<script>
    var date = new Date();
    document.write(date.getTime() + "<br/>"); //获取时间戳从1970年1月1日00:00:00开始的毫秒数
    document.write(date.getFullYear() + "<br/>"); //获取完整的年份,如：2019
    document.write(date.getMonth()+1 + "<br/>"); //0-11的月份，需要加1
    document.write(date.getDate() + "<br/>"); //获取当前日
    var today = date.getFullYear() +"年" + (date.getMonth()+1) +"月" + date.getDate() +"日";
    document.write(today + "<br/>");
    document.write(date.getHours() + "<br/>"); //获取当前小时
    document.write(date.getMinutes() + "<br/>"); //获取当前分钟
    document.write(date.getSeconds() + "<br/>"); //获取当前秒
    today = date.getFullYear() +"年" + (date.getMonth()+1) +"月" + date.getDate() +"日" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    document.write(today + "<br/>");
    var day = date.getDay();
    var week;
    switch(day){
        case 0:
            week = "星期天";
            break;
        case 1:
            week = "星期一";
            break;
        case 2:
            week = "星期二";
            break;
        case 3:
            week = "星期三";
            break;
        case 4:
            week = "星期四";
            break;
        case 5:
            week = "星期五";
            break;
        case 6:
            week = "星期六";
            break;
        default:
            week = "星期天";
            break;
    }
    document.write(week + "<br/>"); //获取当前星期
    today = date.getFullYear() +"年" + (date.getMonth()+1) +"月" + date.getDate() +"日 " + week +" "+ date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
    document.write(today + "<br/>");
</script>

运行结果：

Array数组对象的操作


xxxxxxxxxx
<script>
    var arr = new Array(); // 第一种方式  可变长度
    var arr2 = new Array(3); //第二种方式  固定长度
    var arr3 = ["张三","李四","王五"] //第三种方式  直接创建
    arr[0] = "zhangsan";
    arr[1] = "lisi";
    arr[2] = "wangwu";
    arr[3] = "zhaoliu";
    arr[4] = "qianqi";

    arr2[0] = 2;
    arr2[1] = 1;
    arr2[2] = 5;

    document.write("arr = [" + arr + "]<br>");
    document.write("arr2 = [" + arr2 + "]<br>");
    document.write("<hr/>");
    document.write("arr数组的for循环遍历:<br>");
    for(var i = 0; i < arr.length; i++){
        document.write(arr[i] + "<br>");
    }
    document.write("<hr/>");
    document.write("arr2数组的for in循环遍历:<br>");
    for(var j in arr2){
        document.write(arr2[j] + "<br>");
    }
    document.write("<hr/>");
    document.write("arr.sort(): " + arr.sort() + "<br>"); //排序
    document.write("arr2.sort(): " + arr2.sort() + "<br>"); 
    document.write("<hr/>");
    document.write("arr.join(): " + arr.join() + "<br>"); //转成字符串默认按照,连接
    document.write("arr2.join('.'): " + arr2.join(".") + "<br>"); //转成字符串按照.连接
    document.write("<hr/>");
    document.write("arr.concat(arr2): " + arr.concat(arr2) + "<br>"); //数组连接
    document.write("<hr/>");
    document.write("arr.reverse(): " + arr.reverse() + "<br>"); //数组反转
</script>

运行结果：

常用函数

javascript全局函数

decodeURI() 解码某个编码的URL
decodeURIComponent() 解码一个编码的URL组件
encodeURI() 把字符串编码为URL
encodeURIComponent() 把字符串编码为URL组件
escape() 对字符串进行编码
unescape() 对字符串进行解码

eval() 计算js字符串,并把它作为脚本代码来执行


xxxxxxxxxx
<script>
    var a = "1+2+3+4";
    var val = eval(a);
    alert(val);
</script>

运行结果：

isFinite() 判断某个值是否为有穷大的数
isNaN() 判断某个值是否为非数字
Number() 把对象值转换为数字
parseFloat() 解析一个字符串并返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
String() /toString()把对象值转换为字符串

JavaScript中Window对象常用方法

弹窗

alert() 显示一个消息框

confirm() 显示一个带有确认和取消按钮的消息框


xxxxxxxxxx
<script>
    var i = confirm("是否确认删除？");
    if(i == true){
        document.write("你点击了确认");
    }else{
        document.write("你点击了取消");
    }
</script>

prompt() 显示一个带有输入框的消息框


xxxxxxxxxx
<script>
    var name = prompt("请输入你的名字");
    document.write("你好，" + name);
</script>

定时函数

window.setTimeout() 定时执行某个函数执行一次


xxxxxxxxxx
<script>
    function fun(){
        alert("hello world");
    }
    //3秒后执行
    window.setTimeout(fun,3000);
</script>

window.setInterval() 定时执行某个函数执行多次


xxxxxxxxxx
<body>
    <p id="nowTime"></p>
</body>
<script>
    function fun(){
        var date = new Date();
        today = date.getFullYear() +"年" + (date.getMonth()+1) +"月" + date.getDate() +"日" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        document.getElementById("nowTime").innerHTML = today;
    }
    //1秒执行1次
    window.setInterval("fun()",1000);
</script>

打开页面函数

open() 打开一个新页面


xxxxxxxxxx
<script>
    window.open("https://www.xiaoyangtongzhi.cn");
</script>

运行结果：在新的页面打开指定网址

JavaScript中Window对象常用事件

Window.onload() 当页面加载完成时触发


xxxxxxxxxx
<script>
    //网页加载完毕后执行
    window.onload = function(){
        alert("文档加载完毕");
    }
</script>

Window.onresize() 当窗口大小改变时触发


xxxxxxxxxx
<script>
    //窗口大小发送改变时执行
    window.onresize = function(){
        alert("窗口大小改变");
    }
</script>

常用内置对象(Math Date Array String)

推荐查阅网址MDN https://developer.mozilla.org/zh-CN/

Math Date Array String(不可变)

Math常用的方法

Math.abs() 返回一个数的绝对值
Math.ceil() 返回一个数的上舍入值
Math.floor() 返回一个数的下舍入值
Math.max() 返回一组数中的最大值
Math.min() 返回一组数中的最小值
Math.pow() 返回一个数的次方
Math.random() 返回0到1之间的随机数
Math.round() 返回一个数的四舍五入值
Math.sqrt() 返回一个数的平方根
Math.PI 返回圆周率

Date常用的方法

Date() 创建Date对象
- getFullYear() 获取完整的年份,如：2019
- getMonth() 获取月份,0-11,需要加1
- getDate() 获取当前日
- getHours() 获取当前小时
- getMinutes() 获取当前分钟
- getSeconds() 获取当前秒
- getDay() 获取星期,0-6,需要加1
- getMilliseconds() 获取当前毫秒
- getDay() 获取星期,0-6,需要加1
Date.now() 获取当前时间戳
Date.parse() 将字符串转换为时间戳
Date.UTC() 获取指定时间的UTC时间戳

Array常用方法

push() 在数组末尾添加一个或多个元素
pop() 删除数组末尾的元素
shift() 删除数组开头的元素
unshift() 在数组开头添加一个或多个元素
splice() 删除数组指定位置的元素
sort() 对数组元素进行排序
reverse() 数组元素倒序
filter() 筛选数组元素
concat() 连接两个或多个数组
slice() 从一个或多个数组中提取元素
join() 连接数组元素
indexOf() 查找数组元素的索引
lastIndexOf() 查找数组元素的倒序索引
includes() 查找数组元素是否包含某个值
every() 判断数组元素是否都符合条件
some() 判断数组元素是否至少有一个符合条件
forEach() 遍历数组元素
map() 对数组元素进行转换
find() 查找符合条件的数组元素
findIndex() 查找符合条件的数组元素的索引
length 数组长度

String常用方法

charAt(index) 获取指定位置的字符
charCodeAt(index) 获取指定位置的字符的编码
str[index] 获取指定位置的字符H5新增的
concat(str1,str2,str3) 连接多个字符串
indexOf(str) 获取指定字符串在字符串中首次出现的位置
lastIndexOf(str) 获取指定字符串在字符串中最后一次出现的位置
match(reg) 获取指定正则表达式匹配到的字符串
replace(reg,str) 替换指定字符串，只会替换第一个位置字符
search(reg) 获取指定正则表达式匹配到的字符串
slice(start,end) 获取指定位置的子字符串
split(str) 将指定字符串分割成数组
substr(start,len) 获取指定位置的子字符串
substring(start,end) 获取指定位置的子字符串
toLowerCase() 将字符串转换成小写
toUpperCase() 将字符串转换成大写
trim() 去除字符串两边的空格
trimLeft() 去除字符串左边的空格
trimRight() 去除字符串右边的空格
valueOf() 获取字符串的值
length 字符串的长度

arguments获取参数


xxxxxxxxxx
<script>
    //如果不知道函数里有多少参数会传回，则可以使用arguments来获取参数
    function func1(a, b, c) {
        console.log(arguments[0]);
        // Expected output: 1
        console.log(arguments[1]);
        // Expected output: 2
        console.log(arguments[2]);
        // Expected output: 3
    }
    func1(1, 2, 3);
</script>

instanceof属性判断

例如检测是否为数组


xxxxxxxxxx
<script>
    arr1 = [1,2,3,4,5,6,7,8,9,10];
    console.log(arr1 instanceof Array);    //true
    console.log(arr1 instanceof String);   //false
    console.log(arr1 instanceof Object);   //true
    console.log(arr1 instanceof Number);   //false
    console.log(arr1 instanceof Boolean);  //false
    console.log(arr1 instanceof Function); //false
    console.log(arr1 instanceof Date);     //false
</script>