JavaScript_javascript 博客-CSDN博客

本文链接：https://blog.csdn.net/st03zy/article/details/142032464

js基本类型

1,在js中有基本类型(string,number,boolean,null,undefined,Symbol),和对象类型

Function,Array,Date,Regexp.

对象类型中除了以上的，还可以使用Object来自定义对象类型。

2. 定义方式三种：

- 第一种：使用{}

- 第二种：使用Object关键字

- 第三种：使用函数模拟构造器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js的Object类型的应用</title>
</head>

<body>

</body>
<script>

    var age;
    function f1() {
        console.log(1 + 2);
    }
    var emp = {
        "name": "zhangsan",
        age: 21,   // 属性名可以使用变量。
        "gender": "男",
        "sayHi": function () {
            console.log(this.name + "说:我今年" + this.age + "岁");
        },
        "sum": f1
    }
    //访问对象的属性和方法
    console.log(emp.name);
    console.log(emp["age"]);
    console.log(emp['age']);
    console.log(emp.sayHi); //调用方法时，如果不带(), 其实就是调用属性，将函数当成值进行显示
    console.log(emp.sayHi()); //调用方法时，应该带上(),才会执行函数的逻辑体
    emp.sum()



    //使用object定义
    var student = new Object();
    //使用变量来绑定对象的属性和方法
    student.name = "michael"
    student.age = 17
    student.study = function () { console.log(this.name + "喜欢学习到深夜") }
    student.sleep = function () { console.log(this.name + "喜欢在白天睡觉") }

    //调用
    console.log(student.name);
    console.log(student.age);
    console.log(student.study);
    student.study();


    //第三种方式模拟构造器
    function Teacher(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.intro = function () {
            console.log(this.name + "," + this.age + "," + this.gender)
        };
        this.getResult = function (a, b) {
            return a + b;
        }
    }
    var t1 = new Teacher("lucy", 15, 'f');
    console.log(t1);
    console.log(t1.name);
    console.log(t1.getResult(2, 3));
    console.log(t1.getResult);
</script>

</html> `

json字符串JS对象互相转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="f1()">json字符串(js对象/js数组)转成JS对象</button>
    <button onclick="f2()">JS对象转成json字符串(js对象/js数组)</button>
</body>
<script>
    function f2() {
        var age;
        var teacher = { "name": "王大锤", age: 21, "friends": ["王老大", "张老二"], "sayHi": function () { console.log("你好"); } }
        console.log(teacher.name);
        console.log(teacher.friends[1]);
        teacher.sayHi();
        //将js对象teacher，转成JSON字符串， 调用内置的函数：JSON.stringify(),将js对象传入即可
        var JSONStr = JSON.stringify(teacher);
        console.log(typeof JSONStr);
        console.log(JSONStr);
        console.log(teacher);

    }



    function f1() {

        //使用json格式的字符串
        var student = '{"name":"michael","age":21,"hobby":["book","music"]}';
        console.log(typeof student); //string
        //获取字符串里的michael子串。
        var str1 = student.substring(9, 16);
        console.log(str1);
        //将json字符串转成js对象：  JSON.parse()  ,只需要将json字符串传入到()里，即可
        var jsObject = JSON.parse(student);
        console.log(typeof jsObject);
        //访问属性
        console.log(jsObject.name);
        console.log(jsObject.hobby[0]);
        console.log(jsObject.hobby[1]);
    }
</script>

</html>

关系运算符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    var a = 10;
    var b = 25;
    var r1 = a + b;
    var r2 = a - b;
    var r3 = a * b;
    var r4 = b / a;
    var r5 = a % b;
    var r6 = a++;
    var r7 = --b;
    console.log(r1, r2, r3, r4, r5, r6, r6);

    //关系运算符： > >=, <,<=, ==,!=,===,!==
    var x1 = 4;
    var x2 = 5;
    var re1 = x1 == x2;
    console.log(re1);
    var re2 = x1 != x2;
    console.log(re2);
    // 全等： 判断值与类型， 值和类型一样时，才会返回true
    var m1 = "t";
    var n1 = 2;
    var re3 = m1 === n1;
    // 不全等：  判断值与类型， 只要有一个不一样，就返回true.
    var re4 = m1 !== n1;
    console.log(re3, re4);
    console.log(m1 == n1);

    //支持三目运算符
    var re5 = x2 < x1 ? "王大锤" : "张三";
    console.log(re5);

    //逻辑运算符
    var a = 1;
    var b = 2;
    var c = 3;
    var d = 4;
    //先验证&&
    var r1 = a > b && c++ < d;
    console.log(r1, c);  //false 3

    //再验证||
    var r1 = a < b || c < d++;
    console.log(r1, d);  // true  4
</script>

</html>

window的对话框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="testAlert()">测试alert框： 用于提示警告</button>
    <button onclick="testConfirm()">测试确认框: 有确认和取消按钮的提示框</button>
    <button onclick="testPrompt()">测试输入框</button>
</body>
<script>
    function testAlert() {
        window.alert("hello world"); //会阻塞后续的代码执行
        alert("hello js");
        var name = "高圆圆";
        alert(name)
        console.log("zhangsan");  //将内容打印到调试界面的控制台上
    }
    function testConfirm() {
        var f = window.confirm("你确定要提交吗")
        if (f) {
            console.log("正在向服务器提交数据....");
        } else {
            console.log("不提交了....");
        }
    }
    function testPrompt() {
        //输入框：  第一个参数是提示文字，第二个参数是输入框里的默认值。
        var username = prompt("请输入用户名", "zhangsan")
        //输入框有确认和取消按钮， 确认表示提交输入框里的信息并返回，可能是具体值，也可能是
        // 空字符串。  取消按钮提交的null
        console.log(username)
    }
</script>

</html>

window的history和location

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="f1()">history</button>
    <button onclick="f2()">location</button>
</body>
<script>
    /*
      location: window的一个属性对象,用来表示浏览器的地址信息
     */
    function f2() {
        console.log(window.location);
        //获取具体的url及其属性
        console.log(location.href);
        console.log(location.hostname);
        console.log(location.pathname);
        console.log(location.protocol);

        //修改href的值，跳转到对应的网页地址
        location.href = "http://www.baidu.com"
    }


    /*
        history是window的一个属性对象。用来表示浏览器访问的历史记录
    */
    function f1() {
        var his = window.history;
        console.log(his);
        //向前
        //his.forward(); //相当于浏览器的向右箭头
        //向后
        //his.back();  //相当于浏览器的向左箭头
        his.go(-1); //-1 表示后退， 1表示前进，0表示刷新
    }


</script>

</html>

window的screen和navigator

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 从window上获取screen屏幕对象
    console.log(window.screen.availHeight);
    console.log(window.screen.availWidth);
    console.log(window.screen.height);
    console.log(window.screen.width);
    console.log(window.screen.colorDepth); //色彩深度
    console.log(window.screen.pixelDepth); //色彩分辨率
    //
    console.log(navigator.userAgent);
</script>

</html>

window的计时事件方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="testSetTimeOut()">一次性时钟：让代码延迟指定的毫秒数后再执行</button>
    <button onclick="testClearTimeOut()">在执行前，取消一次性时钟</button>
    <button onclick="testSetInterval()">周期性时钟：指定间隔的毫秒数重复的执行</button>
    <button onclick="testClearInterval()">取消周期性时钟</button>
    <p id="p1"></p>
</body>
<script>
    var l;
    function testSetTimeOut() {
        /*  setTimeout(timeHandler,delay)
                第一个参数：timeHandler，  要执行的代码逻辑，可以是一个函数。
                第二个参数：delay,  指定的延迟时间，单位是毫秒。
         */
        l = window.setTimeout(function () {
            console.log("hello world")
        }, 3000)
    }
    function testClearTimeOut() {
        /* 一次性时钟，是可以在执行前进行取消的操作的
                */
        window.clearTimeout(l)
    }

    var p =document.getElementById("p1");

    var intervalTime;
    function testSetInterval() {
        /*
            setInterval(timeHandler,period)
            第一个参数：timeHandler，  要重复执行的代码逻辑，可以是一个函数。
            第二个参数：间隔时间，单位是毫秒
        */
        intervalTime = setInterval(function () {
            var d = new Date();
            var hour = d.getHours();
            var minute = d.getMinutes();
            var second = d.getSeconds();
            var time = hour + ":" + minute + ":" + second;
            p.innerText = time;
        }, 1000)
    }
    function testClearInterval() {

        window.clearInterval(intervalTime);
    }
</script>

</html>

document

1. js将整个HTML文档封装到了一个window的属性document里。在document里面维护了一个树形的层次结构。在这个结构中保存了HTML的所有元素及其元素的属性和文本。

2. 可以使用document来查找想要的节点

- 通过id ： getElementById( id值 )

- 通过标签名: getElementsByTagName( 标签名)

- 通过class名： getElementsByClassName( 类名)

- 通过层次结构:

-- parentNode/parentElement: 返回的是当前节点的父节点

-- childNodes: 获取的节点个数以及节点，与换行有关系。

-- children: 会返回真正的子元素节点。

-- firstChild/firstElementChild

-- lastChild/lastElementChild

-- previousSibling/previousElementSibling

-- nextSibling/nextElementSibling

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <p class="c1">我是一个段落1</p>
        </div>
        <div id="d3">
            <input id="in1" class="c1" type="text" value="zhangsan">
            <p>我是一个段落2</p>
        </div>
        <div id="d4">

        </div>
    </div>
</body>
<script>
   
    // js里返回的都是对象
    var input = document.getElementById("in1");
    console.log(input); //  整个元素信息，包括属性，文本，子元素
    console.log(input.value);
    input.value = "lisi";

    //通过标签名查找
    var ps = document.getElementsByTagName("p");
    console.log("长度：" + ps.length);
    console.log(ps[0].innerText);
    console.log(ps[1].innerText);
    ps[0].innerText = "我是michael"
    console.log(ps[0].nodeName);
    console.log(ps[0].nodeType);
    console.log(ps[0].nodeValue);
    console.log(ps[0].innerHTML);

    var d3 = document.getElementById("d3");
    console.log(d3.innerText);
    console.log(d3.innerHTML);

    //通过类名获取节点
    var cs = document.getElementsByClassName("c1");
    console.log(cs.length);
    console.log(cs[0].nodeName);
    console.log(cs[1].nodeName);

    //通过层次关系查找元素：
    var input1 = document.getElementById("in1");
    var parent = input1.parentElement
    console.log(parent.nodeName);
    //parent.innerHTML = "<button>按钮</button>"

    //获取parent这个节点对象的所有孩子
    var cs = parent.childNodes
    console.log(cs.length);
    console.log(cs);
    var cs2 = parent.children;
    console.log(cs2.length);
    console.log(cs2);

    //var c3 = parent.firstChild
    var c3 = parent.firstElementChild
    console.log(c3.nodeName);
    console.log(c3);

    //var c4 = parent.lastChild
    var c4 = parent.lastElementChild
    console.log(c4.nodeName);
    console.log(c4);

    console.log("------------------------------")
    //查找兄弟
    var div3 = document.getElementById("d3");
    //var brother1 = div3.previousSibling
    var brother1 = div3.previousElementSibling
    console.log(brother1);
    console.log(brother1.nodeName);

    //var brother2 = div3.nextSibling
    var brother2 = div3.nextElementSibling
    console.log(brother2);
    console.log(brother2.nodeName);
</script>

</html>

DOM的创建节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1 {
            border: 1px solid red;
            width: 500px;
            height: 500px;
        }

        #d2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        #d3 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        /* window的onload事件 可以绑定一个匿名函数。在函数里面写代码逻辑。
           执行时机：  当整个HTML被浏览器加载完毕后，才会执行该onload事件。
        */
        window.onload = function () {
            var p = document.createElement("p");
            p.setAttribute("id", "p1")
            p.setAttribute("class", "c1")
            var text = document.createTextNode("我是一个段落");
            p.appendChild(text);
            console.log(p);

            //定位d2元素
            var d2 = document.getElementById("d2");
            // appendChild(newNode):  添加到父节点中的最后一个子节点后。
            d2.appendChild(p)


            var p1 = document.createElement("p");
            p1.setAttribute("name", "myP")
            var txt = document.createTextNode("锄禾日当午")
            p1.appendChild(txt)
            //将p1插入到d3前面。  // insertBefore(newNode,reNode):  
            var d1 = document.getElementById("d1")
            var d3 = document.getElementById("d3");
            d1.insertBefore(p1, d3);

        }
    </script>
</head>

<body>
    <div id="d1">
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>


</html>

DOM的替换和删除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //创建一个新的span节点
            var span = document.createElement("span");
            var txt = document.createTextNode("用户名已经被占用")
            span.appendChild(txt);
            //获取父节点
            var d2 = document.getElementById("d2");
            var p1 = document.getElementById("p1")
            //进行替换操作
            d2.replaceChild(span, p1)


            //移除d2这个节点
            var d1 = document.getElementById("d1")
            d1.removeChild(d2)

            //获取d1里的属性值
            var name = d1.getAttribute("name");
            console.log(name);

            //移除d1里的class属性
            d1.removeAttribute("class")

        }
    </script>
</head>

<body>
    <div id="d1" class="c1" name="n1">
        <div id="d2">
            <p id="p1">我是一个段落</p>
        </div>
    </div>
    <form action="">

    </form>
    <form action=""></form>
</body>

</html>

事件模型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var bn2 = document.getElementById("bn2");
            //使用DOM0级方式绑定事件
            bn2.onclick = function () {
                alert(Math.pow(2, 3));
            }
            //如果DOM0事件，连续绑定相同的事件，会进行覆盖
            bn2.onclick = function () {
                alert(Math.pow(3, 3));
            }

            //使用DOM2级方式绑定事件
            var bn3 = document.getElementById("bn3");
            bn3.addEventListener('click', function () {
                alert("DOM2级绑定事件使用addEventListener方法")
            })
            //DOM2级方式，连续绑定相同的事件，不会出现覆盖情况
            function f2() {
                alert("hello world")
            }
            //绑定事件时，如果设置的是有名字的函数，不要带括号。
            bn3.addEventListener('click', f2)
            //取消DOM2级事件，  当初绑定的事件处理函数，必须有名字，才能取消。
            bn3.removeEventListener("click", f2)

        }
    </script>
</head>

<body>
    <button onclick="alert('我是按钮')">DOM0级：HTML里添加事件</button>
    <button id="bn2">DOM0级：在script标签里添加事件</button>
    <button id="bn3">DOM2级：在script标签里添加事件</button>
</body>

</html>

event对象的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div onclick="f1(1,event)">我是一个div</div>
    <div onclick="f2()">
        <p onclick="f3(event)">
            <a href="http://www.baidu.com" onclick="f4(event)">我是一个链接</a>
        </p>
    </div>
</body>
<script>
    /* event:  该对象是在事件触发式，自动产生的
       如何使用该对象：  将event这个值，赋值给形参即可。 形参名可以是任何名字
    */
    function f1(a, e) {
        // target： 事件源那个元素对象
        console.log(e.target.nodeName);
        console.log(e.currentTarget.nodeName);
        //事件的名称
        console.log(e.type)
        console.log(e.clientX, e.clientY);
        console.log(e.cancelable);
    }
    function f2() {
        console.log("div");
    }
    function f3(event) {
        console.log("p");
        event.cancelBubble = true;
    }
    function f4(event) {
        console.log("a");
        event.preventDefault();
        event.stopPropagation();



    }
</script>

</html>