javascript笔记(函数--监听事件)

函数:

函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块。

函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词function。

不带参数:

声明函数：

function 函数名(){
    // 执行代码
}

<script>
    // 创建名字为myFun的函数
    function myFun(){
        document.write("hello word");
    };
    // 调用函数，或this.myFun();
    myFun();
</script>

调用函数:

函数名()：一创建的函数名+小括号

带参数(传参):

声明函数：

function myFunction(var1,var2){
    // 代码
}

声明时的参数一般称为形参。

<script>
    // 创建名字为myFun的函数，带有参数名为str
    function myFun(str){
        document.write(str+"hello word");
    };
    // 调用函数并传参
    myFun("世界你好");
</script>

调用函数:

函数名(参数)：创建的函数名加小括号，括号内写传的参数值，一般称之为实参，顺序对应形参的顺序。

扫描二维码关注公众号，回复： 10844938 查看本文章

函数的返回值

函数中的返回值，跟定义的函数是否传参没有任何关系；

返回值是函数中可以返回一个类型，函数外可以进行接收并输出，函数是否传参跟调用的时候就需要对应。

function 函数名(){
    // 执行代码
    return 类型名;
}

<script>
    // 创建名字为myFun的函数，带有参数名为str
    function myFun(str){
        var ret = str + "hello word";
        // 返回ret字符串
        return ret;
    }
    // 定义一个变量的值为，调用myFun函数并传参，接收的返回值
    var fun = myFun("世界你好!");
    // 输出变量
    document.write(fun);
</script>

对象

引用数据类型

对象：在javascript中，对象是拥有属性和方法的数据，对象是属性的集合，他也是一种数据类型，所谓的属性就是这个对象的特征，可以描述的特点。

创建对象：

自定义对象：对象由花括号分割。在括号内部，对象的属性以名称和值对的形式(name:value)来定义。属性是由逗号分隔，属性值是可以任何类型，甚至可以是函数。

// var定义一个对象名叫cat，含name,age两个属性
var cat = {
    name:"喵喵",
    age:2,
}

创建对象方法(对象中包含方法)

对象的方法定义了一个函数，并作为对象的属性存储，也就是说创建对象属性值时可以使用函数进行创建，并对函数进行调用。

var cat = {
    name:"喵喵",
    age:2,
    // 定义js对象方法--方法名为sayName，function为方法的关键字
    sayName:function(){
        console.log("我是喵喵");
    },
}

获取对象中的属性值

对象名.属性名(通常使用此方法)

//获取cat对象名的name属性，并输出console.log(cat.name)

对象名["属性名"]

//获取cat对象名的name属性，并输出console.log(cat["name"])

对象名.属性方法名(调用对象中的方法)

//调用对象中的方法，调用方式:cat.sayName()

给方法传参数

给对象中的方法传递参数和给函数传递参数是一样的。

<script>
    var cat = {
        name:"喵喵",
        age:2,
        // 定义JS对象方法--方法名为sayName，function为方法的关键字
        // num为参数
        sayName:function(num){
            document.write("我是喵喵" + num);
        },
    };
    // 调用对象中的方法，调用方式：对象名.方法名;
    // sayName为方法名
    // 12346为给需要传递的参数赋值
    cat.sayName(123456);
</script>

数组

数组是一个特殊的对象，对象的概念是属性的集合，而数组是元素的有序集合。

特点

数组中的元素下标(标识)从0开始，我们可以通过下标获取数组中的元素
数组是特殊的对象，他有自己的方法和属性，是常见的是length可以获取数组的长度
数组的长度读取方式从1开始进行

声明方法

var 数组名 = [元素,元素,元素]

用声明变量关键词var进行声明，每个数组中的元素，用","分割，数组用"[]"括起来，再赋值给数组名。

<script>
    //  定义数组名为array,数组中的数据为1,2,3,4,5
    var array = [1,2,3,4,5];
    // 循环输出数组中的元素
    // 定义i变量的大小，小于数组长度
    for(var i=0;i<array.length;i++){
        // 输出数组中的元素，使用数组标识方法
        document.write(array[i]);
    };
</script>

数组属性级方法

获取数组长度length属性

数组名.length

追加数组元素push()：在数组中添加新的元素，使数组的长度有所正加

数组名.push(元素值)

<script>
    // 定义数组名为array,数组中的数据为1,2,3,4,5
    var array = [1,2,3,4,5];
    // 追加数组中的元素
    array.push(90);
    // 输出追加的数组元素
    document.write(array[5]);
</script>

for...in...循环

javascript for/in 语句循环遍历对象的属性

<script>
    // 定义一个数组名为array
    var array = [1,2,3,4,5,6];
    // for..in...循环案例(讲解循环)
    // i为属性名,遍历数组使用,可以理解为数组的标识
    for(var i in array){
        document.write(array[i]);
    };
</script>

DOM

元素对象

document.querySelector()

返回匹配的指定的选择器的第一个元素，如果该元素较多，则返回第一个元素

document.querySelector("添加元素名")

<body>
    <h1>DOM测试内容</h1>
    <script>
        // document.querySelector()获取元素，使用元素名获取
        var h1 = document.querySelector("h1");
        // 在系统日志中输出获取的内容
        console.log(h1);
    </script>
</body>

document.querySelector(".class类名")

<body>
    <h1 class="title">DOM测试内容</h1>
    <script>
        // document.querySelector()获取元素，使用类名进行获取元素
        var h1 = document.querySelector(".title");
        // 在系统日志中输出获取的内容
        console.log(h1);
    </script>
</body>

document.querySelector("#id名")

<body>
    <h1 id="title">DOM测试内容</h1>
    <script>
        // document.querySelector()获取元素，使用id名进行获取元素
        var h1 = document.querySelector("#title");
        // 在系统日志中输出获取的内容
        console.log(h1);
    </script>
</body>

document.querySelectorAll()

document.querySelectorAll("添加元素名/.class名/#id名");

文档中匹配的css选择器的所有元素节点列表，多用于有序或无序列表(默认元素存储到数组当中,返回一个数组对象)

<body>
    <ul>
        <li class="public_li">香蕉</li>
        <li class="public_li">苹果</li>
        <li class="public_li">西瓜</li>
        <li class="public_li">桃子</li>
    </ul>
    <script>
        // document.querySelectorAll获取元素，使用类名进行获取
        var lists = document.querySelectorAll(".public_li");
        // 在系统日志中输出获取内容
        console.log(lists.length);
    </script>
</body>

获取父级元素节点：parentNode

document.querySelector("子级元素名/.class名/#id名").parentNode；

parentNode属性可以返回某节点的父节点，如果指定的节点没有，父节点内返回null，可在不知道父级元素时，使用此方法删除元素节点

<body>
    <ul>
        <li class="public_li">香蕉</li>
        <li class="public_li">苹果</li>
        <li class="public_li">西瓜</li>
        <li class="public_li">桃子</li>
    </ul>
    <script>
        // document.querySelector获取元素，使用类名进行获取元素
        // 使用parentNode方法获取父级
        var lists = document.querySelector(".public_li").parentNode;
        // 在系统日志中输出获取的内容
        console.log(lists);
    </script>
</body>

创建元素节点：document.createElement();

document.createElement("元素名");

<body>
    <h1>DOM测试内容</h1>
    <script>
        // 请使用createElement方法，创建p标签
        var content = document.createElement("P");
        // 在系统日志中输出p标签
        console.log(content);
    </script>
</body>

删除元素节点：removerChild()

父级元素.removerChild(子级元素);

通过父级元素删除子级元素，在不确定父级元素时，可以使用此方法获取到父级元素删除子级元素

<body>
    <ul>
        <li class="public_li">第一个数据</li>
        <li class="public_li">第二个数据</li>
        <li class="public_li">第三个数据</li>
        <li class="public_li">第四个数据</li>
    </ul>
    <script>
        // 获取第一个li元素
        var lists = document.querySelector(".public_li");
        // 获取li元素的父级元素
        var uls = lists.parentNode;
        // 通过父级元素删除第一个li元素
        uls.removeChild(lists);
    </script>
</body>

文本对象

创建文本节点

创建文本节点请使用：document.createTextNode("文字")

<body>
    <p>DOM测试文字</p>
    <script>
        // document.createTextNode创建文本节点
        var content = document.createTextNode("helloword");
        // content.nodeValue获取文本节点中的内容
        document.write(content.nodeValue);
    </script>
</body>

获取文本节点内容

nodeValue

<body>
    <p>DOM测试文字</p>
    <script>
        // document.createTextNode创建文本节点
        var content = document.createTextNode("helloword");
        // content.nodeValue获取文本节点中的内容
        document.write(content.nodeValue);
    </script>
</body>

将创建的文本节点赋值到已经有元素中：appendChild()方法

追加文本节点的元素变量，appendChild(创建的文本节点内容)

<body>
    <p class="content">DOM测试文字</p>
    <script>
        // 通过class类名获取p标签
        var ps = document.querySelector(".content");
        // document.createTextNode创建文本节点
        var content = document.createTextNode("hello word");
        // 在p标签后追加新创建的文本节点内容
        ps.appendChild(content);
    </script>
</body>

覆盖文本节点内容

innerHTML()：新内容覆盖之前的文本内容

元素节点.innerHTML = "新文本节点内容"

<body>
    <p class="content">DOM测试文字</p>
    <script>
        // 通过class类名获取p标签
        var ps = document.querySelector(".content");
        // 使用innerHTML方法修改之前的内容
        ps.innerHTML = "修改后的内容";
    </script>
</body>

事件对象

事件绑定

DOM事件

我们可以在事件发生时执行javascript，比如当用户在HTML元素上操作时。

事件分类

onclick：鼠标点击事件

节点.onclick = function(){代码块}

<body>
    <p class="content">段落文档</p>
    <button class="public_btn">按钮</button>
    <script>
        // 获取p标签与button标签的元素节点
        var btn = document.querySelector(".public_btn");
        var str = document.querySelector(".content");
        // button标签添加onclick事件
        btn.onclick = function(){
            // 事件执行给p标签添加新的内容，覆盖之前内容
            str.innerHTML = "hello word";
        };
    </script>
</body>

onmousemove：鼠标移入事件，和，onmouseout：鼠标移除事件

鼠标移入事件：节点.onmousemove = function(){代码块};

鼠标移除事件：节点.onmouseout = function(){代码块};

<body>
    <p class="content">段落文档</p>
    <script>
        // 获取p标签元素节点
        var str = document.querySelector(".content");
        // 鼠标移入事件
        str.onmousemove = function(){
            str.innerHTML = "鼠标移入事件";
        };
        // 鼠标移除事件
        str.onmouseout = function(){
            str.innerHTML = "段落文档";
        };
    </script>
</body>

添加监听事件：addEventListevent()方法

使用方法：addEventListevent("事件名",函数,布尔值);

注：

事件名不含"on"，如"click";
事件处理函数不可以加参数；
现在的版本可以省略第三个参数，默认值false，true表示事件捕获过程，false表示事件冒泡过程，true最先执行

<body>
    <p class="content">段落文档</p>
    <script>
        // 获取p标签元素节点
        var str = document.querySelector(".content");
        // 添加监听事件，类型为点击事件
        str.addEventListener("click",function(){
            str.innerHTML = "测试监听";
        });
    </script>
</body>

<body>
    <p class="content">段落文档</p>
    <script>
        // 获取p标签元素节点
        var str = document.querySelector(".content");
        // 添加一个函数，在函数中写要实现的方法
        function myFunction(){
            str.innerHTML = "监听事件内容";
        };
        // 添加监听事件，类型为点击事件，并调用函数
        str.addEventListener("click",myFunction);
    </script>
</body>

删除监听事件：removeEventListener()方法

使用方法：removeEventListener("事件名",事件处理函数,布尔值)

注：

事件名不含"on"，如"click";
事件处理函数不可以加参数；
现在的版本可以省略第三个参数，默认值false，true表示事件捕获过程，false表示事件冒泡过程，true最先执行

<body>
    <p class="content">段落文档</p>
    <button class="remover">删除事件监听</button>
    <script>
        // 获取元素节点
        var str = document.querySelector(".content");
        var btn = document.querySelector(".remover");
        // 添加鼠标点击的函数
        function btnFunction(){
            str.innerHTML = "测试内容";
        };
        // 使用事件监听，调用鼠标点击的函数
        btn.addEventListener("click",btnFunction);
        // 删除文本的点击事件
        btn.removeEventListener("click",btnFunction);
    </script>
</body>

DOM2级事件

用于指定元素添加事件，添加的事件不会覆盖以存在的事件，可以向一个元素添加多个事件。可以向同个元素添加同类型的事件。

巧克力很苦

发布了134 篇原创文章 · 获赞 109 · 访问量 7万+

私信关注