HTML-JavaScript

时间：2021-06-06 18:49:06 收藏：0 阅读：0

HTML-JavaScript

01. JavaScript写在哪里

head部分: 用于声明变量，函数，类型，为事件绑定处理函数
body部分: 调用脚本执行
外部脚本: 用于定义函数，类型
执行顺序: 在代码中从上往下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="0605-01-HtmlJavaScript.js"></script>
    <title>Document</title>
    <script>
        alert("head");
    </script>
</head>
<body>
    <script>
    alert("body")
    </script>
    
</body>
</html>

02.基础语法

大小写敏感
弱类型语言
分号结尾
字符串可使用单引号和双引号

2.1数据类型

因为JavaScript为弱类型语言，故变量声明只需要使用var ，关键字即可申明任何类型
虽然var关键字可申明为任何类型，但是JavaScript仍有数据类型
boolean number string Underfined Null Object
Underfined Null类型只有一个值的数据类型，值分别为underfined与null
查看变量类型可使用typeof方法

2.2 集合

数组 {}
键值对 {"kay1":"value1","kay2":"value2"}
对象数组 {{"kay1":"value1","kay2":"value2"},{"kay3":"value3","kay4":"value4"}}
属性方法
类型转化

2.3方法的使用

使用关键字function定义方法
方法名使用驼峰命名法
方法可以设置参数和返回值，js中不存在方法的重载

<script>
        var num1 = 3;
        var num2 = 4;
        function ShowInfo(item1,item2){
            return item1 + item2;
        }
        alert(ShowInfo(num1,num2));
    </script>

2.4 匿名方法

匿名方法可以简单的理解成不需要写方法名称的方法
匿名方法一般常用两种写法

var fun =  function(params){
....
}
//这种方法可以把匿名方法赋值给一个变量，调用这个变量即可使用该方法
(function(param1,param2){
....
})(1,2);
// 这种方法可以在定义匿名方法的同时传参及调用

03.闭包

目前可以简单的理解成子方法可以使用父方法的变量

04.DOM

DOM用于操作html文档，准确的来说是html标签中的内容
JavaScript中将每一个标签当作对象处理，每隔标签都有自己的属性，也拥有触发事件方法
操作DOM对象，一般使用document关键字调用

4.1 Js获取元素的方法

document.getElementById(id): 根据id获取元素节点
document.getElementByClassName(classname): 根据class的值获取一组元素节点
document.getElementByName(name): 根据name获取一组元素节点
document.getElementByTagName(tag): 根据标签名获取一组元素节点

<div id="dv1" class="dv">dv1</div>
    <div id="dv2" class="dv">dv2</div>
    <div id="dv3" class="dv">dv3</div>
    <div id="dv4" class="dv">dv4</div>
    <script>
       alert(document.getElementById("dv1").innerText + "   "+document.getElementsByClassName("dv")[0].innerText)
    </script>

4.2 注册事件

事件常用的注册方式有多种，此处介绍两种，一种直接在元素上注册事件，一种在获取的对象上注册事件

元素注册法

<input id="text1" type="text" onclick="ClickMe1()">
    <script>
        function ClickMe1(){
            alert("点我1");
        }
    </script>

对象注册法

<input id="text2" type="text" onclick="ClickMe2()">
<script>
   document.getElementById("text2").onclick = function(){
    alert("点我2");
   }
</script>

4.3 动态操作元素

document.creatElement(): 创建元素
document.appendChild(): 添加子元素
document.insertBefore(newEl,orgEl): 在莫元素前添加元素
document.firstChild; 获取第一个元素