【JS】JavaScript基础知识 笔记

目录

前言

简介

Hello World

弹框

写到控制台

数据类型

函数的定义和调用

定义

调用

DOM操作HTML

innerHTML

修改HTML的属性

获取和设置元素的属性

获取子节点和父节点

插入元素

DOM操作CSS

EventListener

事件对象

事件冒泡

怎么阻止事件冒泡

阻止事件默认行为

字符串对象

Date日期对象

一个自动刷新的小时钟

Array数组对象

Math对象

JS浏览器对象

window对象

history对象

screen对象

面向对象

一个简单的例子

利用函数构造器

面向对象


前言

虽然之前学习过js,但是忘得差不多了,之前学习的不够系统,且最近工作中要用到js方面的知识,所以系统的学习一下,记录笔记

简介

JavaScript是互联网上最流行的脚本语言,是一种动态类型、弱类型

JavaScript区分大小写

Hello World

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JSTest</title>
</head>
<body>
    <div>

    </div>
    <script type="text/javascript">
        document.write("Hello World");
    </script>
</body>
</html>

弹框

<script type="text/javascript">
    window.alert("Hello World");
</script>

写到控制台

<script type="text/javascript">
    console.log("Hello");
</script>

数据类型

var id = 6;//整型
var flo = 1.1;//浮点型
var isSuc = true;//布尔
var str = "str";//字符串
var list = new Array();//数组
var people = { id: 1001, name: "哈哈" };//定义一个对象

可以通过typeof()方法获取数据类型

返回值有:undefined,boolean,string,number,object,function

 

函数的定义和调用

定义

var Name = "haha";
function alertName(name) {
    alert("Name:" + name);
}

调用

<button onclick="alertName(Name)">get</button>

参数可以用js中定义的变量

 

DOM操作HTML

innerHTML

可以更改HTML元素的子元素

<body>
    <div id="content">
        test1
    </div>

    <script type="text/javascript">
        document.getElementById("content").innerHTML = "test2";
    </script>
</body>

修改HTML的属性

<body>
    <a id="aid" href="https://www.baidu.com">搜索</a>
    <button onclick="Test()">Tests</button>

    <script type="text/javascript">
        function Test() {
            document.getElementById("aid").href = "https://www.sogou.com/";
        }
    </script>
</body>

获取和设置元素的属性

<body>
    <div id="divId">
        <p  id ="pId" name="pName" title="pp"></p>
    </div>

    <script type="text/javascript">

        //获取元素的属性
        var p = document.getElementById("pId");

        var attr = p.getAttribute("title");

        alert(attr);//pp

        //设置元素的属性
        p.setAttribute("title", "pp2");

        attr = p.getAttribute("title");
        alert(attr);//pp2

    </script>
</body>

获取子节点和父节点

<body>
    <div id="divId">
        <p id ="pId"><a id="aId"></a></p>
    </div>

    <script type="text/javascript">

        var p = document.getElementById("pId");
        alert(p.childNodes[0].id);//aIs 获取子节点

        alert(p.parentNode.id);//divId 获取父节点

    </script>
</body>

插入元素

<body>
    <div id="divId">
        <p id ="pId"><a id="aId">aa</a></p>
    </div>

    <script type="text/javascript">


        var p = document.getElementById("pId");
        var a = document.getElementById("aId");
        //创建节点
        var aNew = document.createElement("a");

        aNew.text = "bb";
        //在p插入节点,在末尾插入
        //p.appendChild(aNew);

        p.insertBefore(aNew, a);//在p插入节点,在a元素之前插入aNew

    </script>
</body>

 

DOM操作CSS

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JSTest</title>
    <style type="text/css">
        #divId {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="divId"></div>
    <button onclick="Test()">Tests</button>

    <script type="text/javascript">
        function Test() {
            document.getElementById("divId").style.backgroundColor = "red";
        }
    </script>
</body>
</html>

修改背景色

 

EventListener

<body>
    <div id="divId">haha</div>

    <button id="btnId">Tests</button>

    <script type="text/javascript">

        var btn = document.getElementById("btnId");
        //添加事件绑定,能绑定多个事件
        btn.addEventListener("click", btn_Click);

        function btn_Click() {
            alert("aa");
        }

        //移除绑定
        //btn.removeEventListener("click", btn_Click);

        //只能绑定一个事件
        //btn.onclick = function () {
        //    alert("aaa");
        //}
    </script>
</body>

 

事件对象

function btn_Click(e) {
    alert(e.type);//获取事件类型 click
    alert(e.target)//获取事件对象  object HTMLButtonElement
}

 

事件冒泡

当点击按钮时会触发button的btn_Click事件,然后也会触发div的div_Click事件,就是一直往上级节点触发

<body>
    <div id="divId">
        <button id="btnId">Tests</button>
    </div>

    <script type="text/javascript">

        var btn = document.getElementById("btnId").addEventListener("click", btn_Click);

        function btn_Click(e) {
            alert("btn");
        }

        var div = document.getElementById("divId").addEventListener("click", div_Click);

        function div_Click() {
            alert("div");
        }

    </script>
</body>

怎么阻止事件冒泡

在按钮事件中添加stopPropagation方法

function btn_Click(e) {
    alert("btn");
    e.stopPropagation();
}

阻止事件默认行为

比如点击链接时,会自动跳转到链接,

<a id="aId" href="http://www.baidu.com">test</a>

preventDefault阻止事件默认行为,这样点击了链接也不会跳转

var a = document.getElementById("aId").addEventListener("click", a_Click);

function a_Click(e) {
    e.preventDefault();
}

 

字符串对象

var str = "Hello World";

document.write(str.length);//length 获取字符串长度
document.write(str.indexOf("e"));//indexOf 获取字符串位置,匹配到的第一个(索引从0开始)
document.write(str.match("Hello"))//匹配字符串,有则返回字符串Hello,没有则返回null
document.write(str.replace("World", "haha"))//替换字符串
document.write(str.toLowerCase())//字符串全部转为小写
document.write(str.toUpperCase())//字符串全部转为大写

var str1 = "aa,bb,cc";
var s = str1.split(",");//split 字符串分割
document.write(s[0]);

 

Date日期对象

var date = new Date();
document.write(date);

document.write(date.getFullYear());//获取年份
document.write(date.getTime());//获取毫秒数

date.setFullYear(2020);//设置时间

一个自动刷新的小时钟

<body>
    <div id="divId">

    </div>

    <script type="text/javascript">

        startTime();

        function startTime() {
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            m = checkTime(m);
            s = checkTime(s);

            var strDate = h + ":" + m + ":" + s;

            var div = document.getElementById("divId").innerHTML = strDate;

            //每一秒刷新一次
            setTimeout(function () {
                startTime()
            },1000)
        }

        //时间格式化
        function checkTime(i) {
            if (i < 10)
                i = "0" + i;
            return i;
        }

    </script>
</body>

 

Array数组对象

<script type="text/javascript">

    //定义数组
    var arrayA = ["aa", "bb", "cc"];
    var arrayB = ["dd", "ee"];

    var arrayC = arrayA.concat(arrayB);//数组合并

    arrayB.push("ff");//数组追加

    arrayB.reverse();//数组翻转

    var arraySort = ["a", "e", "d", "c", "b"]
    //升序
    var arraySortAfter = arraySort.sort();
    //倒序
    var arraySortAfterDesc = arraySort.sort((a, b) => b - a);//a - b 升序, b - a 倒序


</script>

 

Math对象

<script type="text/javascript">

    document.write(Math.round(2.6));//四舍五入

    document.write(Math.random());//随机数 0-1

    document.write(parseInt(Math.random() * 10)); //随机数 0 - 10

    document.write(Math.max(2, 5, 1, 3))//max获取最大值,min获取最小值

    document.write(Math.abs(-10))//绝对值

</script>

 

JS浏览器对象

 

window对象

计时器

setInterval 间隔指定的毫秒数不停地执行指定代码
clearInterval 停止setInterval方法

setTimeout 暂停指定毫秒数后执行指定的代码
clearTimeout 停止setTimeout方法

<body>
    <div id="divId">
        <p id ="pId"></p>
        <button id="btnId">stop</button>
    </div>

    <script type="text/javascript">

        var myTime = setInterval(function () {
            getTime();
        }, 1000);

        function getTime() {
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("pId").innerHTML = t;
        }

        document.getElementById("btnId").onclick = stopTime;

        function stopTime() {
            clearInterval(myTime)
        }

    </script>
</body>

history对象

history.back();//相当于点击浏览器的后退按钮
history.forward();//相当于点击浏览器的向前按钮
history.go(-1);//进入历史中某个页面,-1表示进入上一个页面

screen对象

screen.availHeight//屏幕可用高度
screen.height//屏幕高度

面向对象

一个简单的例子

<script type="text/javascript">

    var people= {
        id: 1001,
        name: "haha",
        age: 18,
        eat: function () {
            alert("eat");
        }
    }

    alert(people.name);

</script>

利用函数构造器

<script type="text/javascript">

    function People() {
    }

    People.prototype = {
        name:"haha",
        age: 18,
        eat: function () {
            alert("eat");
        }
    }

    var p = new People();

    alert(p.name);

</script>

面向对象

<script type="text/javascript">

    function People(name) {
        this.Name = name;
    }

    People.prototype.eat = function () {
        alert(this.Name + "eat");
    }

    function Student(name) {
        this.Name = name;
    }

    //Student继承自People
    Student.prototype = new People();
    var peoEat = Student.prototype.eat;
    //重写eat
    Student.prototype.eat = function () {
        peoEat.call(this);//调用父类的方法
        alert(this.Name+ "stu_eat");
    }
    //创建student对象
    var s = new Student("haha");

    s.eat();

</script>

 

 

未完...

相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页