HTML-JavaScript

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"},{"kay3":"value3","kay4":"value4"}}
  • 属性 方法
  • 类型转化

2.3方法的使用

  1. 使用关键字function定义方法
  2. 方法名使用驼峰命名法
  3. 方法可以设置参数和返回值，js中不存在方法的重载
<script>
        var num1 = 3;
        var num2 = 4;
        function ShowInfo(item1,item2){
            return item1 + item2;
        }
        alert(ShowInfo(num1,num2));
    </script>

2.4 匿名方法

  1. 匿名方法可以简单的理解成不需要写方法名称的方法
  2. 匿名方法一般常用两种写法
var fun =  function(params){
....
}
//这种方法可以把匿名方法赋值给一个变量，调用这个变量即可使用该方法
(function(param1,param2){
....
})(1,2);
// 这种方法可以在定义匿名方法的同时传参及调用

03.闭包

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

04.DOM

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

4.1 Js获取元素的方法

  1. document.getElementById(id): 根据id获取元素节点
  2. document.getElementByClassName(classname): 根据class的值获取一组元素节点
  3. document.getElementByName(name): 根据name获取一组元素节点
  4. 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 注册事件

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

  1. 元素注册法

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

  2. 对象注册法

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

4.3 动态操作元素

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

4.4获取元素内容

  1. innerHTML 获取与赋值开闭标签的元素中的全部内容 赋值可以添加html标签
  2. innerText 获取与赋值开闭标签的元素中的部分内容

4.5 操作样式

操作style属性
  • style属性可以设置或返回样式
  • style设置css特征值时，需要把特征的 短横线命名法改成驼峰命名法后使用
HTMLElementObject.style.cssFloat
操作className属性

className 属性设置或返回元素的class属性

设置属性值：HTMLElementObject.className = classname

05. BOM

BOM用于操作浏览器行为，一般使用windows关键字调用

5.1 常用方法

  1. alert(): 弹出提示对话框

  2. confirm(): 弹出确认对话框，返回bool值类型

  3. prompt(): 弹出用户输入对话框，返回输入的内容，如果取消则返回null

  4. setInterval(code,milliseconds): 计时器方法可以按照指定的周期（毫秒）来调用函数或者计算表达式，直到clearInterval()被调用

  5. setTimeout(code,milliseconds): 一次性计时器方法用于在指定的毫秒数后调用函数或计算表达式，由setTimeout()返回的计时器ID值作为clearInterval()方法的参数

  6. location 浏览器地址栏对象
    hash 返回一个URL的锚部分
    host 返回一个URL的主机名和端口
    hostname 主机名
    href 完整的URL
    pathname URL的路径名
    port 端口号
    protocol URL协议

  7. onload 页面加载完成后调用

posted @ 2021-06-05 19:23  阿狸的萝卜  阅读(52)  评论(0)  编辑  收藏  举报